表头组指南

表头组指南

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

什么是表头组？

表头组仅仅是表头的“行”。不要被名称迷惑，就这么简单。绝大多数表格将只有一个表头行（单个表头组），但是如果您使用嵌套列定义列结构，如列组示例所示，则可以有多个表头行（多个表头组）。

从哪里获取表头组

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

表头组对象

表头组对象类似于 Row 对象，但更简单，因为表头行中的内容不如主体行中的内容多。

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

id：表头组的唯一标识符，从其深度（索引）生成。这作为 React 组件的键非常有用。
depth：表头组的深度，从零开始索引。可以将其视为所有表头行中的行索引。
headers：属于此表头组（行）的 Header 单元格对象数组。

访问表头单元格

要在表头组中渲染表头单元格，您只需映射表头组对象中的 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>

API

表头组指南

什么是表头组？

从哪里获取表头组

表头组对象

访问表头单元格

订阅 Bytes

订阅 Bytes