Table

用于需要按行列对比阅读的结构化数据。需要排序、筛选或选择时使用 DataTable。

预览

关注列表数据

比较示例代码、价格、涨跌和状态，包括选中行与正负变化。

自选股 · 数据延迟 10 分钟
代码	价格	涨跌	状态
NVDA	$181.92	+2.41%	交易中
005930	₩72,400	+1.08%	已选择
TSLA	$318.27	−0.64%	关注

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/table

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

关注列表数据

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/table

Registry JSON

用法

组合 TableCaption、指定 scope 的 TableHead 和 TableBody 行。使用表格元素，确保小屏滚动时仍能保留数据关系。

import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export default function Example() {
  return (
    <Table>
      <TableCaption>Workspace projects</TableCaption>
      <TableHeader><TableRow><TableHead scope="col">Project</TableHead><TableHead scope="col">Seats</TableHead></TableRow></TableHeader>
      <TableBody><TableRow><TableCell>Atlas</TableCell><TableCell>12</TableCell></TableRow></TableBody>
    </Table>
  );
}

API 参考

组合原生 table、caption、thead、tbody、tfoot、tr、th 和 td 元素。外层 container 提供 overflow-x-auto 与拟物 raised 表面。

组件	属性	类型	默认值	说明
`Table`	`children`必填	`React.ReactNode`	`—`	排列 caption 和各个 table section。
`TableCaption`	`children`	`React.ReactNode`	`—`	说明表格用途和数据范围。
`TableHead`	`scope`	`"col" \| "row" \| "colgroup" \| "rowgroup"`	`—`	明确 header 所描述的 cell 方向。
`TableRow`	`data-state`	`"selected" \| string`	`—`	启用选中行的 inset 状态。
`TableCell`	`colSpan / rowSpan`	`number`	`—`	设置原生 table cell 的合并范围。

预览

关注列表数据

安装

用法

API 参考

无障碍