Data Grid - Filter Panel 🚧

Customize the Data Grid's filter panel.

Basic usage

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

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

<FilterPanelTrigger />;

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

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.

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

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