TanStack Table 理念与无头设计

无头 UI 库提供您所需的全部逻辑、状态管理和行为，但有意不提供任何标记或样式。渲染输出中的每个像素都由您掌控。

这意味着您不必与 CSS 覆盖规则斗争，也不必费力适应库所规定的 DOM 结构。

使用传统表格组件时，要改变外观通常需要覆盖几十种样式，有时还要设法绕过固定的 HTML 结构。无头库会将数据和状态交给您，然后不再干预。

这样您便拥有完全的设计自由：可以顺畅地使用 Tailwind、CSS Modules、Emotion 或普通 CSS。

TanStack Table v8 可用于 React、Vue、Solid、Svelte，甚至原生 JavaScript。核心逻辑与框架无关，每个适配器都会使用熟悉的钩子将其封装起来。

这意味着您掌握的技能可以在不同框架之间迁移，同时 API 表面保持一致。

在 React 中调用 useReactTable({ data, columns, getCoreRowModel })，它会返回一个表格对象。这个对象是一切功能的核心。

它保存所有当前状态（排序、分页和选择），并公开驱动 JSX 渲染的辅助方法。

TanStack Table 不会替您渲染任何 HTML 标签。您需要自行编写 table、thead、tbody、tr、th 和 td 元素，然后向表格对象询问应在其中放置哪些内容。

这与 AG Grid 或 Ant Design Table 不同，后者会渲染自己的 DOM，并只提供有限的自定义插槽。

AG Grid、Material Table 和 Ant Design Table 都自带完整的渲染流程、内置样式以及丰富的功能界面。它们更适合快速构建原型，但很难进行深度定制。

TanStack Table 需要更多初始设置，但能让您构建出完全可访问、充分符合品牌风格的表格，而无需与覆盖规则周旋。

由于 TanStack Table 不提供样式，且您只需导入实际使用的行模型（排序、筛选和分页），所以整体体积能够保持较小。

您只需为启用的功能付出代价，因此它非常适合对性能敏感的应用程序。

由于 TanStack Table 不生成标记，将它与 Tailwind CSS 集成非常简单：只需为您自行编写的 tr 和 td 元素添加类名即可。CSS Modules 或任何其他样式方案也同样适用。

因为没有需要覆盖的内置样式，所以不存在特异性冲突。

无头模式确实需要您预先编写更多代码。您必须自行编写渲染循环，并手动连接状态处理器。

不过，一旦构建好基础表格组件，就可以在整个应用程序中复用它，同时保持样式一致。

useReactTable 钩子接受一个配置对象，其中至少包括 data（您的对象数组）、columns（ColumnDef 数组）和 getCoreRowModel。

返回的表格实例会通过 getHeaderGroups() 提供表头，通过 getRowModel().rows 提供表格行，您可以在 JSX 中对它们进行映射。

首先安装 @tanstack/react-table，定义 columns 数组，调用 useReactTable，然后使用辅助方法渲染您自己的 table 元素。该库负责处理所有状态和派生数据，而标记则由您负责。

这种清晰的分离让表格组件易于测试，也能让您的设计系统保持一致。

TanStack Table 这样的无头 UI 库，最主要的优势是什么？

TanStack Table 是一个无头且不依赖框架的表格库，它提供状态和逻辑，同时将所有渲染工作交给您。您调用 useReactTable 获取表格实例，然后遍历其辅助方法来构建自己的标记。

这意味着不会发生样式冲突，可以自由使用任何 CSS 框架，并且包体积只包含您实际使用的功能。