Header Groups

Overview

Header Groups are rows of headers. Most tables have one row of headers (a single header group). However, if you define your column structure with nested columns (see: Column Groups example), you can have multiple rows of headers (multiple header groups).

Header Group Objects

Header Group objects resemble Row objects but contain less complexity. See Rows Guide for comparison.

By default, header groups have three properties:

id: The unique identifier for the header group, generated from its depth (index). Useful as a key for React components.
depth: The zero-indexed depth of the header group, representing its row index among all header rows.
headers: An array of Header cell objects that belong to this header group (row).

Header Group Rendering

To render the header cells in a header group, map over the headers array from the header group object.

<Table.Header>
  {table.getHeaderGroups().map((headerGroup) => {
    return (
      <Table.Row key={headerGroup.id}>
        {headerGroup.headers.map(
          (
            header, // map over the headerGroup headers array
          ) => (
            <Table.HeaderCell key={header.id} colSpan={header.colSpan}>
              {/* */}
            </Table.HeaderCell>
          ),
        )}
      </Table.Row>
    )
  })}
</Table.Header>

Cells

Headers