Data Grid - Quick Filter

Provide users with a 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 } from '@mui/x-data-grid';

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

Quick Filter

<QuickFilter /> is the top level component that provides context to child components. It does not render any DOM elements.

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.

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.

Accessibility

ARIA

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

Keyboard

API

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

• <QuickFilter />
• <QuickFilterClear />
• <QuickFilterControl />