SuperAPI AI 工具集

tanstack-table

前端与建站

查看项目

更新于 10-16 07:24

技能介绍

用途:在 React 项目中用 TanStack Table 构建数据表格,并结合 React Aria Components 实现排序、筛选、分页、行选择等功能。

安装:pnpm add @tanstack/react-table

主要能力:通过 useReactTable 与 ColumnDef 定义列;按需引入行模型 getCoreRowModel(必需)、getSortedRowModel、getFilteredRowModel、getPaginationRowModel;支持 accessorKey、accessorFn 计算列、自定义 cell 与操作列;用 flexRender 渲染表头与单元格。

状态管理:用 useState 管理 sorting、columnFilters、rowSelection,并通过 state 与 onSortingChange、onColumnFiltersChange、onRowSelectionChange 受控。常用操作包括 column.toggleSorting()、column.setFilterValue(value)、table.nextPage()、row.toggleSelected()、column.toggleVisibility(),原始数据用 row.original 获取。

项目结构示例:columns.tsx 放列定义,data-table.tsx 放表格组件,index.tsx 负责取数。

限制与注意:必须提供 getCoreRowModel;只引入用到的行模型;静态与动态内容都需 flexRender;行 key 用 row.id;大数据客户端分页应改用 manualPagination: true 做服务端分页;排序筛选需通过 state 受控;避免过度抽象通用表格封装。资料另提及服务端分页、无限滚动、列定义、可复用组件等主题参考,以及用 Explore 代理发现现有实现、用 code-reviewer 代理做代码审查的委派方式。