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}
  components={{
    Toolbar: GridToolbar,
  }}
/>

Column types

The type of the column is used for adapting the filtering. You can find the different supported types in the columns section.

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 GridColDef 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.

The rating column reuses the numeric operator, but the input value is a new rating component.

<DataGrid rows={data.rows} columns={columns} filterModel={filterModel} />

2. Custom column type.

In this demo you will see how to extend an existing column type, adding your own filter operators with filter input value props.

As you can see in the filter panel, the totalPrice column only contains 2 operators <, & >, and the input field is prefixed with $.

<DataGrid
  rows={data.rows}
  columns={columns}
  columnTypes={{ price: priceColumnType }}
  filterModel={{
    items: [
      { columnField: 'totalPrice', value: '3000000', operatorValue: '>' },
    ],
  }}
/>

3. Custom operator.

In this demo you will see how to create a complete new operator for a specific column.

The rating column contains a new From operator, as you can see in the filter panel.

<DataGrid
  rows={data.rows}
  columns={columns}
  filterModel={{
    items: [{ columnField: 'rating', value: '3.5', operatorValue: 'from' }],
  }}
/>

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 very simple demo on how you could achieve server side filtering.

<DataGrid
  rows={rows}
  columns={columns}
  filterMode="server"
  onFilterModelChange={onFilterChange}
  loading={loading}
/>

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: GridFilterModel = {
  items: [
    { columnField: 'commodity', operatorValue: 'contains', value: 'rice' },
    { columnField: 'commodity', operatorValue: 'startsWith', value: 'Soy' },
  ],
  linkOperator: GridLinkOperator.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.

API

• <DataGrid />
• <XGrid />