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: (item: GridFilterItem, linkOperator?: GridLinkOperator) => void

applyFilterLinkOperator: (operator: GridLinkOperator) => void

applyFilters: () => void

deleteFilter: (item: GridFilterItem) => void

getVisibleRowModels: () => Map<GridRowId, GridRowData>

hideFilterPanel: () => void

setFilterModel: (model: GridFilterModel) => void

showFilterPanel: (targetColumnField?: string) => void

upsertFilter: (item: GridFilterItem) => void

API

• DataGrid
• DataGridPro