表头组指南

这份快速指南将讨论如何检索和与 TanStack Table 中的表头组对象 (header group objects) 进行交互。

什么是表头组？

表头组简单来说就是“行”的表头。别让这个名字把你搞糊涂了，就这么简单。绝大多数表格只会有一行表头（一个单独的表头组），但如果你像列组示例那样定义了嵌套列结构，你就可以拥有多行表头（多个表头组）。

从何处获取表头组

有多个表格实例 API 可用于从表格实例中检索表头组。table.getHeaderGroups 是最常用的 API，但根据你使用的功能，你可能需要使用其他 API，例如如果你使用列固定 (column pinning) 功能，则需要使用 table.get[Left/Center/Right]HeaderGroups。

表头组对象

表头组对象与行对象类似，但更简单，因为表头行没有主体行那么多复杂内容。

默认情况下，表头组只有三个属性：

id: 表头组的唯一标识符，由其深度（索引）生成。这对于 React 组件来说很有用，可以作为 key。
depth: 表头组的深度，从零开始索引。你可以将其视为所有表头行中的行索引。
headers: 属于此表头组（行）的表头单元格对象 (Header cell objects) 数组。

访问表头单元格

要渲染表头组中的表头单元格，你只需遍历表头组对象中的 headers 数组。

<thead>
  {table.getHeaderGroups().map(headerGroup => {
    return (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(header => ( // 遍历 headerGroup.headers 数组
          <th key={header.id} colSpan={header.colSpan}>
            {/* */}
          </th>
        ))}
      </tr>
    )
  })}
</thead>

单元格指南

表头指南