Data Grid - Multi filters

Apply multiple filters at the same time.

Multi filters allow filtering rows by multiple columns with multiple criteria. To add more filters, use the Add Filter button on the filter panel.

The following demo lets you filter the rows according to several criteria at the same time.

One filter per column

You can also limit to only one filter per column while still allowing to filter other columns. For this, use the filterColumns and getColumnForNewFilter props available in slotProps.filterPanel.

Use cases

• Sometimes it's a limitation of some server-side filtering APIs to only allow one filter per column.
• You can also write custom logic to prevent some columns from being shown as possible filters.

This demo implements a basic use case to prevent showing multiple filters for one column.

Disable action buttons

To disable Add filter or Remove all buttons, pass disableAddFilterButton or disableRemoveAllButton to componentsProps.filterPanel.

API

• GridFilterPanel
• DataGrid
• DataGridPro
• DataGridPremium