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?
Bradley Scott
1

11/18/2024
Jordan Buchanan
5

7/27/2024
Estella Waters
2

9/18/2024
Cora Alvarez
3

3/26/2024
Luella Harrison
5

1/19/2025
Alfred Frank
3

4/27/2024
Julia Padilla
2

7/28/2024
Bryan Swanson
5

11/13/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?
Myra Parks
5

12/1/2024
Myrtie George
2

10/25/2024
Chase Collier
2

1/30/2025
Jeremiah Vega
1

12/7/2024
Willie Erickson
4

8/29/2024
Christine Barber
3

1/9/2025
Jesse Tyler
5

12/2/2024
Mable Jordan
4

5/29/2024
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?
Evan May
2

4/22/2024
Jay Todd
4

5/23/2024
Elizabeth Mullins
4

5/24/2024
Ralph Obrien
2

12/7/2024
Augusta Mendez
5

7/13/2024
Brett Morrison
3

1/29/2025
Cory McCarthy
2

10/2/2024
Ida Evans
1

11/3/2024