Data Grid - Quick Filter

Provide users with an expandable search field to filter data in the Data Grid.

Basic usage

The demo below shows the default quick filter configuration.

Anatomy

import {
  QuickFilter,
  QuickFilterControl,
  QuickFilterClear,
  QuickFilterTrigger,
} from '@mui/x-data-grid';

<QuickFilter>
  <QuickFilterTrigger />
  <QuickFilterControl />
  <QuickFilterClear />
</QuickFilter>;

Quick Filter

<QuickFilter /> is the top level component that provides context to child components. It renders a <div /> element.

Quick Filter Control

<QuickFilterControl /> takes user input and filters row data. It renders the baseTextField slot.

Quick Filter Clear

<QuickFilterClear /> is a button that resets the filter value. It renders the baseIconButton slot.

Quick Filter Trigger

<QuickFilterTrigger /> is a button that expands and collapses the quick filter. 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 Quick Filter.

Recipes

Below are some ways the Quick Filter component can be used.

Default expanded state

The quick filter is uncontrolled by default and can be toggled via the trigger. The defaultExpanded prop can be used to set the default expanded state.

Expand quick filter via keyboard

The demo below shows how to control the quick filter state using the expanded and onExpandedChange props to support expanding the quick filter via keyboard. You can try it by clicking on any cell to ensure the data grid has focus, and then pressing Cmd (or Ctrl on Windows)+P.

You must render a <label /> with a for attribute set to the id of <QuickFilterControl />, or apply an aria-label attribute to the <QuickFilterControl />.
You must apply a text label or an aria-label attribute to the <QuickFilterClear /> and <QuickFilterTrigger />.

Keyboard

Keys	Description
`Escape`	Clears quick filter value. If already empty, collapses the filter.

API

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