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.

Simple header filters

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

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.

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.

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

API

• DataGrid
• DataGridPro
• DataGridPremium