Skip to contentSkip 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

Required

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

Type:func

Signature:
function(item: GridFilterItem) => void
Required

Callback called when the logic operator is changed.

Type:func

Signature:
function(operator: GridLogicOperator) => void
  • operator The new logic operator.
Required

Callback called when the delete button is clicked.

Type:func

Signature:
function(item: GridFilterItem) => void
Required

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

Type:bool

Required

The GridFilterItem representing this form.

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

Props passed to the column input component.

Type:any

Default:{}

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'

Props passed to the delete icon.

Type:any

Default:{}

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

Type:bool

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.

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

Type:func
| object

Props passed to the logic operator input component.

Type:any

Default:{}

Sets the available logic operators.

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

Default:[GridLogicOperator.And, GridLogicOperator.Or]

Props passed to the operator input component.

Type:any

Default:{}

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

Type:bool

Default:false

If true, the logic operator field is visible.

Type:bool

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.