Skip to content

GridFilterForm API

API reference docs for the React GridFilterForm component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { GridFilterForm } from '@mui/x-data-grid-premium';
// or
import { GridFilterForm } from '@mui/x-data-grid-pro';
// or
import { GridFilterForm } from '@mui/x-data-grid';
You can learn about the difference by reading this guide on minimizing bundle size.

Component name

The name MuiDataGrid can be used when providing default props or style overrides in the theme.

Props

NameTypeDefaultDescription
applyFilterChanges*func
Callback called when the operator, column field or value is changed.

Signature:
function(item: GridFilterItem) => void
item: The updated GridFilterItem.
applyMultiFilterOperatorChanges*func
Callback called when the logic operator is changed.

Signature:
function(operator: GridLogicOperator) => void
operator: The new logic operator.
deleteFilter*func
Callback called when the delete button is clicked.

Signature:
function(item: GridFilterItem) => void
item: The deleted GridFilterItem.
hasMultipleFilters*boolfalse
If true, the logic operator field is rendered. The field will be invisible if showMultiFilterOperators is also true.
item*{ field: string, id?: number
| string, operator: string, value?: any }
The GridFilterItem representing this form.
columnInputPropsany{}
Props passed to the column input component.
columnsSort'asc'
| 'desc'
Changes how the options in the columns selector should be ordered. If not specified, the order is derived from the columns prop.
deleteIconPropsany{}
Props passed to the delete icon.
disableMultiFilterOperatorboolfalse
If true, disables the logic operator field but still renders it.
filterColumnsfunc
Allows to filter the columns displayed in the filter form.

Signature:
function(args: FilterColumnsArgs) => void
args: The columns of the grid and name of field.
focusElementReffunc
| object
A ref allowing to set imperative focus. It can be passed to the el
logicOperatorInputPropsany{}
Props passed to the logic operator input component.
logicOperatorsArray<'and'
| 'or'>
[GridLogicOperator.And, GridLogicOperator.Or]
Sets the available logic operators.
multiFilterOperator'and'
| 'or'
The current logic operator applied.
operatorInputPropsany{}
Props passed to the operator input component.
showMultiFilterOperatorsboolfalse
If true, the logic operator field is visible.
valueInputPropsany{}
Props passed to the value input component.

The ref is forwarded to the root element.