Data grid - Column header

Customize your columns header.

You can configure the headers with:

• headerName: The title of the column rendered in the column header cell.
• description: The description of the column rendered as tooltip if the column header name is not fully displayed.

Custom header renderer

You can customize the look of each header with the renderHeader method. It takes precedence over the headerName property.

const columns: GridColDef[] = [
  {
    field: 'date',
    width: 150,
    type: 'date',
    renderHeader: (params: GridColumnHeaderParams) => (
      <strong>
        {'Birthday '}
        <span role="img" aria-label="enjoy">
          🎂
        </span>
      </strong>
    ),
  },
];

Styling header

You can check the styling header section for more information.

Column menu

By default, each column header displays a column menu. The column menu allows actions to be performed in the context of the target column, e.g. filtering. To disable the column menu, set the prop disableColumnMenu={true}.

API

• DataGrid
• DataGridPro
• DataGridPremium