47

0

TanStack Table

用于为 TS/JS 构建强大的表格和数据网格的Headless UI - React-Table、Vue-Table、Solid-Table、Svelte-Table

TanStack 表头

TanStack Table v8

用于为React、Solid、Vue、Svelte 和 TS/JS构建强大的表格和数据网格的Headless UI 。

#TanStack 语义释放 加入 Github 上的讨论 > 寻找第 7 版 react-table?点击这里!

喜欢这些吗?

尝试其他一些TanStack ,例如React QueryReact FormReact Charts

访问tanstack.com/table获取文档、指南、API 等!

您也可以通过我们的适配器名称了解 TanStack 表

概括

TanStack Table 是一个Headless表格库,这意味着它不附带组件、标记或样式。这意味着您可以完全控制标记和样式(CSS、CSS-in-JS、UI 组件库等),这也是它具有可移植性的原因。你甚至可以在 React Native 中使用它!

如果您想要一个 可以完全控制标记和实现的轻量级表格 ,那么您应该考虑使用 TanStack Table,一个无头表格库

如果您想要一个 现成的基于组件的表,它具有更多功能但对标记/样式/实现有更多限制 ,您应该考虑使用AG Grid,这是我们的 OSS 合作伙伴AG Grid提供的基于组件的表库。

TanStack Table 和 AG Grid 是  最好的表/数据网格库 。我们不是竞争,而是共同努力确保最高质量的表/数据网格选项可用于整个 JS/TS 生态系统和每个用例。

快速功能

  • 不可知的核心 (JS/TS)
  • 用于 React、Vue、Solid 的一级框架绑定
  • ~14kb 或更少(使用 tree-shaking)
  • 100% 打字稿(但不是必需的)
  • Headless(100% 可定制,自带 UI)
  • 自动开箱,选择加入可控状态
  • 过滤器(列和全局)
  • 排序(多列、多方向)
  • 分组和聚合
  • 旋转(即将推出!)
  • 行选择
  • 行扩展
  • 列可见性/排序/固定/调整大小
  • 表拆分
  • 动画
  • 可虚拟化
  • 服务器端/外部数据模型支持

从 React Table v7 迁移

显着变化

  • 完全重写 TypeScript
  • 移除插件系统以支持更多的控制反转
  • 更大和改进的 API
  • 更好的受控状态管理
  • 更好地支持服务器端操作
  • 完整(但可选)数据管道控制
  • 不可知核心
  • 框架适配器

迁移

有相当多的重大变化(它们是值得的,相信我们!):

  • 事实证明,TypeScript 使您的代码 更好 /更安全,但通常也需要对架构进行重大更改。
  • 插件系统已被删除,因此必须重写插件以包装/组合新的功能 API。如果您需要帮助,请联系我们!
  • 列配置选项已更改,但仅略有更改。
  • 表选项基本相同,围绕可选状态管理/控制和数据管道控制有一些较大的变化
  • 虽然在精神上与 v7 相似,tableInstance但已重新配置为更快。

待办事项(按优先顺序)

  • [X] 重写核心
    • [X] 核
    • [X] 列
    • [X] 标头
    • [X] 能见度
    • [X] 固定
    • [X] 过滤器
    • [X] 排序
    • [X] 分组
    • [X] 扩大
    • [X] 列大小
    • [X] 分页
    • [X] 行选择
  • [ ] 迁移示例
    • [X] 列可见性
    • [X] 列排序
    • [X] 柱销
    • [X] 基本的
    • [X] 过滤器
    • [X] 排序
    • [X] 分页
    • [X] 分页控制
    • [X] 列大小
    • [X] 行选择
    • [X] 扩大
    • [X] 分组和聚合
    • [X] 可编辑数据
    • [ ] 厨房水槽
    • [X] 行-dnd
    • [ ] 流式行
    • [X] 子组件
    • [X] 虚拟行
    • [ ] 绝对布局
    • [ ] 块布局
    • [ ] 动画成帧运动
    • [X] 引导程序
    • [ ] 引导 UI 组件
    • [ ] 数据驱动的类和样式
    • [X] 全宽可调整大小的表格
    • [X] 全宽表
    • [ ] 材料-ui-组件
    • [ ] 材料 UI 增强表

安装

npm install @tanstack/react-table
npm install @tanstack/solid-table
npm install @tanstack/vue-table
npm install @tanstack/svelte-table

如何帮助?

  • 试用已迁移的示例
  • 在您自己的项目中尝试一下。
  • 反省类型!即使没有完成文档,该库也会提供 100% 的打字稿来帮助您探索其功能。
  • 阅读贡献指南
  • 写一些文档!从API 文档开始,并尝试添加有关一项或多项功能的一些信息。这些类型在显示支持的内容和库的功能方面做得不错。
  • 尝试将示例迁移到 v8!示例的待办事项列表在上面!
  • 使用插件? 尝试将您的插件(v8 不再具有插件系统)重写为在内部使用 TanStack Table 的功能包装器。新的 API 功能更强大且更易于编写。如果您发现无法弄清楚的内容,请告诉我们,我们会将其添加到 API 中。