Table
置于直角方框中的数据行：列标题位于黑色横条上，用倾斜的小号大写字母；单元格使用正文字体；行与行之间以暗色细线分隔。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/table示例
委托列表与合计
| Job | Route | Reward |
|---|---|---|
| J-104 | Rail yards → North gateRush | 3,100 cr |
| J-117 | Harbor → Old market | 1,450 cr |
| J-121 | Tower 9 → Canal docks | 2,275 cr |
| Total | 6,825 cr | |
import { Badge } from "@/components/zero/badge";import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,} from "@/components/zero/table";const jobs = [ { id: "J-104", route: "Rail yards → North gate", reward: "3,100", rush: true, }, { id: "J-117", route: "Harbor → Old market", reward: "1,450", rush: false }, { id: "J-121", route: "Tower 9 → Canal docks", reward: "2,275", rush: false },];export default function TableJobs() { return ( <Table> <TableHeader> <TableRow> <TableHead>Job</TableHead> <TableHead>Route</TableHead> <TableHead className="text-right">Reward</TableHead> </TableRow> </TableHeader> <TableBody> {jobs.map((job, index) => ( <TableRow key={job.id} data-state={index === 0 ? "selected" : undefined} > <TableCell className="font-semibold">{job.id}</TableCell> <TableCell> <span className="flex items-center gap-3"> {job.route} {job.rush ? <Badge>Rush</Badge> : null} </span> </TableCell> <TableCell className="text-right tabular-nums"> {job.reward} cr </TableCell> </TableRow> ))} </TableBody> <TableFooter> <TableRow> <TableCell colSpan={2}>Total</TableCell> <TableCell className="text-right tabular-nums">6,825 cr</TableCell> </TableRow> </TableFooter> <TableCaption>Open jobs in the east district.</TableCaption> </Table> );}行为
指针悬停的行会高亮。以 data-state="selected" 或 aria-selected 标记选中行：该行保持高亮，并在起始端显示强调色。
表格宽于外框时，外框可横向滚动。数字列请加上 text-right tabular-nums，使数字对齐。组件即普通的 HTML 表格，排序与选择需自行实现。