Lzh on GitHub

注意:本指南讨论的是表格实例中实际生成的列对象 (column objects),而不是关于如何设置表格的列定义 (column definitions)

这份快速指南将讨论如何检索和与 TanStack Table 中的列对象进行交互。

从何处获取列

你可以在许多地方找到列对象。它们通常是附带的。

表头和单元格对象 (Header and Cell Objects)

在你使用任何表格实例 API 之前,请考虑你是否真的需要检索表头 (headers)单元格 (cells),而不是列 (columns)。如果你正在渲染表格的标记,你很可能希望使用返回表头或单元格的 API,而不是列。列对象本身并不是真正用来直接渲染表头或单元格的,但是表头和单元格对象将包含对这些列对象的引用,它们可以从中获取渲染 UI 所需的信息。

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

列表格实例 API (Column Table Instance APIs)

有数十个表格实例 API 可用于从表格实例中检索列。你将使用哪些 API 完全取决于你在表格中使用的功能和你的用例。

获取列 (Get Column)

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

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

获取所有列 (Get Columns)

最简单的列 API 是 table.getAllColumns,它将返回表格中所有列的列表。但除了此 API 之外,还有数十个受其他功能和表格状态影响的其他列 API。table.getAllFlatColumnstable.getAllLeafColumnsgetCenterLeafColumnstable.getLeftVisibleLeafColumns 只是你可能结合列可见性或列固定功能使用的其他列 API 的一些示例。

列对象 (Column Objects)

列对象本身并非旨在直接用于渲染表格 UI,因此它们不会与表格中的任何 <th><td> 元素一对一关联,但它们包含许多有用的属性和方法,你可以使用它们来与表格状态进行交互。

列 ID (Column IDs)

每个列都必须在其关联的列定义 (Column Definition) 中定义一个唯一的 id。通常,你自己定义此 id,或者它从列定义中的 accessorKeyheader 属性派生而来。

列定义 (ColumnDef)

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

嵌套分组列属性 (Nested Grouped Columns Properties)

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

  • columns: 属于组列的子列数组。
  • depth: 列组所属的表头组“行索引”。
  • parent: 列的父列。如果列是顶级列,则此项为 undefined

更多列 API (More Column APIs)

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

列渲染 (Column Rendering)

不要直接使用列对象来渲染表头单元格。相反,如上所述,使用表头和单元格对象

但是,如果你只是在 UI 的其他地方(例如列可见性菜单或类似功能)渲染列列表,你只需遍历列数组并像往常一样渲染 UI 即可。