数据表格
筛选、排序与分页的 TanStack 数据表。
筛选、排序与分页的 TanStack 数据表。
Total Results
48 customers
| Purchase | Status | Actions | |||
|---|---|---|---|---|---|
 John Clarkson | Delivery failed | Sep 05, 2026 | $3.412 | ||
 Aspen Lubin | Delivery failed | Mar 25, 2026 | $1.899 | ||
 Michael Ekstrom | Shipped | Aug 01, 2026 | $2.752 | ||
 Kianna Vaccaro | Shipped | Apr 02, 2026 | $145 | ||
 Livia Saris | Delivery failed | Nov 14, 2026 | $708 |
安装
npx @joyui/cli add data-table --yes或通过 JoyUI MCP / CLI 安装。
应用场景
组合块可直接嵌入应用壳：通过 props / data 接入业务状态，勿写死文案。
上方预览中的文案、选项与数据均可替换为业务配置；不要复制写死的演示常量到生产。
API
DataTable
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 行数据。 | T[] | — | — |
| columns | 列定义。 | ColumnDef<T>[] | — | — |
| pageSize | 分页大小。 | number | — | — |
| className | 合并到根节点的额外类名。 | string | — | — |