Documentation

Header Renderer

CodeSandbox

Header renderers allow you to completely customize how column headers appear and behave in your table. Create clean, modern headers with subtle styling, custom onClick handlers, and interactive elements while maintaining a professional appearance that integrates seamlessly with your design.

Basic Usage

Each column in your table can have its own headerRenderer function. This function receives information about the header and returns either a ReactNode or a string to be rendered in the header cell.

Header Renderer Configuration

PropertyRequiredDescriptionExample
HeaderObject.headerRenderer
(params: HeaderRendererParams) => ReactNode | string
Optional
Custom function to render header content. Receives header information and returns either a ReactNode or string for display.

Header Renderer Parameters

HeaderRendererParams Interface

PropertyRequiredDescriptionExample
accessor
Accessor
Required
The column accessor string identifying which column this header belongs to.
colIndex
number
Required
The zero-based index of the column within the table.
header
HeaderObject
Required
The complete HeaderObject containing all configuration for this column including label, width, and other properties.

💡 Pro Tip

Use the header parameter to access all column configuration properties, including label, width, sortable status, and more. This allows you to create dynamic headers that adapt based on column settings.