Skip to main content

​
Overview

The renderHeaderCell function is the default header cell renderer that displays sortable columns with sort indicators. It renders the column name and, for sortable columns, includes visual indicators for sort direction and priority.

​
Signature

function renderHeaderCell<R, SR>(
  props: RenderHeaderCellProps<R, SR>
): React.ReactNode

​
Parameters

​
props
RenderHeaderCellProps<R, SR>
required
The header cell renderer props.

​
RenderHeaderCellProps

​
props.column
CalculatedColumn<R, SR>
required
The column object containing configuration like name, sortable, etc.
​
props.sortDirection
'ASC' | 'DESC' | undefined
The current sort direction for this column, if sorted.
​
props.priority
number | undefined
The sort priority number for multi-column sorting (1, 2, 3, etc.).
​
props.tabIndex
number
required
The tab index for keyboard navigation.

​
Return Value

​
return
React.ReactNode
The rendered header cell content. For non-sortable columns, returns the column name directly. For sortable columns, returns the name wrapped with sort indicators.

​
Usage

You can use this function as a custom header cell renderer for individual columns: 
import { renderHeaderCell, type Column } from 'react-data-grid';

const columns: readonly Column<Row>[] = [
  {
    key: 'name',
    name: 'Name',
    sortable: true,
    renderHeaderCell
  }
];

​
Behavior

  • Non-sortable columns: Returns the column name as-is
  • Sortable columns: Wraps the column name with sort indicators showing:
    • Sort direction arrow (up for ASC, down for DESC)
    • Sort priority number (for multi-column sorting)

​
Example

Using the default header cell renderer with sorting: 
import 'react-data-grid/lib/styles.css';
import { DataGrid, renderHeaderCell, type Column } from 'react-data-grid';
import { useState } from 'react';

interface Row {
  id: number;
  title: string;
  count: number;
}

const columns: readonly Column<Row>[] = [
  { key: 'id', name: 'ID' },
  {
    key: 'title',
    name: 'Title',
    sortable: true,
    renderHeaderCell
  },
  {
    key: 'count',
    name: 'Count',
    sortable: true,
    renderHeaderCell
  }
];

function App() {
  const [sortColumns, setSortColumns] = useState([]);

  return (
    <DataGrid
      columns={columns}
      rows={rows}
      sortColumns={sortColumns}
      onSortColumnsChange={setSortColumns}
    />
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us