行模型指南

如果您查看 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 的底层运行，以转换您的原始数据，使其成为数据网格功能（如过滤、排序、分组、展开和分页）所需的有用形式。生成并在屏幕上渲染的行不一定与您传递给表格的原始数据一一对应。它们可能会被排序、过滤、分页等。

导入行模型

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

//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(),
})

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) // 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`

行模型指南