TanStack
Table v8v8
Documentation
Framework
Version
Menu
Getting Started
Core Guides
Feature Guides
Core APIs
Feature APIs
Enterprise
Examples

Header APIs

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

Header API

All header objects have the following properties:

id

 
id: string

id: string

The unique identifier for the header.

index

 
index: number

index: number

The index for the header within the header group.

depth

 
depth: number

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

Table API

getHeaderGroups

 
type getHeaderGroups = () => HeaderGroup<TData>[]

type getHeaderGroups = () => HeaderGroup<TData>[]

Returns all header groups for the table.

getLeftHeaderGroups

 
type getLeftHeaderGroups = () => HeaderGroup<TData>[]

type getLeftHeaderGroups = () => HeaderGroup<TData>[]

If pinning, returns the header groups for the left pinned columns.

getCenterHeaderGroups

 
type getCenterHeaderGroups = () => HeaderGroup<TData>[]

type getCenterHeaderGroups = () => HeaderGroup<TData>[]

If pinning, returns the header groups for columns that are not pinned.

getRightHeaderGroups

 
type getRightHeaderGroups = () => HeaderGroup<TData>[]

type getRightHeaderGroups = () => HeaderGroup<TData>[]

If pinning, returns the header groups for the right pinned columns.

getFooterGroups

 
type getFooterGroups = () => HeaderGroup<TData>[]

type getFooterGroups = () => HeaderGroup<TData>[]

Returns all footer groups for the table.

getLeftFooterGroups

 
type getLeftFooterGroups = () => HeaderGroup<TData>[]

type getLeftFooterGroups = () => HeaderGroup<TData>[]

If pinning, returns the footer groups for the left pinned columns.

getCenterFooterGroups

 
type getCenterFooterGroups = () => HeaderGroup<TData>[]

type getCenterFooterGroups = () => HeaderGroup<TData>[]

If pinning, returns the footer groups for columns that are not pinned.

getRightFooterGroups

 
type getRightFooterGroups = () => HeaderGroup<TData>[]

type getRightFooterGroups = () => HeaderGroup<TData>[]

If pinning, returns the footer groups for the right pinned columns.

getFlatHeaders

 
type getFlatHeaders = () => Header<TData, unknown>[]

type getFlatHeaders = () => Header<TData, unknown>[]

Returns headers for all columns in the table, including parent headers.

getLeftFlatHeaders

 
type getLeftFlatHeaders = () => Header<TData, unknown>[]

type getLeftFlatHeaders = () => Header<TData, unknown>[]

If pinning, returns headers for all left pinned columns in the table, including parent headers.

getCenterFlatHeaders

 
type getCenterFlatHeaders = () => Header<TData, unknown>[]

type getCenterFlatHeaders = () => Header<TData, unknown>[]

If pinning, returns headers for all columns that are not pinned, including parent headers.

getRightFlatHeaders

 
type getRightFlatHeaders = () => Header<TData, unknown>[]

type getRightFlatHeaders = () => Header<TData, unknown>[]

If pinning, returns headers for all right pinned columns in the table, including parent headers.

getLeafHeaders

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

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

Returns headers for all leaf columns in the table, (not including parent headers).

getLeftLeafHeaders

 
type getLeftLeafHeaders = () => Header<TData, unknown>[]

type getLeftLeafHeaders = () => Header<TData, unknown>[]

If pinning, returns headers for all left pinned leaf columns in the table, (not including parent headers).

getCenterLeafHeaders

 
type getCenterLeafHeaders = () => Header<TData, unknown>[]

type getCenterLeafHeaders = () => Header<TData, unknown>[]

If pinning, returns headers for all columns that are not pinned, (not including parent headers).

getRightLeafHeaders

 
type getRightLeafHeaders = () => Header<TData, unknown>[]

type getRightLeafHeaders = () => Header<TData, unknown>[]

If pinning, returns headers for all right pinned leaf columns in the table, (not including parent headers).

Edit on GitHub
Header Group
Row
Our Partners
Code Rabbit
Cloudflare
AG Grid
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.

Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.