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

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

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.