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

Name	Type	Default	Description
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*	bool		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.
columnInputProps	any	{}	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.
deleteIconProps	any	{}	Props passed to the delete icon.
disableMultiFilterOperator	bool		If `true`, disables the logic operator field but still renders it.
filterColumns	func		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.
focusElementRef	func \| object		A ref allowing to set imperative focus. It can be passed to the el
logicOperatorInputProps	any	{}	Props passed to the logic operator input component.
logicOperators	Array<'and' \| 'or'>	[GridLogicOperator.And, GridLogicOperator.Or]	Sets the available logic operators.
operatorInputProps	any	{}	Props passed to the operator input component.
readOnly	bool	false	`true` if the filter is disabled/read only. i.e. `colDef.fiterable = false` but passed in `filterModel`
showMultiFilterOperators	bool		If `true`, the logic operator field is visible.
valueInputProps	any	{}	Props passed to the value input component.

The ref is forwarded to the root element.