SuperAPI AI 工具集

tanstack-table

前端与建站

查看项目

更新于 10-16 07:14

技能介绍

用途:TanStack Table 是一个无头表格库,只处理表格逻辑(排序、过滤、分页、分组、列可见性、列缩放、列重排与固定、行选择等),不提供任何预定义样式或标记,表格外观完全由开发者控制。适用于展示带排序过滤分页的表格数据、需要完全掌控样式的场景、服务端分页与过滤、列缩放重排固定的复杂表格、行选择与批量操作,以及配合虚拟化渲染的大数据集。支持 React、Vue、Svelte、Solid 和原生 JS。

主要能力:核心行模型 getCoreRowModel 为必需项,排序、过滤、分页等能力需分别引入对应模型(getSortedRowModel、getFilteredRowModel、getPaginationRowModel)。通过 ColumnDef 定义列以获得类型安全,accessorKey 映射数据字段,flexRender 渲染表头与单元格。行选择使用 getToggleSelectedHandler 配合复选框。列可见性通过 table.getColumn("email")?.toggleVisibility(false) 控制。大数据量可结合 @tanstack/react-virtual 实现虚拟化。

使用方式:以 React 为例,安装命令为 npm install @tanstack/react-table。用 useReactTable 创建表格实例,传入 data 与 columns,并在 state 中管理 sorting、globalFilter、pagination、rowSelection 等状态。服务端分页时设置 manualPagination 与 manualSorting 为 true,由表格跟踪状态、由你自行按分页与排序变化请求数据,并配合 pageCount。

限制:库本身不包含任何样式,需要自行使用 Tailwind、CSS 或其他样式方案;必须始终包含 getCoreRowModel,按需添加其他模型;资料未提供内置 UI 组件、收费方式、价格、具体性能数据或对各框架版本的兼容细节,这些暂未提供。