Skip to content
Influence MUI X's 2024 roadmap! Participate in the latest Developer Survey
+

Data Grid - Filtering

Easily filter your rows based on one or several criteria.

The filters can be modified through the data grid interface in several ways:

  • By opening the column menu and clicking the Filter menu item.
  • By clicking the Filters button in the data grid toolbar (if enabled).

Each column type has its own filter operators. The demo below lets you explore all the operators for each built-in column type.

See the dedicated section to learn how to create your own custom filter operator.

Single and multi-filters

Pass filters to the Data Grid

Structure of the model

The full typing details can be found on the GridFilterModel API page.

The filter model is composed of a list of items and a logicOperator:

The items

A filter item represents a filtering rule and is composed of several elements:

  • filterItem.field: the field on which the rule applies.
  • filterItem.value: the value to look for.
  • filterItem.operator: name of the operator method to use (e.g. contains), matches the value key of the operator object.
  • filterItem.id (): required when multiple filter items are used.

The logicOperator

The logicOperator tells the data grid if a row should satisfy all (AND) filter items or at least one (OR) in order to be considered valid.

// Example 1: get rows with rating > 4 OR isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.Or,
};

// Example 2: get rows with rating > 4 AND isAdmin = true
const filterModel: GridFilterModel = {
  items: [
    { id: 1, field: 'rating', operator: '>', value: '4' },
    { id: 2, field: 'isAdmin', operator: 'is', value: 'true' },
  ],
  logicOperator: GridLogicOperator.And,
};

If no logicOperator is provided, the data grid will use GridLogicOperator.Or by default.

Initialize the filters

To initialize the filters without controlling them, provide the model to the initialState prop.

<DataGrid
  initialState={{
    filter: {
      filterModel: {
        items: [{ field: 'rating', operator: '>', value: '2.5' }],
      },
    },
  }}
/>

Controlled filters

Use the filterModel prop to control the filter applied on the rows.

You can use the onFilterModelChange prop to listen to changes to the filters and update the prop accordingly.

<DataGrid
  filterModel={{
    items: [{ field: 'rating', operator: '>', value: '2.5' }],
  }}
/>

Disable the filters

For all columns

Filters are enabled by default, but you can easily disable this feature by setting the disableColumnFilter prop.

<DataGrid disableColumnFilter />

For some columns

To disable the filter of a single column, set the filterable property in GridColDef to false.

In the example below, the rating column cannot be filtered.

<DataGrid columns={[...columns, { field: 'rating', filterable: false }]} />

Filter non-filterable columns programmatically

You can initialize the filterModel, set the filterModel prop, or use the API method apiRef.current.setFilterModel to set the filters for non-filterable columns. These filters will be applied but will be read-only on the UI and the user won't be able to change them.

const columns = [
  { field: 'name', filterable: false },
  ...otherColumns,
]

<DataGrid
  filterModel={{
    items: [{ field: 'name', operator: 'contains', value: 'a' }],
  }}
  columns={columns}
/>

Ignore diacritics (accents)

You can ignore diacritics (accents) when filtering the rows. See Quick filter - Ignore diacritics (accents).

apiRef

The grid exposes a set of methods that enables all of these features using the imperative apiRef. To know more about how to use it, check the API Object section.

Signature:
deleteFilterItem: (item: GridFilterItem) => void
Signature:
hideFilterPanel: () => void
Signature:
ignoreDiacritics: DataGridProcessedProps['ignoreDiacritics']
Signature:
setFilterLogicOperator: (operator: GridLogicOperator) => void
Signature:
setFilterModel: (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void
Signature:
setQuickFilterValues: (values: any[]) => void
Signature:
showFilterPanel: (targetColumnField?: string, panelId?: string, labelId?: string) => void
Signature:
upsertFilterItem: (item: GridFilterItem) => void
Signature:
upsertFilterItems: (items: GridFilterItem[]) => void

Selectors

Signature:
gridExpandedRowCountSelector: (apiRef: GridApiRef) => number
// or
gridExpandedRowCountSelector: (state: GridState, instanceId?: number) => number
Example
gridExpandedRowCountSelector(apiRef)
// or
gridExpandedRowCountSelector(state, apiRef.current.instanceId)
Signature:
gridExpandedSortedRowEntriesSelector: (apiRef: GridApiRef) => { id: GridRowId; model: GridValidRowModel }[]
// or
gridExpandedSortedRowEntriesSelector: (state: GridState, instanceId?: number) => { id: GridRowId; model: GridValidRowModel }[]
Example
gridExpandedSortedRowEntriesSelector(apiRef)
// or
gridExpandedSortedRowEntriesSelector(state, apiRef.current.instanceId)
Signature:
gridExpandedSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridExpandedSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]
Example
gridExpandedSortedRowIdsSelector(apiRef)
// or
gridExpandedSortedRowIdsSelector(state, apiRef.current.instanceId)
Signature:
gridFilterModelSelector: (apiRef: GridApiRef) => GridFilterModel
// or
gridFilterModelSelector: (state: GridState, instanceId?: number) => GridFilterModel
Example
gridFilterModelSelector(apiRef)
// or
gridFilterModelSelector(state, apiRef.current.instanceId)
Signature:
gridFilteredSortedRowEntriesSelector: (apiRef: GridApiRef) => { id: GridRowId; model: GridValidRowModel }[]
// or
gridFilteredSortedRowEntriesSelector: (state: GridState, instanceId?: number) => { id: GridRowId; model: GridValidRowModel }[]
Example
gridFilteredSortedRowEntriesSelector(apiRef)
// or
gridFilteredSortedRowEntriesSelector(state, apiRef.current.instanceId)
Signature:
gridFilteredSortedRowIdsSelector: (apiRef: GridApiRef) => GridRowId[]
// or
gridFilteredSortedRowIdsSelector: (state: GridState, instanceId?: number) => GridRowId[]
Example
gridFilteredSortedRowIdsSelector(apiRef)
// or
gridFilteredSortedRowIdsSelector(state, apiRef.current.instanceId)
Signature:
gridFilteredSortedTopLevelRowEntriesSelector: (apiRef: GridApiRef) => { id: GridRowId; model: GridValidRowModel }[]
// or
gridFilteredSortedTopLevelRowEntriesSelector: (state: GridState, instanceId?: number) => { id: GridRowId; model: GridValidRowModel }[]
Example
gridFilteredSortedTopLevelRowEntriesSelector(apiRef)
// or
gridFilteredSortedTopLevelRowEntriesSelector(state, apiRef.current.instanceId)
Signature:
gridFilteredTopLevelRowCountSelector: (apiRef: GridApiRef) => number
// or
gridFilteredTopLevelRowCountSelector: (state: GridState, instanceId?: number) => number
Example
gridFilteredTopLevelRowCountSelector(apiRef)
// or
gridFilteredTopLevelRowCountSelector(state, apiRef.current.instanceId)
Signature:
gridQuickFilterValuesSelector: (apiRef: GridApiRef) => any[] | undefined
// or
gridQuickFilterValuesSelector: (state: GridState, instanceId?: number) => any[] | undefined
Example
gridQuickFilterValuesSelector(apiRef)
// or
gridQuickFilterValuesSelector(state, apiRef.current.instanceId)

More information about the selectors and how to use them on the dedicated page

API