SuperAPI AI 工具集

tanstack-table

前端与建站

查看项目

更新于 10-16 00:06

技能介绍

TanStack Table 是一个无头(headless)表格库,用于在 React 中构建类型安全的数据表格。资料显示其版本为 @tanstack/react-table@latest,要求 React 16.8+,推荐使用 TypeScript。安装命令为 npm install @tanstack/react-table。

主要能力:通过 useReactTable、getCoreRowModel、flexRender、createColumnHelper 等 API 创建表格;采用模块化行模型,按需导入 getCoreRowModel(必需)、getSortedRowModel、getFilteredRowModel、getPaginationRowModel、getExpandedRowModel、getGroupedRowModel 及分面相关模型。处理管线顺序为 Core -> Filtered -> Grouped -> Sorted -> Expanded -> Paginated -> Rendered。支持客户端与服务端排序、列过滤、全局过滤、分页、行选择、列可见性、列宽调整与展开子行。

使用要点:数据引用需稳定(useState、useMemo 或组件外定义),避免内联定义数据或列导致无限重渲染;用 createColumnHelper<TData>() 提升类型安全;用 flexRender 渲染表头与单元格;渲染用 getVisibleCells() 而非 getAllCells();用 getRowModel() 获取最终行模型;通过 state 与 onChange 控制排序、过滤、分页、选择等状态;同一功能不要混用 initialState 与 state;使用 manual 选项时不要导入对应客户端行模型;设置 getRowId 以保证重新获取数据后选择状态稳定。

适用场景:需要在 React 中实现可排序、可过滤、可分页、可选择的数据表格,并希望自行控制渲染与样式的项目。限制:资料未提供具体收费、平台支持范围或性能基准等信息。