数据与反馈@neumorphism-ui/table

Table

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

@neumorphism-ui/table

预览

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

安装

npx shadcn@latest add @neumorphism-ui/table

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

<Table>
  <TableCaption>最近安装的组件</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead scope="col">组件</TableHead>
      <TableHead scope="col">分类</TableHead>
      <TableHead scope="col">状态</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Dialog</TableCell>
      <TableCell>浮层</TableCell>
      <TableCell>就绪</TableCell>
    </TableRow>
  </TableBody>
</Table>

API 参考

组件	属性	类型	默认值	说明
`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 的合并范围。

预览

安装

用法

Import

Example

API 参考

无障碍