DataTable 数据表格
展示可排序、筛选、分页与选择的结构化业务数据集合。
使用概览
适合使用
- 用户需要查找、比较或批量操作多行多列记录时。
不建议使用
- 数据量很小、结构简单，或内容更适合卡片与叙事布局时。
真实示例
可排序成员表格
以稳定行标识和列定义呈现成员数据。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/data-table.json基础用法
导入
import { DataTable } from "@richardqiu/quartz/data-table";JSX
<DataTable tableLabel="成员列表" columns={[{ id: "name", header: "姓名", accessor: (row) => row.name, cell: (row) => row.name, sortable: true }]} rows={[{ id: "u1", name: "林晨" }]} getRowId={(row) => row.id} emptyContent="暂无成员" />状态与控制摘要
默认
键盘焦点可见
已选择
加载中
空状态
错误
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
columns | readonly DataTableColumn<Row>[] | 必填 | 声明列标识、表头、单元格渲染与排序能力。 |
getRowId | (row: Row) => string | 必填 | 为选择、排序和更新提供稳定且唯一的行标识。 |
组合结构
- 01
DataTable
键盘约定
- 按钮与复选框保持原生键盘行为，具名表格区域可聚焦以横向滚动。
可访问性契约
- 原生表格标记保留表头与单元格关系。
- 排序方向与行选择标签对辅助技术可感知。