Skip to content

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.
      field: 'username',
      headerName: 'Username',
        'The identification used by the person with access to the online service.',
    { field: 'age', headerName: 'Age' },

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) => (
        {'Birthday '}
        <span role="img" aria-label="enjoy">
<DataGrid rows={rows} columns={columns} />

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

<DataGrid {} disableColumnMenu />