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

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.