Header

These are core options and API properties for all headers. More options and API properties may be available for other table features.

All header objects have the following properties:

id: string

The unique identifier for the header.

id: number

The index for the header within the header group.

id: number

The depth of the header, zero-indexed based.

column: Column<TData>

The header's associated Column object

headerGroup: HeaderGroup<TData>

The header's associated HeaderGroup object

type subHeaders = Header<TData>[]

The header's hierarchical sub/child headers. Will be empty if the header's associated column is a leaf-column.

colSpan: number

The col-span for the header.

rowSpan: number

The row-span for the header.

type getLeafHeaders = () => Header<TData>[]

Returns the leaf headers hierarchically nested under this header.

isPlaceholder: boolean

A boolean denoting if the header is a placeholder header

placeholderId?: string

If the header is a placeholder header, this will be a unique header ID that does not conflict with any other headers across the table

getContext: () => {
  table: Table<TData>
  header: Header<TData, TValue>
  column: Column<TData, TValue>
}

Returns the rendering context (or props) for column-based components like headers, footers and filters. Use these props with your framework's flexRender utility to render these using the template of your choice:

flexRender(header.column.columnDef.header, header.getContext())