TanStack Table v8
https://www.toutiao.com/article/7267716781531005501/
1.什么是 TanStack Table
TanStack Table v8 是 Headless UI,用于为 React、Solid、Vue、Svelte 和 TS/JS 构建强大的表格和数据网格库。
本质上,Headless UI 是一套基于 React Hooks 的组件开发设计理念,强调只负责组件的状态及交互逻辑,而不管标签和样式。其本质思想其实就是关注点分离:将组件的“状态及交互逻辑”和“UI 展示层”实现解耦。
本质上,TanStack Table 也是一个无头表库(headless table library),这意味着它不附带组件、标记(markup)或样式,开发者可以完全控制标记和样式(CSS、CSS-in-JS、UI 组件库等),这也赋予了它高度的可移植性,开发者甚至可以在 React Native 中使用它。
如果开发者想要一个能够完全控制标记和实现的轻量级表格,那么可以考虑使用 TanStack Table。如果想要一个功能更强大但在标记/样式/实现方面有更多限制的即用型基于组件的表格控件,可以考虑使用 AG Grid。
AG Grid 是一个功能齐全且高度可定制的 JavaScript 数据网格。它提供出色的性能,没有第三方依赖项,并已经和所有主流 JavaScript 框架集成。
TanStack Table 和 AG Grid 都是最好的表和数据网格库,两者互相补充,确保为整个 JS/TS 生态和每个用例提供最高质量的表/数据网格选项。
目前 TanStack Table 在 Github 上通过 MIT 协议开源,有超过 22.2k 的 star、3k 的 fork、代码贡献者 400+、妥妥的前端优质开源项目。
2.TanStack Table 特征
TanStack Table 具有以下明显特征:
支持 JS/TS
支持 React、Vue、Solid 的一流框架绑定
体积~14kb 或更小(使用 tree-shaking)
100% TypeScript(但不是必需的)
无头,100% 可定制,自带 UI
自动开箱即用,选择加入可控状态
支持过滤器(列和全局)
支持排序(多列、多方向)
支持分组和聚合
支持旋转(Pivoting)
支持行选择、行扩展
支持列可见性/排序/固定/调整大小
支持表分割
可动画化、可虚拟化
支持服务器端/外部数据模型支持
3.如何使用 TanStack Table
在真实项目中使用 TanStack Table 可以借助于不同的适配器,包括:React、Vue、Solid、Svelte 甚至 Vanilla TS/JS官方都已经默认提供。下来一起看看不同适配器的用法:
React Table
@tanstack/react-table 适配器是核心表逻辑的包装器。它的大部分工作与以“反应”方式管理状态、提供类型和单元格/页眉/页脚模板的渲染实现相关。
import { useReactTable } from "@tanstack/react-table";
function App() {
const table = useReactTable(options);
// ...render your table
}
Solid Table
@tanstack/solid-table 适配器是核心表逻辑的包装器。它的大部分工作与以“可靠”方式管理状态、提供单元格/页眉/页脚模板的类型和渲染实现相关。
import { createSolidTable } from "@tanstack/solid-table";
function App() {
const table = createSolidTable(options);
// ...render your table
}
Svelte Table
@tanstack/svelte-table 适配器是核心表逻辑的包装器。它的大部分工作与以“精简”方式管理状态、提供单元格/页眉/页脚模板的类型和渲染实现相关。
<script>
import {createSvelteTable} from '@tanstack/svelte-table' const table =
createSvelteTable(options)
</script>
Vue Table
@tanstack/vue-table 适配器是核心表逻辑的包装器。它的大部分工作与以“vue”方式管理状态、提供单元格/页眉/页脚模板的类型和渲染实现相关。
import { useVueTable } from "@tanstack/vue-table";
function App() {
const table = useVueTable(options);
// ...render your table
}
Vanilla TS/JS
@tanstack/table-core 库包含 TanStack Table 的核心逻辑。如果您使用非标准框架或无法访问框架,则可以直接通过 TypeScript 或 JavaScript 使用核心库。
import { createTable } from "@tanstack/table-core";
const table = createTable(options);
4.本文总结
本文主要和大家介绍 TanStack Table ,即 Headless UI,用于为 React、Solid、Vue、Svelte 和 TS/JS 构建强大的表格和数据网格库。相信通过本文的阅读,大家对 TanStack Table 会有一个初步的了解。
因为篇幅有限,文章并没有过多展开,如果有兴趣,可以在我的主页继续阅读,同时文末的参考资料提供了大量优秀文档以供学习。最后,欢迎大家点赞、评论、转发、收藏!
参考资料
https://github.com/TanStack/table
https://tanstack.com/table/v8/docs/adapters/vanilla
https://twitter.com/sebastienlorber/status/1531688779383201792
https://github.com/ag-grid/ag-grid