Data Grid - Filter Panel component 🚧

Customize the Data Grid's filter panel.

The filter panel is enabled by default. Users can trigger the filter panel via the column menu, as well as from the toolbar when showToolbar is passed to the <DataGrid /> component.

You can use the Filter Panel Trigger and Toolbar components when you need to customize the filter panel trigger, or when implementing a custom toolbar.

Basic usage

The demo below shows how to add a filter panel trigger to a custom toolbar.

Anatomy

import { FilterPanelTrigger } from '@mui/x-data-grid';

<FilterPanelTrigger />;

Filter Panel Trigger

<FilterPanelTrigger /> is a button that opens and closes the filter panel. It renders the baseButton slot.

Describing the active filters

FilterPanelTrigger only reports filterCount to its render callback. It doesn't generate a description of the active filters. To show one (for example, in a tooltip), build it yourself from gridFilterActiveItemsSelector, which lists the currently active GridFilterItem objects:

Custom elements

Use the render prop to replace default elements. See Components usage—Customization for more details, and Toolbar—Custom elements demo for an example of a custom Filter Panel Trigger.

Accessibility

ARIA

You must apply a text label or an aria-label attribute to the <FilterPanelTrigger />.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <FilterPanelTrigger />