表格实例指南

TanStack Table 是一个无头 UI 库。当我们谈论表格或“表格实例”时，我们不是在谈论字面意义上的 <table> 元素。相反，我们指的是包含表格状态和 API 的核心表格对象。表格实例是通过调用适配器的 createTable 函数（例如 useReactTable、useVueTable、createSolidTable、createSvelteTable、createAngularTable、useQwikTable）创建的。

从 createTable 函数（来自框架适配器）返回的表格实例是您将与之交互以读取和更改表格状态的主要对象。它是 TanStack Table 中所有事情发生的地方。当您开始渲染 UI 时，您将使用来自此表格实例的 API。

创建表格实例

要创建表格实例，需要 3 个选项：columns、data 和 getCoreRowModel 实现。还有许多其他表格选项可以配置功能和行为，但这 3 个是必需的。

定义数据

将您的数据定义为具有稳定引用的对象数组。data 可以来自任何地方，例如 API 响应或在您的代码中静态定义，但它必须具有稳定的引用以防止无限重新渲染。如果使用 TypeScript，您为数据提供的类型将用作 TData 泛型。有关更多信息，请参阅数据指南。

定义列

列定义在上一节列定义指南中详细介绍。但是，我们在此处指出，当您定义列的类型时，您应该使用与数据相同的 TData 类型。

const columns: ColumnDef<User>[] = [] //Pass User type as the generic TData type
//or
const columnHelper = createColumnHelper<User>() //Pass User type as the generic TData type

const columns: ColumnDef<User>[] = [] //Pass User type as the generic TData type
//or
const columnHelper = createColumnHelper<User>() //Pass User type as the generic TData type

列定义是我们将在其中告诉 TanStack Table 如何使用 accessorKey 或 accessorFn 访问和/或转换行数据的地方。有关更多信息，请参阅列定义指南。

传入行模型

这在行模型指南中进行了更详细的解释，但现在，只需从 TanStack Table 导入 getCoreRowModel 函数并将其作为表格选项传入即可。根据您计划使用的功能，您可能需要在以后传入其他行模型。

import { getCoreRowModel } from '@tanstack/[framework]-table'

const table = createTable({ columns, data, getCoreRowModel: getCoreRowModel() })

import { getCoreRowModel } from '@tanstack/[framework]-table'

const table = createTable({ columns, data, getCoreRowModel: getCoreRowModel() })

初始化表格实例

在我们定义了 columns、data 和 getCoreRowModel 之后，我们现在可以创建我们的基本表格实例，以及我们想要传入的任何其他表格选项。

//vanilla js
const table = createTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//angular
this.table = createAngularTable({ columns: this.columns, data: this.data(), getCoreRowModel: getCoreRowModel() })

//lit
const table = this.tableController.table({ columns, data, getCoreRowModel: getCoreRowModel() })

//qwik
const table = useQwikTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//react
const table = useReactTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//solid
const table = createSolidTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() })

//svelte
const table = createSvelteTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//vue
const table = useVueTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//vanilla js
const table = createTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//angular
this.table = createAngularTable({ columns: this.columns, data: this.data(), getCoreRowModel: getCoreRowModel() })

//lit
const table = this.tableController.table({ columns, data, getCoreRowModel: getCoreRowModel() })

//qwik
const table = useQwikTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//react
const table = useReactTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//solid
const table = createSolidTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() })

//svelte
const table = createSvelteTable({ columns, data, getCoreRowModel: getCoreRowModel() })

//vue
const table = useVueTable({ columns, data, getCoreRowModel: getCoreRowModel() })

那么表格实例中有什么？让我们看看我们可以与表格实例进行哪些交互。

表格状态

表格实例包含所有表格状态，可以通过 table.getState() API 访问。每个表格功能都在表格状态中注册各种状态。例如，行选择功能注册 rowSelection 状态，分页功能注册 pagination 状态等等。

每个功能还将在表格实例上具有相应的状态设置器 API 和状态重置器 API。例如，行选择功能将具有 setRowSelection API 和 resetRowSelection。

table.getState().rowSelection //read the row selection state
table.setRowSelection((old) => ({...old})) //set the row selection state
table.resetRowSelection() //reset the row selection state

table.getState().rowSelection //read the row selection state
table.setRowSelection((old) => ({...old})) //set the row selection state
table.resetRowSelection() //reset the row selection state

这在表格状态指南中进行了更详细的介绍

表格 API

每个功能都创建了许多表格 API，以帮助您以不同的方式读取或更改表格状态。

核心表格实例和所有其他功能 API 的 API 参考文档可以在 API 文档中找到。

例如，您可以在此处找到核心表格实例 API 文档：表格 API

表格行模型

有一组特殊的表格实例 API 用于从表格实例中读取行，称为行模型。TanStack Table 具有高级功能，其中生成的行可能与您最初传入的 data 数组非常不同。要了解有关您可以作为表格选项传入的不同行模型的更多信息，请参阅行模型指南。

API