Documentation

Header Renderer

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.

💡 Need to Hide Headers?

If you want to hide the entire header row instead of customizing it, use the hideHeader prop on the SimpleTable component. This is useful for creating cleaner data displays or implementing custom header implementations outside the table. See the API Reference for more details.

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

Property	Required	Description	Example

`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

Property	Required	Description

`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.
`components` HeaderRendererComponents	Optional	Object containing pre-rendered header components (sortIcon, filterIcon, collapseIcon, labelContent) that can be positioned anywhere in your custom header renderer. This gives you complete control over the layout and order of header elements.

💡 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.

Component Control (v2.0.7+)

The components prop gives you complete control over the positioning of header elements. Instead of building everything from scratch, you can use the pre-rendered components and arrange them however you like.

🎨 Available Components

sortIcon - The sort indicator icon (when column is sortable)
filterIcon - The filter icon (when column is filterable)
collapseIcon - The collapse/expand icon (for collapsible columns)
labelContent - The column label text

Example: Custom Icon Positioning

Here's how you can reorder the header elements to put the label first, followed by the sort and filter icons:

{
  accessor: "name",
  label: "Name",
  sortable: true,
  filterable: true,
  headerRenderer: ({ components }) => (
    <>
      {components?.labelContent}
      {components?.sortIcon}
      {components?.filterIcon}
    </>
  )
}

Example: Custom Layout with Flexbox

You can also create more complex layouts using CSS:

{
  accessor: "status",
  label: "Status",
  sortable: true,
  filterable: true,
  headerRenderer: ({ components }) => (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'space-between',
      alignItems: 'center'
    }}>
      <span>{components?.labelContent}</span>
      <div style={{ display: 'flex', gap: '4px' }}>
        {components?.filterIcon}
        {components?.sortIcon}
        {components?.collapseIcon}
      </div>
    </div>
  )
}

✨ Why Use Components?

Using the components prop has several advantages:

All built-in functionality (sorting, filtering) works automatically
Icons respect the table theme and styling
No need to reimplement click handlers or state management
Easy to reposition elements without losing functionality