行模型指南

如果你查看 TanStack Table 最基本的示例，你会看到类似这样的代码片段：

import { getCoreRowModel, useReactTable } from '@tanstack/react-table'

function Component() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), // 行模型
  })
}

这个 getCoreRowModel 函数是什么？为什么你必须从 TanStack Table 导入它，然后又把它传回给它自己？

答案是 TanStack Table 是一个 模块化库。并非所有功能的代码都默认包含在 createTable 函数/钩子中。你只需要导入并包含生成行所需的代码，这取决于你想要使用的功能。

什么是行模型？

行模型 (Row models) 在 TanStack Table 内部运行，以有用的方式转换你的原始数据，这些转换是数据网格功能所必需的，例如过滤 (filtering)、排序 (sorting)、分组 (grouping)、展开 (expanding) 和分页 (pagination)。生成的并在屏幕上渲染的行不一定会与你传递给表格的原始数据一对一映射。它们可能经过了排序、过滤、分页等处理。

导入行模型

你应该只导入你需要的行模型。以下是所有可用的行模型：

// 只导入你需要的行模型
import {
  getCoreRowModel,
  getExpandedRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
} from '@tanstack/react-table' // 或你使用的特定适配器

// ...

const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFilteredRowModel: getFilteredRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

getRowModel：这是你应该用于渲染表格行标记的主要行模型。它将使用所有其他行模型来生成你将用于渲染表格行的最终行模型。
getCoreRowModel：返回一个基本行模型，它只是传递给表格的原始数据的一对一映射。
getFilteredRowModel：返回一个考虑了列过滤和全局过滤的行模型。
getPreFilteredRowModel：返回应用列过滤和全局过滤之前的行模型。
getGroupedRowModel：返回一个对数据应用分组和聚合并创建子行的行模型。
getPreGroupedRowModel：返回应用分组和聚合之前的行模型。
getSortedRowModel：返回一个已应用排序的行模型。
getPreSortedRowModel：返回应用排序之前的行模型（行按原始顺序排列）。
getExpandedRowModel：返回一个考虑了展开/隐藏子行的行模型。
getPreExpandedRowModel：返回一个只包含根级别行且不包含任何展开子行的行模型。仍然包含排序。
getPaginationRowModel：返回一个只包含根据分页状态应显示在当前页面上的行的行模型。
getPrePaginationRowModel：返回一个未应用分页的行模型（包含所有行）。
getSelectedRowModel：返回所有选定行的行模型（但仅基于传递给表格的数据）。在 getCoreRowModel 之后运行。
getPreSelectedRowModel：返回应用行选择之前的行模型（只返回 getCoreRowModel）。
getGroupedSelectedRowModel：返回分组后选定行的行模型。在 getSortedRowModel 之后运行，getSortedRowModel 在 getGroupedRowModel 之后运行，getGroupedRowModel 在 getFilteredRowModel 之后运行。
getFilteredSelectedRowModel：返回列过滤和全局过滤后选定行的行模型。在 getFilteredRowModel 之后运行。

行模型执行顺序

了解 TanStack Table 如何在内部处理行可以帮助你更好地理解其底层原理，并帮助你调试可能遇到的任何问题。

在内部，如果启用了相应的功能，每个行模型会按以下顺序应用于数据：

getCoreRowModel -> getFilteredRowModel -> getGroupedRowModel -> getSortedRowModel -> getExpandedRowModel -> getPaginationRowModel -> getRowModel

如果在任何情况下，相应的功能被禁用或通过 "manual*" 表格选项关闭，那么在该步骤中将使用 getPre*RowModel。

如上所示，数据首先被过滤，然后分组，然后排序，然后展开，最后作为最后一步进行分页。

行模型数据结构

每个行模型将以 3 种不同的有用格式向你提供行：

rows：一个行数组。
flatRows：一个行数组，但所有子行都扁平化到顶层。
rowsById：一个行对象，其中每行都以其 id 为键。这对于通过 id 快速查找行以获得更好的性能非常有用。

console.log(table.getRowModel().rows) // 行数组
console.log(table.getRowModel().flatRows) // 行数组，但所有子行都扁平化到顶层
console.log(table.getRowModel().rowsById['row-id']) // 行对象，其中每行都以其 `id` 为键

通过了解 TanStack Table 的模块化设计和行模型的运作方式，你就能更灵活地构建高性能的表格。

表格实例指南

行指南

行模型指南

什么是行模型？

导入行模型

自定义/分叉行模型

使用行模型

表格实例上可用的行模型

行模型执行顺序

行模型数据结构