TanStackTable v8
自动
框架
版本
菜单
入门
核心指南
功能指南
核心 API
功能 API
企业版
示例

行指南

API

行 API

行指南

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

从何处获取行

有多个 table 实例 API 可用于从表格实例中检索行。

table.getRow

如果您需要按其 id 访问特定行，可以使用 table.getRow 表格实例 API。

js
const row = table.getRow(rowId)

const row = table.getRow(rowId)

行模型

table 实例会生成 row 对象并将它们存储在称为“行模型”的有用数组中。这在行模型指南中有更详细的讨论，但以下是您可能访问行模型的最常见方法。

渲染行
jsx
<tbody>
  {table.getRowModel().rows.map(row => (
    <tr key={row.id}>
     {/* ... */}
    </tr>
  ))}
</tbody>

<tbody>
  {table.getRowModel().rows.map(row => (
    <tr key={row.id}>
     {/* ... */}
    </tr>
  ))}
</tbody>
获取选定行
js
const selectedRows = table.getSelectedRowModel().rows

const selectedRows = table.getSelectedRowModel().rows

行对象

每个行对象都包含行数据和许多 API，用于与表格状态交互或根据表格状态从行中提取单元格。

行 ID

每个行对象都有一个 id 属性，使其在表格实例中唯一。默认情况下，row.id 与在行模型中创建的 row.index 相同。但是，使用行数据中的唯一标识符覆盖每行的 id 可能很有用。您可以使用 getRowId 表格选项执行此操作。

js
const table = useReactTable({
  columns,
  data,
  getRowId: originalRow => originalRow.uuid, //使用原始行数据中的 uuid 覆盖 row.id
})

const table = useReactTable({
  columns,
  data,
  getRowId: originalRow => originalRow.uuid, //使用原始行数据中的 uuid 覆盖 row.id
})

注意：在某些功能（如分组和展开）中，row.id 将附加额外的字符串。

访问行值

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

js
// 从任何列访问数据
const firstName = row.getValue('firstName') // 从 firstName 列读取行值
const renderedLastName = row.renderValue('lastName') // 渲染 lastName 列的值

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

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

访问��始行数据

对于每个行对象，您都可以通过 row.original 属性访问传递给表格实例的原始相应 data。row.original 中的任何数据都不会被列定义中的访问器修改，因此，如果您在访问器中进行了任何类型的数据转换，这些转换都不会反映在 row.original 对象中。

js
// 访问原始行中的任何数据
const firstName = row.original.firstName // { firstName: 'John', lastName: 'Doe' }

// 访问原始行中的任何数据
const firstName = row.original.firstName // { firstName: 'John', lastName: 'Doe' }

子行

如果您正在使用分组或展开功能，则您的行可能包含子行或父行引用。这在展开指南中有更详细的讨论，但以下是用于处理子行的有用属性和方法的快速概述。

  • row.subRows：行的子行数组。
  • row.depth：行的深度（如果嵌套或分组），相对于根行数组。根级别行为 0，子行为 1，孙行为 2，依此类推。
  • row.parentId：行的父行的唯一 ID（在其 subRows 数组中包含此行的行）。
  • row.getParentRow：返回行的父行（如果存在）。

更多行 API

根据您用于表格的功能，还有数十种更有用的 API 可用于与行交互。有关更多信息，请参阅每个功能的相应 API 文档或指南。

在 GitHub 上编辑
行模型
单元格