概述

TanStack Table 的核心是与框架无关的，这意味着无论你使用什么框架，它的 API 都是相同的。提供了适配器，以便根据你的框架更轻松地使用表格核心。请参阅适配器菜单以获取可用的适配器。

Typescript

虽然 TanStack Table 是用 TypeScript 编写的，但在你的应用程序中使用 TypeScript 是可选的（但建议使用，因为它为你和你的代码库带来了卓越的好处）

如果你使用 TypeScript，你将获得一流的类型安全性和编辑器自动完成功能，适用于所有表格 API 和状态。

无头

正如在介绍部分广泛提到的那样，TanStack Table 是无头的。这意味着它不渲染任何 DOM 元素，而是依赖于你，UI/UX 开发者来提供表格的标记和样式。这是构建可在任何 UI 框架（包括 React、Vue、Solid、Svelte、Qwik、Angular，甚至像 React Native 这样的 JS 到原生平台）中使用的表格的好方法！

通用

由于 TanStack Table 是无头的并且在原生 JavaScript 核心上运行，因此它在几个方面是通用的

1. TanStack Table 是与框架无关的，这意味着你可以将它与你想要的任何 JavaScript 框架（或库）一起使用。TanStack Table 为 React、Vue、Solid、Svelte 和 Qwik 提供了开箱即用的即用型适配器，但如果需要，你可以创建自己的适配器。
2. TanStack Table 是与 CSS / 组件库无关的，这意味着你可以将 TanStack Table 与任何你想要的 CSS 策略或组件库一起使用。TanStack Table 本身不渲染任何表格标记或样式。 你可以自带！想要使用 Tailwind 或 ShadCN？没问题！想要使用 Material UI 或 Bootstrap？没问题！有你自己的自定义设计系统？TanStack Table 就是为你而生的！

核心对象和类型

表格核心使用以下抽象概念，通常由适配器公开

• 数据 - 你提供给表格的核心数据数组
• 列定义：用于配置列及其数据模型、显示模板等的对象
• 表格实例：包含状态和 API 的核心表格对象
• 行模型：data 数组如何根据你正在使用的功能转换为有用的行
• 行：每一行都镜像其各自的行数据并提供特定于行的 API
• 单元格：每个单元格都镜像其各自的行-列交叉点并提供特定于单元格的 API
• 表头分组：表头分组是嵌套表头级别的计算切片，每个切片包含一组表头
• 表头：每个表头要么直接关联，要么从其列定义派生而来，并提供特定于表头的 API
• 列：每一列都镜像其各自的列定义，并提供特定于列的 API

功能

TanStack Table 将帮助你构建几乎任何你能想象到的表格类型。它具有以下功能的内置状态和 API

• 列分面 - 列出列值的唯一列表或列的最小值/最大值
• 列筛选 - 根据列的搜索值筛选行
• 列分组 - 将列分组在一起，运行聚合等
• 列排序 - 动态更改列的顺序
• 列固定 - 将列（冻结）固定到表格的左侧或右侧
• 列调整大小 - 动态更改列的大小（列调整大小手柄）
• 列可见性 - 隐藏/显示列
• 全局分面 - 列出整个表格的列值的唯一列表或最小值/最大值
• 全局筛选 - 根据整个表格的搜索值筛选行
• 行展开 - 展开/折叠行（子行）
• 行分页 - 分页行
• 行固定 - 将行（冻结）固定到表格的顶部或底部
• 行选择 - 选择/取消选择行（复选框）
• 行排序 - 按列值对行进行排序

这些只是你可以使用 TanStack Table 构建的众多功能中的一部分。还有许多其他功能可以通过 TanStack Table 实现，你可以将它们与内置功能一起添加。

虚拟化 是一个 TanStack Table 中未内置的功能示例，但可以通过使用另一个库（例如 TanStack Virtual）并将其与你的其他表格渲染逻辑一起添加来实现。

TanStack Table 还支持 自定义功能（插件），你可以使用它们来修改表格实例，以便以更集成的方式向表格添加你自己的自定义逻辑。

当然，你也可以编写自己的状态和钩子，为你的表格添加任何其他你想要的功能。来自 TanStack Table 核心的功能只是一个坚实的基础，可以构建在其之上，并且非常注重性能和开发者体验 (DX)。