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.

<DataGrid
  columns={[
    {
      field: 'username',
      headerName: 'Username',
      description:
        'The identification used by the person with access to the online service.',
    },
    { field: 'age', headerName: 'Age' },
  ]}
  rows={rows}
/>

<DataGrid
  columns={[
    {
      field: 'username',
      headerName: 'Username',
      description:
        'The identification used by the person with access to the online service.',
    },
    { field: 'age', headerName: 'Age' },
  ]}
  rows={rows}
/>

Press Enter to start editing

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>
    ),
  },
];

<DataGrid rows={rows} columns={columns} />

<DataGrid rows={rows} columns={columns} />

Press Enter to start editing

Styling header

You can check the styling header section for more information.

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

<DataGrid {...data} disableColumnMenu />

<DataGrid {...data} disableColumnMenu />

Press Enter to start editing

Data grid - Column header

Custom header renderer

Styling header

Column menu

API