跳转到内容

GridFilterForm API

想要学习更多组件属性和 CSS API,可以查阅 React GridFilterForm 组件的 API 文档。

导入

import { GridFilterForm } from '@mui/x-data-grid-premium';
// 或
import { GridFilterForm } from '@mui/x-data-grid-pro';
// 或
import { GridFilterForm } from '@mui/x-data-grid';
You can learn about the difference by reading this guide on minimizing bundle size.

组件名称

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

属性

名称类型默认值描述
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*boolfalse
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.
columnInputPropsany{}
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.
deleteIconPropsany{}
Props passed to the delete icon.
disableMultiFilterOperatorboolfalse
If true, disables the logic operator field but still renders it.
focusElementReffunc
| object
A ref allowing to set imperative focus. It can be passed to the el
linkOperatorInputPropsany{}
Props passed to the logic operator input component.
linkOperatorsArray<'and'
| 'or'>
[GridLinkOperator.And, GridLinkOperator.Or]
Sets the available logic operators.
multiFilterOperator'and'
| 'or'
The current logic operator applied.
operatorInputPropsany{}
Props passed to the operator input component.
showMultiFilterOperatorsboolfalse
If true, the logic operator field is visible.
valueInputPropsany{}
Props passed to the value input component.

ref 则会被传递到根元素中。

演示项目