Skip to content

Data Grid - Filtering

Filtering helps view particular or related records in the data grid.

Column filters

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, just need to click on the filter button.

A filtered column can be can pre-configured using the filterModel prop:

<DataGrid
  {...data}
  filterModel={{
    items: [
      { columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
    ],
  }}
/>

Toolbar

In addition to the column menu that allows users to apply a filter, you can also show a toolbar:

<DataGrid {...data} filterModel={riceFilterModel} showToolbar />

Disable filter

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 ColDef to false;

const columns = [{ field: 'image', filterable: false }];
<DataGrid
  {...data}
  columns={data.columns.map((column) => ({
    ...column,
    filterable: false,
  }))}
/>

Custom filter operator

The data grid supports different operators for the native column types. However, you can extend the operator and add your own, customize the input component or set your own operator for a new column type.

  1. Custom input. In this demo, you will see how to reuse the numeric filter and customize the input filter value component.
<DataGrid {...data} columns={columns} filterModel={filterModel} />
  1. Custom column type. WIP
  2. Custom operator. WIP

Server-side filter

WIP

Controlled filtering

WIP

Multi-column filtering

XGrid supports filtering by multiple columns. The default operator that will be applied between filters is an And.

<XGrid
  {...data}
  filterModel={{
    items: [
      { columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
      { columnField: 'quantity', operatorValue: '>=', value: '20000' },
    ],
  }}
/>

To change the default operator, you should set the 'linkOperator' property of the filterModel like below.

const filterModel: FilterModel = {
  items: [
    { columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
    { columnField: 'commodity', operatorValue: 'startsWith', value: 'Soy' },
  ],
  linkOperator: LinkOperator.Or,
};
<XGrid {...data} filterModel={filterModel} />

apiRef

🚧 Quick filter

⚠️ This feature isn't implemented yet. It's coming.

👍 Upvote issue #202 if you want to see it land faster.

In addition to the column specific filtering, a global quick filtering will also be available. The provided search text will match against all the cells.