Header

API Options

id

id: string

id: string

The unique identifier for the header.

index

id: number

id: number

The index for the header within the header group.

depth

id: number

id: number

The depth of the header, zero-indexed based.

column

column: Column<TData>

column: Column<TData>

The header's associated Column object

headerGroup

headerGroup: HeaderGroup<TData>

headerGroup: HeaderGroup<TData>

The header's associated HeaderGroup object

subHeaders

type subHeaders = Header<TData>[]

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

colSpan: number

colSpan: number

The col-span for the header.

rowSpan

rowSpan: number

rowSpan: number

The row-span for the header.

getLeafHeaders

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

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

Returns the leaf headers hierarchically nested under this header.

isPlaceholder

isPlaceholder: boolean

isPlaceholder: boolean

A boolean denoting if the header is a placeholder header

placeholderId

placeholderId?: string

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

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

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

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

Credits

• Header - TanStack Table v8 Docs