列指南

列 API

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

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

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

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

const column = cell.column; // 从单元格获取列
const column = header.column; // 从表头获取列

const column = cell.column; // 从单元格获取列
const column = header.column; // 从表头获取列

####列表格实例 API

有数十个 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 对象的引用始终在列对象上可用。

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

• columns：属于组列的子列数组。
• depth：列组所属的表头组“行索引”。
• parent：列的父列。如果列是顶层���，则此属性为 undefined。

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

不一定要直接使用 column 对象来渲染 headers 或 cells。相反，如上所述，请使用 header 和 cell 对象。

但是，如果您只是在 UI 的其他位置渲染列列表（例如用于列可见性菜单或类似内容），则只需遍历列数组并像平常一样渲染 UI 即可。