GridFilterForm API

API documentation for the React GridFilterForm component. Learn about the available props and the CSS API.

Import

import { GridFilterForm } from '@mui/x-data-grid-premium';
// or
import { GridFilterForm } from '@mui/x-data-grid-pro';
// or
import { GridFilterForm } from '@mui/x-data-grid';

You can learn about the difference by reading this guide on minimizing bundle size.

Component name

The name MuiDataGrid can be used when providing default props or style overrides in the theme.

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: GridLinkOperator) => 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	false	If `true`, the logic operator field is rendered. The field will be invisible if `showMultiFilterOperators` is also `true`.
item^*	{ columnField: string, id?: number \| string, operatorValue?: 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	false	If `true`, disables the logic operator field but still renders it.
focusElementRef	func \| object		A ref allowing to set imperative focus. It can be passed to the el
linkOperatorInputProps	any	{}	Props passed to the logic operator input component.
linkOperators	Array<'and' \| 'or'>	[GridLinkOperator.And, GridLinkOperator.Or]	Sets the available logic operators.
multiFilterOperator	'and' \| 'or'		The current logic operator applied.
operatorInputProps	any	{}	Props passed to the operator input component.
showMultiFilterOperators	bool	false	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.

GridFilterForm API

Import

Component name

Props

Demos