Table 表格

新粗野主义风格数据表格，包含 8 个可组合子组件，用于结构化表格数据展示。基于原生 HTML 表格元素构建，支持表头变体、表尾变体及无障碍标签。

预览

Preview

名称	状态	金额
发票 #001	已支付	$250.00
发票 #002	待处理	$150.00

自定义 aria-label

名称	金额
发票 #001	$250.00
发票 #002	$150.00

表头底纹（texture）

剖面线	HATCH
A-01	¥ 120

点阵	DOTS
B-02	¥ 340

安装

pnpm dlx brutx-vue@latest add table

用法

<script setup>
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell, TableCaption, TableFooter } from 'brutx-ui-vue'
</script>

<template>
    <Table>
        <TableCaption>A list of your recent invoices.</TableCaption>
        <TableHeader>
            <TableRow>
                <TableHead class="w-[100px]">Invoice</TableHead>
                <TableHead>Status</TableHead>
                <TableHead class="text-right">Amount</TableHead>
            </TableRow>
        </TableHeader>
        <TableBody>
            <TableRow>
                <TableCell class="font-medium">INV001</TableCell>
                <TableCell>Paid</TableCell>
                <TableCell class="text-right">$250.00</TableCell>
            </TableRow>
            <TableRow>
                <TableCell class="font-medium">INV002</TableCell>
                <TableCell>Pending</TableCell>
                <TableCell class="text-right">$150.00</TableCell>
            </TableRow>
        </TableBody>
        <TableFooter>
            <TableRow>
                <TableCell colspan="2">Total</TableCell>
                <TableCell class="text-right">$400.00</TableCell>
            </TableRow>
        </TableFooter>
    </Table>
</template>

子组件

组件	说明
Table	根表格容器，带边框和阴影
TableHeader	表头区域（<thead>）
TableBody	表体区域（<tbody>）
TableFooter	表尾区域（<tfoot>）
TableRow	表格行（<tr>），带底部边框
TableHead	头部单元格（<th>），粗体文字
TableCell	数据单元格（<td>）
TableCaption	表格标题（<caption>）

API 参考

Table

Table — 属性

名称	类型	默认值	说明
class	string | undefined	—	追加到原生 table 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 Table.vue:7 packages/ui/src/components/table/Table.vue
ariaLabel	string | undefined	—	设置原生 table 的 aria-label，为表格提供可访问名称。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 Table.vue:9 packages/ui/src/components/table/Table.vue

Table — 插槽

名称	签名或类型	说明
#default	{}	组合 TableHeader、TableBody、TableFooter 等表格结构子组件。
详情 声明类型 {} 来源 Table.vue packages/ui/src/components/table/Table.vue

TableBody

TableBody — 属性

名称	类型	默认值	说明
class	string | undefined	—	追加到原生 tbody 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 TableBody.vue:7 packages/ui/src/components/table/TableBody.vue

TableBody — 插槽

名称	签名或类型	说明
#default	{}	放置表格行 TableRow。
详情 声明类型 {} 来源 TableBody.vue packages/ui/src/components/table/TableBody.vue

TableCaption

TableCaption — 属性

名称	类型	默认值	说明
class	string | undefined	—	追加到原生 caption 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 TableCaption.vue:7 packages/ui/src/components/table/TableCaption.vue

TableCaption — 插槽

名称	签名或类型	说明
#default	{}	呈现表格标题或摘要内容。
详情 声明类型 {} 来源 TableCaption.vue packages/ui/src/components/table/TableCaption.vue

TableCell

TableCell — 属性

名称	类型	默认值	说明
class	string | undefined	—	追加到原生 td 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 TableCell.vue:7 packages/ui/src/components/table/TableCell.vue

TableCell — 插槽

名称	签名或类型	说明
#default	{}	呈现表格数据单元格内容。
详情 声明类型 {} 来源 TableCell.vue packages/ui/src/components/table/TableCell.vue

TableFooter

TableFooter — 属性

