Table 表格
使用原生表格语义呈现无需内置数据引擎的行列关系。
使用概览
适合使用
- 数据规模可控，并需要清晰的表头与单元格对应关系时。
不建议使用
- 需要内置排序、筛选、分页或大量行虚拟化能力时。
真实示例
套餐价格表
用表头和标题呈现简单的套餐价格关系。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/table.json基础用法
导入
import { TableContainer, Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@richardqiu/quartz/table";JSX
<TableContainer aria-label="套餐价格"><Table><TableCaption>月付价格</TableCaption><TableHeader><TableRow><TableHead>套餐</TableHead><TableHead>价格</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>团队版</TableCell><TableCell>¥99</TableCell></TableRow></TableBody></Table></TableContainer>状态与控制摘要
默认
悬停
已选择
空状态
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
density | "compact" | "comfortable" | "default" | "default" | 控制表格单元格在当前区域内的内容密度。 |
组合结构
- 01
TableContainer - 02
Table - 03
TableCaption - 04
TableHeader - 05
TableBody - 06
TableFooter - 07
TableRow - 08
TableHead - 09
TableCell
键盘约定
- 具名 TableContainer 可聚焦以横向滚动，单元格控件保持原生键盘行为。
可访问性契约
- 各部件渲染为原生表格元素，TableHead 默认使用列标题作用域。
- 容器是具名滚动区域，并支持 LTR、RTL 与三种密度。