Skip to contentSkip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.

GridFilterPanelBase API

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

Demos

Import

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

Learn about the difference by reading this guide on minimizing bundle size.

Props

Required

The filter model edited by the panel.

Type:{ items: Array<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }

Required

Callback fired when the filter model is changed through the panel.

Type:func

Signature:
function(model: GridFilterModel) => void
  • model The new filter model.

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'

If true, the Add filter button will not be displayed.

Type:bool

Default:false

If true, filter value changes are applied immediately without debouncing.

Type:bool

Default:true

If true, the Remove all button will be disabled

Type:bool

Default:false

Props passed to each filter form.

Type:{ columnInputProps?: any, columnsSort?: 'asc'
| 'desc', deleteIconProps?: any, filterColumns?: func, logicOperatorInputProps?: any, operatorInputProps?: any, valueInputProps?: any }

Function that returns the next filter item to be picked as default filter.

Type:func

Signature:
function(args: GetColumnForNewFilterArgs) => void
  • args Currently configured filters and columns.

Sets the available logic operators.

Type:Array<'and'
| 'or'>

Default:[GridLogicOperator.And, GridLogicOperator.Or]

Callback fired when the panel requests to be closed, e.g. after the last filter is removed. In GridFilterPanel it hides the grid filter panel; for standalone usage it is a no-op unless provided.

Type:func

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

Type:Array<func
| object
| bool>
| func
| object

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.