名称	类型	默认值	说明
variant	"accent" | "default" | "primary" | undefined	"default"	选择表格表尾的默认、主色或强调色样式。
详情 声明类型 NonNullable<"default" | "primary" | "accent" | null | undefined> | undefined 字面量 "accent" "default" "primary" 默认值详情 声明 'default' 来源: packages/ui/src/components/table/TableFooter.vue 解析值 "default" 来源 TableFooter.vue:10 packages/ui/src/components/table/TableFooter.vue
class	string | undefined	undefined	追加到原生 tfoot 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/table/TableFooter.vue 解析值 undefined 来源 TableFooter.vue:11 packages/ui/src/components/table/TableFooter.vue

TableFooter — 插槽

名称	签名或类型	说明
#default	{}	放置表格汇总或其他表尾行内容。
详情 声明类型 {} 来源 TableFooter.vue packages/ui/src/components/table/TableFooter.vue

TableHead

TableHead — 属性

名称	类型	默认值	说明
variant	"default" | "primary" | "secondary" | undefined	undefined	选择表头单元格的默认、主色或次要色样式。
详情 声明类型 NonNullable<"default" | "primary" | "secondary" | null | undefined> | undefined 字面量 "default" "primary" "secondary" 默认值详情 声明 undefined 来源: packages/ui/src/components/table/TableHead.vue 解析值 undefined 来源 TableHead.vue:10 packages/ui/src/components/table/TableHead.vue
class	string | undefined	undefined	追加到原生 th 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/table/TableHead.vue 解析值 undefined 来源 TableHead.vue:11 packages/ui/src/components/table/TableHead.vue

TableHead — 插槽

名称	签名或类型	说明
#default	{}	呈现表头单元格内容；该元素设置 scope="col"。
详情 声明类型 {} 来源 TableHead.vue packages/ui/src/components/table/TableHead.vue

TableHeader

TableHeader — 属性

名称	类型	默认值	说明
variant	"default" | "primary" | "secondary" | undefined	"default"	选择表格表头的默认、主色或次要色样式。
详情 声明类型 NonNullable<"default" | "primary" | "secondary" | null | undefined> | undefined 字面量 "default" "primary" "secondary" 默认值详情 声明 'default' 来源: packages/ui/src/components/table/TableHeader.vue 解析值 "default" 来源 TableHeader.vue:10 packages/ui/src/components/table/TableHeader.vue
texture	"dots" | "hatch" | "none" | undefined	"none"	选择表头无底纹、斜线或点阵底纹；底纹叠加在所选配色上。
详情 声明类型 NonNullable<"none" | "dots" | "hatch" | null | undefined> | undefined 字面量 "dots" "hatch" "none" 默认值详情 声明 'none' 来源: packages/ui/src/components/table/TableHeader.vue 解析值 "none" 来源 TableHeader.vue:12 packages/ui/src/components/table/TableHeader.vue
class	string | undefined	undefined	追加到原生 thead 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/table/TableHeader.vue 解析值 undefined 来源 TableHeader.vue:13 packages/ui/src/components/table/TableHeader.vue

TableHeader — 插槽

名称	签名或类型	说明
#default	{}	放置表头行 TableRow。
详情 声明类型 {} 来源 TableHeader.vue packages/ui/src/components/table/TableHeader.vue

TableRow

TableRow — 属性

名称	类型	默认值	说明
class	string | undefined	—	追加到原生 tr 元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 TableRow.vue:7 packages/ui/src/components/table/TableRow.vue

TableRow — 插槽

名称	签名或类型	说明
#default	{}	放置表头单元格或数据单元格。
详情 声明类型 {} 来源 TableRow.vue packages/ui/src/components/table/TableRow.vue

可访问性

• ARIA 属性：通过 ariaLabel 为表格提供可读名称，便于屏幕阅读器识别表格用途，对于无可见标题（TableCaption）的表格尤为重要。ariaLabel 仅作用于 Table 根组件。

<script setup>
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from 'brutx-ui-vue'
</script>

<template>
    <Table ariaLabel="近期发票列表">
        <TableHeader>
            <TableRow>
                <TableHead>名称</TableHead>
                <TableHead>金额</TableHead>
            </TableRow>
        </TableHeader>
        <TableBody>
            <TableRow>
                <TableCell>发票 #001</TableCell>
                <TableCell>$250.00</TableCell>
            </TableRow>
        </TableBody>
    </Table>
</template>

• 语义化标记：使用原生 <table>、<thead>、<tbody>、<tfoot>、<th>、<td>、<caption> 元素，确保辅助技术正确解析表格结构