Table

Neo-brutalist data table with 8 composable sub-components for structured tabular data display. Built on native HTML table elements, supporting header variants, footer variants, and accessibility labels.

Demo

Preview

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

自定义 aria-label

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

表头底纹（texture）

剖面线	HATCH
A-01	¥ 120

点阵	DOTS
B-02	¥ 340

Installation

pnpm dlx brutx-vue@latest add table

Usage

<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>

Sub-components

Component	Description
Table	Root table container with border and shadow
TableHeader	Header area (<thead>)
TableBody	Body area (<tbody>)
TableFooter	Footer area (<tfoot>)
TableRow	Table row (<tr>) with bottom border
TableHead	Header cell (<th>) with bold text
TableCell	Data cell (<td>)
TableCaption	Table caption (<caption>)

API Reference

Table

Table — Props

Name	Type	Default	Description
class	string | undefined	—	Custom CSS classes appended to the native table element.
Details Declared type string | undefined Default value details Not declared — Source Table.vue:7 packages/ui/src/components/table/Table.vue
ariaLabel	string | undefined	—	Sets aria-label on the native table element to provide an accessible name.
Details Declared type string | undefined Default value details Not declared — Source Table.vue:9 packages/ui/src/components/table/Table.vue

Table — Slots

Name	Signature or type	Description
#default	{}	Composes table structure children such as TableHeader, TableBody, and TableFooter.
Details Declared type {} Source Table.vue packages/ui/src/components/table/Table.vue

TableBody

TableBody — Props

Name	Type	Default	Description
class	string | undefined	—	Custom CSS classes appended to the native tbody element.
Details Declared type string | undefined Default value details Not declared — Source TableBody.vue:7 packages/ui/src/components/table/TableBody.vue

TableBody — Slots

Name	Signature or type	Description
#default	{}	Contains table rows rendered with TableRow.
Details Declared type {} Source TableBody.vue packages/ui/src/components/table/TableBody.vue

TableCaption

TableCaption — Props

Name	Type	Default	Description
class	string | undefined	—	Custom CSS classes appended to the native caption element.
Details Declared type string | undefined Default value details Not declared — Source TableCaption.vue:7 packages/ui/src/components/table/TableCaption.vue

TableCaption — Slots

Name	Signature or type	Description
#default	{}	Renders a table caption or summary.
Details Declared type {} Source TableCaption.vue packages/ui/src/components/table/TableCaption.vue

TableCell

TableCell — Props

Name	Type	Default	Description
class	string | undefined	—	Custom CSS classes appended to the native td element.
Details Declared type string | undefined Default value details Not declared — Source TableCell.vue:7 packages/ui/src/components/table/TableCell.vue

TableCell — Slots

Name	Signature or type	Description
#default	{}	Renders table data cell content.
Details Declared type {} Source TableCell.vue packages/ui/src/components/table/TableCell.vue

TableFooter

TableFooter — Props

Name	Type	Default	Description
variant	"accent" | "default" | "primary" | undefined	"default"	Selects the default, primary, or accent style for the table footer.
Details Declared type NonNullable<"default" | "primary" | "accent" | null | undefined> | undefined Literal values "accent" "default" "primary" Default value details Declaration 'default' Source: packages/ui/src/components/table/TableFooter.vue Resolved value "default" Source TableFooter.vue:10 packages/ui/src/components/table/TableFooter.vue
class	string | undefined	undefined	Custom CSS classes appended to the native tfoot element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/table/TableFooter.vue Resolved value undefined Source TableFooter.vue:11 packages/ui/src/components/table/TableFooter.vue

TableFooter — Slots

Name	Signature or type	Description
#default	{}	Contains summary or other footer row content.
Details Declared type {} Source TableFooter.vue packages/ui/src/components/table/TableFooter.vue

TableHead

TableHead — Props

Name	Type	Default	Description
variant	"default" | "primary" | "secondary" | undefined	undefined	Selects the default, primary, or secondary style for a header cell.
Details Declared type NonNullable<"default" | "primary" | "secondary" | null | undefined> | undefined Literal values "default" "primary" "secondary" Default value details Declaration undefined Source: packages/ui/src/components/table/TableHead.vue Resolved value undefined Source TableHead.vue:10 packages/ui/src/components/table/TableHead.vue
class	string | undefined	undefined	Custom CSS classes appended to the native th element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/table/TableHead.vue Resolved value undefined Source TableHead.vue:11 packages/ui/src/components/table/TableHead.vue

TableHead — Slots

Name	Signature or type	Description
#default	{}	Renders header cell content. The element sets scope="col".
Details Declared type {} Source TableHead.vue packages/ui/src/components/table/TableHead.vue

TableHeader

TableHeader — Props

Name	Type	Default	Description
variant	"default" | "primary" | "secondary" | undefined	"default"	Selects the default, primary, or secondary style for the table header.
Details Declared type NonNullable<"default" | "primary" | "secondary" | null | undefined> | undefined Literal values "default" "primary" "secondary" Default value details Declaration 'default' Source: packages/ui/src/components/table/TableHeader.vue Resolved value "default" Source TableHeader.vue:10 packages/ui/src/components/table/TableHeader.vue
texture	"dots" | "hatch" | "none" | undefined	"none"	Selects no texture, hatch lines, or dots for the table header. The texture is layered over the selected color variant.
Details Declared type NonNullable<"none" | "dots" | "hatch" | null | undefined> | undefined Literal values "dots" "hatch" "none" Default value details Declaration 'none' Source: packages/ui/src/components/table/TableHeader.vue Resolved value "none" Source TableHeader.vue:12 packages/ui/src/components/table/TableHeader.vue
class	string | undefined	undefined	Custom CSS classes appended to the native thead element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/table/TableHeader.vue Resolved value undefined Source TableHeader.vue:13 packages/ui/src/components/table/TableHeader.vue

TableHeader — Slots

Name	Signature or type	Description
#default	{}	Contains header rows rendered with TableRow.
Details Declared type {} Source TableHeader.vue packages/ui/src/components/table/TableHeader.vue

TableRow

TableRow — Props

Name	Type	Default	Description
class	string | undefined	—	Custom CSS classes appended to the native tr element.
Details Declared type string | undefined Default value details Not declared — Source TableRow.vue:7 packages/ui/src/components/table/TableRow.vue

TableRow — Slots

Name	Signature or type	Description
#default	{}	Contains header cells or data cells.
Details Declared type {} Source TableRow.vue packages/ui/src/components/table/TableRow.vue

Accessibility

• ARIA Attributes: Use ariaLabel to provide a readable name for the table, helping screen readers identify the table's purpose. This is especially important for tables without a visible caption (TableCaption). ariaLabel only applies to the Table root component.

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

<template>
    <Table ariaLabel="Recent invoices list">
        <TableHeader>
            <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Amount</TableHead>
            </TableRow>
        </TableHeader>
        <TableBody>
            <TableRow>
                <TableCell>Invoice #001</TableCell>
                <TableCell>$250.00</TableCell>
            </TableRow>
        </TableBody>
    </Table>
</template>

• Semantic Markup: Uses native <table>, <thead>, <tbody>, <tfoot>, <th>, <td>, <caption> elements to ensure assistive technologies correctly parse the table structure.