列指南

列 API

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

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

你可以在许多地方找到 column 对象。它们经常被附加

在开始使用表格实例的任何 API 之前，请考虑你是否真的需要检索 表头 或 单元格，而不是 columns。如果你正在渲染表格的标记，你很可能会想要使用返回表头或单元格的 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，它们会受到表格的其他功能和状态的影响。 table.getAllFlatColumns、table.getAllLeafColumns、getCenterLeafColumns、table.getLeftVisibleLeafColumns 是一些你可能与列可见性或列固定功能结合使用的其他列 API 的示例。

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

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

用于创建该列的原始 columnDef 对象的一个引用始终可以在列对象上访问。

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

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

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

不要轻易直接使用 column 对象来渲染 headers 或 cells。如上所述，而是使用 header 和 cell 对象。

但是，如果你只是在你 UI 的其他地方渲染列列表，用于例如列可见性菜单或其他类似功能，你可以简单地映射一个列数组并像往常一样渲染 UI。