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.
Name
Rating
Country
Created on
Is admin?
Luella Thornton
3

6/13/2025
Jacob Weaver
4

10/28/2024
Evan Logan
3

6/27/2024
Marion Swanson
5

9/11/2024
Dale Bennett
3

9/9/2024
Lura Murphy
4

7/15/2024
Viola Weber
4

1/2/2025
Luella Collins
4

11/18/2024
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.
Name
Rating
Country
Created on
Is admin?
Carolyn Carr
5

12/26/2024
Grace Chandler
1

6/24/2024
Russell Santos
2

12/30/2024
Alexander Gardner
3

12/17/2024
Warren Grant
1

8/28/2024
Lula Bryan
4

5/29/2025
Nettie Beck
5

1/13/2025
Billy Crawford
5

3/1/2025
Disable action buttons
To disable Add filter
or Remove all
buttons, pass disableAddFilterButton
or disableRemoveAllButton
to componentsProps.filterPanel
.
Name
Rating
Country
Created on
Is admin?