Lzh on GitHub

简介

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

TanStack Table

什么是 “无头” UI?

“无头 UI” 是一个术语,指提供 UI 元素和交互的 逻辑、状态、处理和 API 的库和工具,但 不提供标记、样式或预构建的实现。是不是有点摸不着头脑?无头 UI 有几个主要目标:

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

构建 UI 是一种非常品牌化和自定义的体验,即使这意味着选择一个设计系统或遵循一个设计规范。为了支持这种自定义体验,基于组件的 UI 库需要支持一个庞大(且看似无止境)的围绕标记和样式自定义的 API 接口。无头 UI 库将你的逻辑与你的 UI 解耦。

当你使用无头 UI 库时,数据处理、状态管理和业务逻辑 等复杂任务都由它为你处理,让你只用担心在不同实现和用例中有所区别的高基数决策。

想深入了解? 阅读更多关于无头 UI 的信息

基于组件的库 vs 无头库

在表格/数据网格库的生态系统中,主要有两大类:

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

我应该使用哪种表格库?

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

基于组件的表格库

基于组件的表格库通常会为你提供一个功能丰富的即插即用解决方案,以及包含样式/主题的即用型组件/标记。AG Grid 就是这种表格库的一个很好的例子。

优点:

  • 附带即用型标记/样式
  • 所需设置少
  • 一站式体验

缺点:

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

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

市面上有很多基于组件的表格库,但我们相信 AG Grid 是黄金标准,而且是目前我们最喜欢的同类产品(别告诉其他的)。

无头表格库

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

优点:

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

缺点:

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

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

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