Headers

This quick guide discusses how to retrieve and interact with header objects in React Table.

Headers are equivalent to cells but are meant for the <thead> section of the table instead of the <tbody> section.

Header Rendering

Headers are stored in the headerGroup.headers array. Typically, you will map over this array to render your headers.

<QThead>
  {
    // map over the table's header groups
    table.getHeaderGroups().map((headerGroup) => {
      return (
        <QTr key={headerGroup.id}>
          {headerGroup.headers.map(
            (
              header, // map over the headerGroup headers array
            ) => (
              <QTh key={header.id} colSpan={header.colSpan}>
                {/* */}
              </QTh>
            ),
          )}
        </QTr>
      )
    })
  }
</QThead>

Header objects are similar to Cell objects but are meant for the <thead> section of the table instead of the <tbody> section. Each header object can be associated with a <th> or similar cell element in your UI. There are properties and methods on header objects to interact with the table state and extract cell values based on the table's state.

<QThead>
  {table.getHeaderGroups().map((headerGroup) => (
    <QTr key={headerGroup.id}>
      {headerGroup.headers.map((header) => (
        <QTh key={header.id} align="left">
          {header.isPlaceholder
            ? null
            : flexRender(header.column.columnDef.header, header.getContext())}
        </QTh>
      ))}
    </QTr>
  ))}
</QThead>

Header Parent Objects

Every header stores a reference to its parent column object and its parent header group object.

Header Groups

Columns

Headers

API

Overview

Header Rendering

Header Objects

Header Parent Objects