Data Grid - Filtering
Filtering helps to view a subset of the records based on a criteria.
Basic filter
Column filters can be set using the column menu and clicking the Filter menu item. Alternatively, if the grid has the toolbar displayed, you just need to click on the Filters button.
The filter applied to a column can be pre-configured using the filterModel prop:
<DataGrid
filterModel={{
items: [{ columnField: 'commodity', operatorValue: 'contains', value: 'rice' }],
}}
/>
Predefined filters
A filter is composed of three parts: the column to filter, the value to look for, and an operator (e.g. contains, is before, is after, etc.).
The operator determines if a candidate value should be considered as a result.
The candidate value used by the operator is the one corresponding to the field attribute or the valueGetter of the GridColDef.
As part of the predefined column types, a set of operators is available.
You can find the supported column types in the columns section.
Note: The valueFormatter is only used for rendering purposes.
The following demo allows to explore the different operators available:
Disable filtering
Globally
Filters are enabled by default, but you can easily disable this feature by setting the disableColumnFilter prop.
<DataGrid disableColumnFilter />
Per column
You can disable the filter on a column by setting the filterable property of the GridColDef to false;
const columns = [{ field: 'image', filterable: false }];
<DataGrid
{...data}
columns={data.columns.map((column) => ({
...column,
filterable: false,
}))}
/>Customize the filters
The grid provides different ways to customize the filter panel. This section provides examples on how to make the most common modifications.
Change the input component
The value used by the operator to look for has to be entered by the user. On most column types, a text field is used. However, a custom component can be rendered instead.
In this demo, the Rating column reuses the numeric filter and the same rating component is used to the enter the value of the filter.
Extend filter operators
When defining a custom column type, the added operators are the same from the type that was extended.
In this demo, a price column type (used by Total is USD) is defined extending the number column type.
Instead of adding all numeric operators, only the operators < and > are kept.
Furthermore, the "$" prefix is added to the input component with the InputComponentProps prop.
Create a custom operator
If reusing the native filter operators is not enough, creating a custom operator is an option.
A custom operator is defined creating a GridFilterOperator object.
This object has to be added to the filterOperators attribute of the GridColDef.
The most important part of an operator is the getApplyFilterFn function.
It's called with the GridFilterItem object and the GridColDef object.
This function must return another function that is called on every value of the column.
The returned function determines if the cell value satisfies the condition of the operator.
{
label: 'From',
value: 'from',
getApplyFilterFn: (filterItem: GridFilterItem, column: GridColDef) => {
if (!filterItem.columnField || !filterItem.value || !filterItem.operatorValue) {
return null;
}
return (params: GridCellParams): boolean => {
return Number(params.value) >= Number(filterItem.value);
};
},
InputComponent: RatingInputValue,
InputComponentProps: { type: 'number' },
}
Note: If the column has a valueGetter, then params.value will be the resolved value.
In this demo, you can see how to create a completely new operator for the Rating column.
Server-side filter
Filtering can be run server-side by setting the filterMode prop to server, and implementing the onFilterModelChange handler.
<DataGrid
rows={rows}
columns={columns}
filterMode="server"
onFilterModelChange={handleFilterModelChange}
loading={loading}
/>
Below is a very simple demo on how you could achieve server-side filtering.
<DataGrid
rows={rows}
columns={columns}
filterMode="server"
onFilterModelChange={onFilterChange}
loading={loading}
/>Multi-column filtering
DataGridPro supports filtering by multiple columns.
The default operator that will be applied between filters is an And.
<DataGridPro
{...data}
filterModel={filterModel}
onFilterModelChange={(model) => setFilterModel(model)}
/>To change the default operator, you should set the 'linkOperator' property of the filterModel like below.
const filterModel: GridFilterModel = {
items: [
{ columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
{ columnField: 'commodity', operatorValue: 'startsWith', value: 'Soy' },
],
linkOperator: GridLinkOperator.Or,
};
<DataGridPro {...data} filterModel={filterModel} />Quick filter
The grid does not natively include quick filtering. However, it can be implemented as in the demo below.
⚠️ This feature isn't natively implemented in the grid package. It's coming.
👍 Upvote issue #202 if you want to see it land faster.
apiRef
applyFilter()
Applies a GridFilterItem on alls rows. If no linkOperator is given, the "and" operator is used.
Signature:
applyFilter: (item: GridFilterItem, linkOperator?: GridLinkOperator) => voidapplyFilterLinkOperator()
Changes the GridLinkOperator used to connect the filters.
Signature:
applyFilterLinkOperator: (operator: GridLinkOperator) => voidapplyFilters()
Applies all filters on all rows.
Signature:
applyFilters: () => voiddeleteFilter()
Deletes a GridFilterItem.
Signature:
deleteFilter: (item: GridFilterItem) => voidgetVisibleRowModels()
Returns a sorted Map containing only the visible rows.
Signature:
getVisibleRowModels: () => Map<GridRowId, GridRowData>hideFilterPanel()
Hides the filter panel.
Signature:
hideFilterPanel: () => voidsetFilterModel()
Sets the filter model to the one given by model.
Signature:
setFilterModel: (model: GridFilterModel) => voidshowFilterPanel()
Shows the filter panel. If targetColumnField is given, a filter for this field is also added.
Signature:
showFilterPanel: (targetColumnField?: string) => voidupsertFilter()
Updates or inserts a GridFilterItem.
Signature:
upsertFilter: (item: GridFilterItem) => void