列指南

列 API

注意：本指南是关于表格实例中生成的实际 column 对象，而不是关于为表格设置列定义。

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

您可以在很多地方找到 column 对象。它们通常被附加到

在使用表格实例 API 之前，请考虑您是否真的需要检索表头或单元格而不是列。如果您正在渲染表格的标记，您很可能需要使用返回表头或单元格而不是列的 API。列对象本身并非真正用于渲染表头或单元格，但 header 和 cell 对象将包含对这些 column 对象的引用，从中可以派生出渲染 UI 所需的信息。

const column = cell.column; // get column from cell
const column = header.column; // get column from header

const column = cell.column; // get column from cell
const column = header.column; // get column from header

有许多 table 实例 API 可以用于从表格实例中检索列。您将使用哪些 API 完全取决于您在表格中使用的功能和您的用例。

如果您只需要通过 ID 获取单个列，可以使用 table.getColumn API。

const column = table.getColumn('firstName');

const column = table.getColumn('firstName');

最简单的列 API 是 table.getAllColumns，它将返回表格中所有列的列表。还有许多其他列 API 受其他功能和表格状态的影响，与此 API 一起使用。 table.getAllFlatColumns、 table.getAllLeafColumns、 getCenterLeafColumns、 table.getLeftVisibleLeafColumns 只是您可能与列可见性或列固定功能一起使用的其他列 API 的一些示例。

列对象实际上并非旨在直接用于渲染表格 UI，因此它们与表格中的任何 <th> 或 <td> 元素并非一对一关联，但它们包含许多有用的属性和方法，可用于与表格状态交互。

每个列都必须在其关联的列定义中定义唯一的 id。通常，您自己定义此 id，或者它从列定义中的 accessorKey 或 header 属性派生而来。

对用于创建列的原始 columnDef 对象的引用始终在列对象上可用。

列对象上有一些属性仅在列是嵌套或分组列结构的一部分时才有用。这些属性包括

• columns：属于组列的子列数组。
• depth：列组所属的表头组“行索引”。
• parent：列的父列。如果列是顶级列，则这将是 undefined。

有许多列 API 可以用于与表格状态交互，并根据表格状态从表格中提取单元格值。有关更多信息，请参阅每个功能的列 API 文档。

不一定直接使用列对象来渲染headers 或 cells。而是使用 header 和 cell 对象，如上所述。

但是，如果您只是在 UI 中的其他位置渲染列列表，例如用于列可见性菜单或类似的东西，您可以像往常一样映射列数组并渲染 UI。