行模型指南

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

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

function Component() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), //row model
  })
}

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

function Component() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), //row model
  })
}

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

嗯，答案是 TanStack Table 是一个模块化库。并非所有功能的代码都默认包含在 createTable 函数/钩子中。您只需要导入并包含您需要用来正确生成行的代码，以匹配您想要使用的功能。

什么是行模型？

行模型在 TanStack Table 的底层运行，以各种有用的方式转换您的原始数据，这些方式对于数据网格功能（如过滤、排序、分组、展开和分页）是必需的。生成并在屏幕上渲染的行不一定与您传递给表格的原始数据 1:1 对应。它们可能经过排序、过滤、分页等操作。

导入行模型

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

//only import the row models you need
import {
  getCoreRowModel,
  getExpandedRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFilteredRowModel: getFilteredRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

//only import the row models you need
import {
  getCoreRowModel,
  getExpandedRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
}
//...
const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFilteredRowModel: getFilteredRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

自定义/分叉行模型

您不必使用 TanStack Table 提供的确切行模型。如果您需要对某些行模型进行高级自定义，请随意复制您想自定义的行模型的源代码，并根据您的需求进行修改。

使用行模型

一旦您的表格实例创建完成，您就可以直接从表格实例中访问您可能需要的所有行模型。除了您可能导入的那些之外，还有更多派生的行模型可用。

对于正常的渲染用例，您可能只需要使用 table.getRowModel() 方法，因为此行模型将使用所有/任何其他行模型，具体取决于您启用了哪些功能。所有其他行模型都可以让您“深入了解”表格中正在发生的底层数据转换。

表格实例中可用的行模型

getRowModel - 这是您应该用于渲染表格行标记的主要行模型。它将使用所有其他行模型来生成您将用于渲染表格行的最终行模型。
getCoreRowModel - 返回一个基本的行模型，它只是传递给表格的原始数据的 1:1 映射。
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) // array of rows
console.log(table.getRowModel().flatRows) // array of rows, but all sub-rows are flattened into the top level
console.log(table.getRowModel().rowsById['row-id']) // object of rows, where each row is keyed by its `id`

console.log(table.getRowModel().rows) // array of rows
console.log(table.getRowModel().flatRows) // array of rows, but all sub-rows are flattened into the top level
console.log(table.getRowModel().rowsById['row-id']) // object of rows, where each row is keyed by its `id`

行模型指南