BrutxUI

Appearance

Table ​

新粗野主义风格数据表格，包含 8 个可组合子组件，用于结构化表格数据展示。

预览 ​

NameStatusAmount
Invoice #001Paid$250.00
Invoice #002Pending$150.00

安装 ​

pnpm dlx brutx@latest add table

用法 ​

vue
<script setup>
import Table from '@/components/ui/Table.vue'
import TableHeader from '@/components/ui/TableHeader.vue'
import TableBody from '@/components/ui/TableBody.vue'
import TableHead from '@/components/ui/TableHead.vue'
import TableRow from '@/components/ui/TableRow.vue'
import TableCell from '@/components/ui/TableCell.vue'
import TableCaption from '@/components/ui/TableCaption.vue'
import TableFooter from '@/components/ui/TableFooter.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>）

属性 ​

所有子组件均接受：

属性类型默认值
classstring—