DataTable 数据表格
列表页的表格：筛选区、工具栏、已筛选标签、排序、选择、固定操作列、分页和批量操作。基于 TanStack Table。
用户列表
共 46 条| 用户 | 手机号 | 状态 | 操作 | |||
|---|---|---|---|---|---|---|
| 林三1user01 | 研发中心 | 13810000000 | 停用 | 2026-01-01 10:00 | ||
| 王五2user02 | 产品部 | 13810007919 | 正常 | 2026-02-02 10:01 | ||
| 赵六3user03 | 设计部 | 13810015838 | 正常 | 2026-03-03 10:02 | ||
| 孙七4user04 | 市场部 | 13810023757 | 正常 | 2026-04-04 10:03 | ||
| 周八5user05 | 研发中心 | 13810031676 | 正常 | 2026-05-05 10:04 | ||
| 林三6user06 | 产品部 | 13810039595 | 正常 | 2026-06-06 10:05 | ||
| 王五7user07 | 设计部 | 13810047514 | 停用 | 2026-07-07 10:06 | ||
| 赵六8user08 | 市场部 | 13810055433 | 正常 | 2026-08-08 10:07 | ||
| 孙七9user09 | 研发中心 | 13810063352 | 正常 | 2026-09-09 10:08 | ||
| 周八10user10 | 产品部 | 13810071271 | 正常 | 2026-01-10 10:09 |
第 1–10 条，共 46 条
每页
一个列表页由几块拼起来，各自独立，按需取用：
| 组件 | 文件 | 作用 |
|---|---|---|
SearchForm / SearchField | data-table/search-form | 筛选区：默认 3 个条件，其余收进「展开」；给 values 时改条件 300ms 自动搜索 |
TableCard | data-table/table-card | 白卡外框 |
TableToolbar | 同上 | 标题、总数、刷新、行高、列设置 |
FilterChips | 同上 | 已生效的筛选条件，可逐个移除 |
DataTable | data-table/data-table | 表格本体：加载骨架、空状态、无匹配、出错重试、固定列阴影 |
Pagination | data-table/table-card | 分页，每页 10 / 20 / 50 |
BulkBar | 同上 | 勾选后底部浮出的批量操作条 |
TableAction | data-table/table-action | 操作列 |
列的 meta 控制显示：label（列设置里的名字）、sticky: 'right'（固定在右侧）、fixed（不可隐藏）、align、className。要表头筛选、合计、拖动列宽，用 AdvancedTable；要分组、树形、虚拟滚动，用 DataGrid。
安装
pnpm dlx shadcn@latest add https://docs.linasan.cn/r/data-table.json第一次装本站的组件前先在项目里执行一次 shadcn init，详见 安装。
用法
import { DataTable, selectColumn } from '@/components/data-table/data-table';
import { Pagination, TableCard, TableToolbar } from '@/components/data-table/table-card';
const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel(), … });
<TableCard>
<TableToolbar title="用户列表" count={total} table={table} />
<DataTable table={table} status={isLoading ? 'loading' : isError ? 'error' : 'ready'} />
<Pagination page={page} pageSize={size} total={total} onPageChange={setPage} />
</TableCard>安装其余部分
pnpm dlx shadcn@latest add https://docs.linasan.cn/r/table-card.json第一次装本站的组件前先在项目里执行一次 shadcn init，详见 安装。
筛选区是 search-form，操作列是 table-action。
属性
DataTable
属性
类型
TableToolbar
属性
类型
Pagination
属性
类型
SearchForm
属性
类型