简介

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

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

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

UI 构建是一种高度品牌化和定制化的体验，即使这意味着选择设计系统或遵循设计规范。为了支持这种定制化体验，基于组件的 UI 库需要围绕标记和样式定制提供庞大（且看似无止境）的 API 表面。无头 UI 库将逻辑与 UI 解耦。

当你使用无头 UI 库时，数据处理、状态管理和业务逻辑等复杂任务会被自动处理，让你可以专注于不同实现和用例中更高维度的决策。

想深入了解？阅读更多关于无头 UI 的内容。

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

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

每种方法都有微妙的权衡。理解这些细微差别将帮助你为应用和团队做出正确决策。

基于组件的表格库通常会提供一个功能丰富的即插即用解决方案，以及带有样式/主题的现成组件和标记。AG Grid 是这类表格库的绝佳示例。

优点：

• 提供现成的标记/样式
• 设置简单
• 开箱即用的体验

缺点：

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

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

市面上有许多基于组件的表格库，但我们认为 AG Grid 是黄金标准，也是我们最喜欢的网格兄弟（别告诉其他人 🤫）。

无头表格库通常会提供函数、状态、工具和事件监听器，用于构建自己的表格标记或附加到现有表格标记上。

优点：

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

缺点：

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

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

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