大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

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

https://tanstack.com/table/v8/docs/adapters/vanilla

https://twitter.com/sebastienlorber/status/1531688779383201792

https://ag-grid.com/

https://github.com/ag-grid/ag-grid