简介

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

什么是 “headless” UI？

Headless UI 是一个术语，指代那些为 UI 元素和交互提供逻辑、状态、处理和 API，但不提供标记、样式或预构建实现的库和工具。 感到困惑了吗？ 😉 Headless UI 有几个主要目标

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

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

当您使用 headless UI 库时，数据处理、状态管理和业务逻辑的复杂任务将为您处理，让您专注于在不同实现和用例中存在更高基数差异的决策。

想要深入了解？ 阅读更多关于 Headless UI 的信息。

基于组件的库 vs Headless 库

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

• 基于组件的表格库
• Headless 表格库

我应该使用哪种表格库？

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

基于组件的表格库

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

优点

• 附带现成的标记/样式
• 几乎不需要设置
• 交钥匙体验

缺点

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

如果您想要一个现成的表格，并且设计/捆绑包大小不是硬性要求，那么您应该考虑使用基于组件的表格库。

市面上有许多基于组件的表格库，但我们认为 AG Grid 是黄金标准，并且是我们目前最喜欢的同类网格库（不要告诉其他人 🤫）。

Headless 表格库

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

优点

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

缺点

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

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

市面上很少有 headless 表格库，显然，TanStack Table 是我们最喜欢的！