简介

TanStack Table 是一个用于为 TS/JS、React、Vue、Solid、Qwik 和 Svelte 构建功能强大的表格和数据网格的无头 UI 库。

无头 UI 是指为 UI 元素和交互提供逻辑、状态、处理和 API，但不提供标记、样式或预构建实现的库和实用程序。还在挠头吗？😉 无头 UI 有几个主要目标：

构建复杂 UI 最困难的部分通常围绕状态、事件、副作用、数据计算/管理。通过从标记、样式和实现细节中移除这些关注点，我们的逻辑和组件可以更加模块化和可重用。

构建 UI 是一种非常品牌化和定制化的体验，即使这意味着选择一个设计系统或遵守设计规范。为了支持这种定制体验，基于组件的 UI 库需要支持围绕标记和样式定制的庞大（且看似无穷无尽）的 API 表面。无头 UI 库将您的逻辑与 UI 分离。

当您使用无头 UI 库时，数据处理、状态管理和业务逻辑等复杂任务都会为您处理，让您专注于在不同实现和用例中有所不同的更高基数的决策。

想更深入地了解吗？阅读更多关于无头 UI 的信息。

在表格/数据网格库的生态系统中，主要有两类：

• 基于组件的表格库
• 无头表格库

每种方法都有细微的权衡。了解这些细微差别将帮助您为您的应用程序和团队做出正确的决定。

基于组件的表格库通常会为您提供功能丰富的开箱即用解决方案和带有样式/主题的即用型组件/标记。AG Grid 是此类表格库的一个很好的例子。

优点：

• 提供即用型标记/样式
• 只需少量设置
• 一站式体验

缺点：

• 对标记的控制较少
• 自定义样式通常基于主题
• 包体积较大
• 与框架适配器和平台高度耦合

如果您想要一个即用型表格，并且设计/包体积不是硬性要求，那么您应该考虑使用基于组件的表格库。

市面上有很多基于组件的表格库，但我们相信 AG Grid 是黄金标准，并且是迄今为止我们最喜欢的网格兄弟（别告诉其他人🤫）。

无头表格库通常会为您提供函数、状态、实用程序和事件侦听器，以构建您自己的表格标记或附加到现有的表格标记。

优点：

• 完全控制标记和样式
• 支持所有样式模式（CSS、CSS-in-JS、UI 库等）
• 包体积较小
• 可移植。可在任何运行 JS 的地方运行！

缺点：

• 需要更多设置
• 不提供标记、样式或主题

如果您想要一个更轻量级的表格或对设计有完全的控制权，那么您应该考虑使用无头表格库。

市面上很少有无头表格库，显然，TanStack Table 是我们的最爱！