SuperAPI AI 工具集

shadcn-syntax-table

测试与质量

查看项目

更新于 10-16 06:18

技能介绍

用途:这是 shadcn/ui 中针对 HTML 表格的样式原语(styling primitive),不是数据网格。它不提供排序、筛选、分页或行选择,只是对 <table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>、<caption> 的八层薄封装,附带统一的 Tailwind 类与 data-slot 属性。

主要能力:Table 会把原生 <table> 包进带 overflow-x-auto 的滚动容器,窄屏自动横向滚动;TableHeader 为每行加下边框;TableBody 去掉最后一行的下边框;TableFooter 用 bg-muted/50 与 font-medium 表示汇总行;TableRow 提供悬停与选中态样式钩子;TableHead 与 TableCell 分别对应表头与数据单元格,并预留复选框对齐选择器;TableCaption 提供可访问的表格说明。

使用方式:从本地别名 @/components/ui/table 导入组件(shadcn 是复制而非安装,不要从 shadcn-ui 或 @shadcn/ui 导入)。表头单元格必须用 TableHead 放在 TableHeader 内,数据单元格必须用 TableCell 放在 TableBody 或 TableFooter 内,不可互换。每个表格必须提供可访问名称,三选一:TableCaption、Table 上的 aria-label,或指向已有标题 id 的 aria-labelledby,不可同时使用。TableFooter 在源码顺序上应位于 TableBody 之后。

适用场景:静态或只读数据展示,例如发票列表、汇总表。若需要点击表头排序、搜索筛选、分页、行选择或列显隐/调整/重排,应改用 shadcn-impl-data-table(TanStack Table v8 方案),该方案会组合本原语而非替代它。

限制:不要自行在外层再包 overflow 容器,否则会出现双滚动条;不要在 TableBody 内放 TableHead;不要手写排序表头;不要把分页状态放进本原语。v4 源码首行带 "use client",在 Next.js App Router 中导入服务端文件会把该组件打进客户端包,可复制源码后删除该行;v3 源码无此指令。v3 与 v4 在间距、颜色与 forwardRef 上存在差异。具体版本细节与完整反模式清单以资料所述参考文件为准。