单元格指南

单元格指南

本快速指南将讨论在 TanStack Table 中检索和与 cell 对象交互的不同方法。

从何处获取单元格

单元格来自行。说够了吧？

您可以使用多个 row 实例 API 从行中检索适当的单元格，具体取决于您使用的功能。最常见的情况是，您将使用 row.getAllCells 或 row.getVisibleCells API（如果您正在使用列可见性功能），但还有一些其他类似的 API 可供使用。

单元格对象

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

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

// 从任何列访问数据
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' }

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

单元格渲染

您可以只使用 cell.renderValue 或 cell.getValue API 来渲染表格的单元格。但是，这些 API 只会输出原始单元格值（来自访问器函数）。如果您正在使用 cell: () => JSX 列定义选项，则需要使用适配器中的 flexRender API 实用程序。

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

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>

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>

API