表头分组指南

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

什么是表头分组？

表头分组本质上就是表头的“行”。别让这个名字迷惑了你，它就是这么简单。绝大多数表格只有一个表头行（一个表头分组），但如果你像列分组示例中那样，通过嵌套列来定义你的列结构，那么你就可以拥有多个表头行（多个表头分组）。

从哪里获取表头分组

你可以使用多个 table 实例 API 来从 table 实例中检索表头分组。 table.getHeaderGroups 是最常用的 API，但根据你使用的功能，你可能需要使用其他 API，例如，如果你正在使用列固定功能，可以使用 table.get[Left/Center/Right]HeaderGroups。

表头分组对象

表头分组对象类似于行对象，但更简单，因为表头行不像体行那样有那么多内容。

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

id：表头分组的唯一标识符，根据其深度（索引）生成。这对于 React 组件的 key 非常有用。
depth：表头分组的深度，基于零索引。将其视为所有表头行中的行索引。
headers：属于该表头分组（行）的表头单元格对象的数组。

访问表头单元格

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

jsx

<thead>
  {table.getHeaderGroups().map(headerGroup => {
    return (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(header => ( // map over the headerGroup headers array
          <th key={header.id} colSpan={header.colSpan}>
            {/* */}
          </th>
        ))}
      </tr>
    )
  })}
</thead>

<thead>
  {table.getHeaderGroups().map(headerGroup => {
    return (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map(header => ( // map over the headerGroup headers array
          <th key={header.id} colSpan={header.colSpan}>
            {/* */}
          </th>
        ))}
      </tr>
    )
  })}
</thead>