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 />;

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

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 />