Skip to content
Edit this page

GridFilterForm API

API reference docs for the React GridFilterForm component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import GridFilterForm from '/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx/GridFilterForm';
// or
import { GridFilterForm } from '/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx';
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]
multiFilterOperator

The current logic operator applied.

Type:

'and' | 'or'
operatorInputProps

Props passed to the operator input component.

Type:

any

Default:

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