TanStack Table 是一个用于构建表格和数据网格(datagrid)的无头(headless)UI 库。其核心与框架无关,主要提供 React 适配器(@tanstack/react-table)。所谓无头,意味着它不提供现成的样式或 DOM 结构,而是负责表格的状态、逻辑与数据管线,渲染方式由使用者自行决定。
用途 该库面向需要构建表格或数据网格的前端场景,尤其是对交互、性能与外观有较高自定义要求的项目。它把列定义、数据行模型、排序、过滤、分页、分组、展开、行选择、行固定、虚拟化等能力拆分为可组合的模块,开发者按需引入。
主要能力
- 列(Columns):定义访问器(accessors)、表头(headers)、列分组、尺寸、排序、固定(pinning)、可见性。
- 数据与行模型(Data & Row Models):处理数据形态、行模型管线以及 Row/Cell 类型。
- 排序(Sorting):排序状态、多列排序、自定义排序函数、手动排序。
- 过滤(Filtering):列过滤、全局过滤、分面(faceted)过滤(列级与全局)。
- 模糊过滤(Fuzzy Filtering):集成 @tanstack/match-sorter-utils。
- 分页(Pagination):客户端分页与服务端分页。
- 行选择(Row Selection):复选框模式、单选/多选、子行选择。
- 分组(Grouping):分组状态、聚合、渲染分组单元格。
- 展开(Expanding):子行、详情面板、展开/折叠 API。
- 行固定(Row Pinning):将行固定在顶部或底部,以及保留固定行的选项。
- 虚拟化(Virtualization):集成 @tanstack/react-virtual,支持行/列虚拟化。
- 状态(State):受控与非受控模式、onChange 处理器、自动重置。
- 渲染(Rendering):flexRender、表格结构、类型、框架适配器。
- 进阶(Advanced):可编辑单元格、拖拽排序(DnD)、基于 div 的表格。
- 自定义特性(Custom Features):通过 _features 与 TypeScript 声明合并扩展表格。
使用方式 该技能以工作流方式组织:先判断需要哪个特性,再加载对应的参考文档(references 目录下的 columns.md、data.md、sorting.md、filtering.md、fuzzy-filtering.md、pagination.md、selection.md、grouping.md、expanding.md、row-pinning.md、virtualization.md、state.md、rendering.md、advanced.md、custom-features.md)。
核心原则包括:
- getCoreRowModel() 是唯一必需的行模型,其余均为可选启用。
- 使用 useMemo 缓存列定义,或在组件外部定义。
- 保持数据引用稳定,避免内联 data={fetch()},改用 state 或 memo。
- 行模型可组合,管线顺序为:Core → Filtered → Grouped → Sorted → Expanded → Paginated。
- 只导入需要的行模型,每个都可 tree-shake。
- flexRender 用于根据列定义渲染单元格与表头。
- 服务端操作时设置 manualSorting/manualFiltering/manualPagination 并自行管理状态。
- 使用 createColumnHelper<T>() 获得最大类型安全。
适用场景 适合需要自定义表格外观与交互的前端项目,例如数据密集型后台、需要排序/过滤/分页/分组/展开/行选择/虚拟化等复杂表格行为的界面,以及需要服务端分页或排序的场景。
限制 资料未提供该库的具体收费、价格、平台支持范围、性能指标或效果承诺。其核心为无头设计,不提供内置样式与 DOM 结构,渲染与样式需自行实现。