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.
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>
    ),
  },
];
Press Enter to start editing

Header height

By default, column headers have a height of 56 pixels. This matches the height from the Material Design guidelines.

The columnHeaderHeight prop can be used to override the default value.

Press Enter to start editing

Styling header

You can check the styling header section for more information.

API