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 are similar to Row objects but simpler, as header rows have less complexity compared to body rows.

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.

<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>

Cells

Headers