GridFilterForm API

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

Component 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/components';
// or
import { GridFilterForm } from '@mui/x-data-grid';
// or
import { GridFilterForm } from '@mui/x-data-grid-pro';
// or
import { GridFilterForm } from '@mui/x-data-grid-premium';

Learn about the difference by reading this guide on minimizing bundle size.

Props

applyFilterChangesRequired

Callback called when the operator, column field or value is changed.

Type:func

Signature:

function(item: GridFilterItem) => void

item The updated GridFilterItem.

applyMultiFilterOperatorChangesRequired

Callback called when the logic operator is changed.

Type:func

Signature:

function(operator: GridLogicOperator) => void

operator The new logic operator.

deleteFilterRequired

Callback called when the delete button is clicked.

Type:func

Signature:

function(item: GridFilterItem) => void

item The deleted GridFilterItem.

hasMultipleFiltersRequired

If true, the logic operator field is rendered. The field will be invisible if showMultiFilterOperators is also true.

Type:bool

itemRequired

The GridFilterItem representing this form.

Type:{ field: string, id?: number | string, operator: string, value?: any }

columnInputProps

Props passed to the column input component.

Type:any

Default:{}

columnsSort

Changes how the options in the columns selector should be ordered. If not specified, the order is derived from the columns prop.

Type:'asc' | 'desc'

deleteIconProps

Props passed to the delete icon.

Type:any

Default:{}

disableMultiFilterOperator

If true, disables the logic operator field but still renders it.

Type:bool

filterColumns

Allows to filter the columns displayed in the filter form.

Type:func

Signature:

function(args: FilterColumnsArgs) => void

args The columns of the grid and name of field.

focusElementRef

A ref allowing to set imperative focus. It can be passed to the el

Type:func | object

logicOperatorInputProps

Props passed to the logic operator input component.

Type:any

Default:{}

logicOperators

Sets the available logic operators.

Type:Array<'and' | 'or'>

Default:[GridLogicOperator.And, GridLogicOperator.Or]

operatorInputProps

Props passed to the operator input component.

Type:any

Default:{}

readOnly

true if the filter is disabled/read only. i.e. colDef.fiterable = false but passed in filterModel

Type:bool

Default:false

showMultiFilterOperators

If true, the logic operator field is visible.

Type:bool

valueInputProps

Props passed to the value input component.

Type:any

Default:{}

The ref is forwarded to the root element.