Skip to content
+

Data Grid - Header filters

Quickly accessible per-column filters on grid header.

Header filters add a new header row that lets users quickly filter the columns. The filters added on the filter panel are synchronized with the header filters and vice versa.

You can switch between different operators by clicking the operator button in the header filter cell or pressing Ctrl+Enter (or ⌘ Command+Enter on macOS) when focusing on a header filter cell.

Total Rows: 100

Simple header filters

You can disable the default filter panel using disableColumnFilter prop and only show the default operator by passing slots.headerFilterMenu as null.

Total Rows: 100

Customize header filters

There are multiple ways to customize header filters.

renderHeaderFilter method

You can use the renderHeaderFilter method of the GridColDef to customize the header filter cell for a specific column.

const columns: GridColDef[] = [
  {
    field: 'isAdmin',
    renderHeaderFilter: (params: GridHeaderFilterCellProps) => (
      <MyCustomHeaderFilter {...params} />
    ),
  },
];

The following demo uses the renderHeaderFilter method to customize the header filter cell for the isAdmin column and hide the filter cell for the phone column.

Total Rows: 100

Customize using filterOperators

If the filter operator has a custom InputComponent, the same component is being used for the header filter.

When rendered as a header filter, the InputComponent also receives the headerFilterMenu and clearButton props that contain the filter operator menu and clear button.

Total Rows: 100

headerFilterCell slot

You can use slots.headerFilterCell to customize the header filter cell completely. Since the default slot component handles keyboard navigation and focus management, you may have to handle them yourself if you are using a custom component.

Additionally, slots.headerFilterMenu could also be used to customize the menu of the header filter cell.

<DataGridPro {...data} slots={{ headerFilterCell: MyCustomHeaderFilterCell }} />
Total Rows: 100

Custom header filter height

By default, the height of the header filter row is the same as the header row (represented by columnHeaderHeight prop). You can customize the height of the header filter cell using the headerFilterHeight prop.

<DataGridPro {...data} headerFilterHeight={52} />

Ignore diacritics (accents)

You can ignore diacritics (accents) when filtering the rows. See Quick filter - Ignore diacritics (accents).

API