DataGrid 数据网格

useDataGrid 管理全部状态（排序、筛选、分组、列宽、列序、固定、可见、分页、选择），persistKey 把用户的列设置存到 localStorage。

• 前端模式：传 data，筛选排序分页都在浏览器里做。
• 服务端模式：配合 useGridQuery 把状态转成查询参数（GridQuery），传 rowCount 和 manual，数据交给你的请求库。

DataGridCard 是带工具栏的成品；也可以用 DataGrid 加 DataGridSearch、DataGridGroupBy、DataGridExport、DataGridChips、DataGridPagination 自己拼。

安装复制链接

pnpm dlx shadcn@latest add https://docs.linasan.cn/r/data-grid.json

用法复制链接

import { DataGridCard } from '@/components/data-grid/grid-toolbar';
import { useDataGrid } from '@/components/data-grid/use-data-grid';

const grid = useDataGrid({ data, columns, pageSize: 20 });
<DataGridCard grid={grid} title="订单" search="搜索订单号" exportable="订单.csv" />

示例复制链接

树形数据复制链接

getSubRows 给出子行，TreeCell 画缩进和展开按钮；勾选父级联动子级。

虚拟滚动复制链接

virtual + maxHeight：5 万行也只渲染可见的几十行。

属性复制链接

useDataGrid复制链接

DataGrid复制链接