单元格指南

这份快速指南将讨论如何在 TanStack Table 中检索和与单元格对象 (cell objects) 进行交互。

从何处获取单元格

单元格来源于行 (Rows)。这已经足够说明问题了，对吧？

有多个行实例 API 可用于根据你使用的功能从行中检索适当的单元格。最常见的是，你会使用 row.getAllCells 或 row.getVisibleCells API（如果你正在使用列可见性功能），但还有其他一些类似的 API 你可以使用。

单元格对象

每个单元格对象都可以与你 UI 中的 <td> 或类似的单元格元素关联。单元格对象上有一些属性和方法，你可以使用它们来与表格状态交互，并根据表格的状态从表格中提取单元格值。

单元格父对象 (Cell Parent Objects)

每个单元格都存储对其父行 (row) 和列 (column) 对象的引用。

访问单元格数据值的推荐方法是使用 cell.getValue 或 cell.renderValue API。使用这些 API 中的任何一个都会缓存访问器函数的结果并保持高效渲染。两者之间的唯一区别是，如果值为 undefined，cell.renderValue 将返回该值或 renderFallbackValue，而 cell.getValue 将返回该值或 undefined。

注意： cell.getValue 和 cell.renderValue API 分别是 row.getValue 和 row.renderValue API 的快捷方式。

// 访问任何列的数据
const firstName = cell.getValue('firstName') // 从 firstName 列读取单元格值
const renderedLastName = cell.renderValue('lastName') // 渲染 lastName 列的值

从任何单元格访问其他行数据

由于每个单元格对象都与其父行关联，你可以使用 cell.row.original 访问你在表格中使用的原始行中的任何数据。

// 即使我们在不同单元格的作用域内，我们仍然可以访问原始行数据
const firstName = cell.row.original.firstName // { firstName: 'John', lastName: 'Doe' }

单元格渲染 (Cell Rendering)

你可以直接使用 cell.renderValue 或 cell.getValue API 来渲染表格的单元格。然而，这些 API 只会吐出原始单元格值（来自访问器函数）。如果你正在使用 cell: () => JSX 列定义选项，你将需要使用适配器中的 flexRender API 工具。

使用 flexRender API 将允许单元格正确渲染任何额外的标记或 JSX，并且它会以正确的参数调用回调函数。

import { flexRender } from '@tanstack/react-table'

const columns = [
  {
    accessorKey: 'fullName',
    cell: ({ cell, row }) => {
      return <div><strong>{row.original.firstName}</strong> {row.original.lastName}</div>
    }
    // ...
  }
]

// ...

<tr>
  {row.getVisibleCells().map(cell => {
    return <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
  })}
</tr>

行指南

表头组指南

单元格指南

从何处获取单元格

单元格对象

单元格 ID (Cell IDs)

单元格父对象 (Cell Parent Objects)

访问单元格值 (Access Cell Values)

从任何单元格访问其他行数据

更多单元格 API

单元格渲染 (Cell Rendering)