Skip to content
🚀 Influence MUI X's 2025 roadmap! Participate in the latest Developer Survey
+

Data Grid - Toolbar component

Add custom actions and controls to the Data Grid.

The default toolbar can be enabled by passing the showToolbar prop to the <DataGrid /> component.

You can use the Toolbar and various other Data Grid components when you need to customize the toolbar.

Basic usage

The demo below shows how to compose the Toolbar and various other components to look and behave like the built-in toolbar.

Anatomy

import { Toolbar, ToolbarButton } from '@mui/x-data-grid';

<Toolbar>
  <ToolbarButton />
</Toolbar>;

Toolbar

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

Toolbar Button

<ToolbarButton /> is a button for performing actions from the toolbar. It renders the baseIconButton slot.

Recipes

Below are some ways the Toolbar component can be used.

Settings menu

The demo below shows how to display an appearance settings menu on the toolbar. It uses local storage to persist the user's selections.

Filter bar

The demo below shows how to display active filter chips on the toolbar.

Row grouping toolbar

The demo below shows how to add a custom toolbar that enables creating and reordering groups with drag and drop.

Users can create groups by dragging column headers into the toolbar, reorder them by dragging the chips within the toolbar, and remove them by clicking the delete button.

Custom elements

Use the render prop to replace default elements. See Components usage—Customization for more details.

The demo below shows how to replace the default elements with custom ones, styled with Tailwind CSS.

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)

The component follows the WAI-ARIA authoring practices.

ARIA

  • The element rendered by the <Toolbar /> component has the toolbar role.
  • The element rendered by the <Toolbar /> component has aria-orientation set to horizontal.
  • You must apply a text label or an aria-label attribute to the <ToolbarButton />.

Keyboard

The Toolbar component supports keyboard navigation. It implements the roving tabindex pattern.

Keys Description
Tab Moves focus into and out of the toolbar.
Shift+Tab Moves focus into and out of the toolbar.
Left Moves focus to the previous button.
Right Moves focus to the next button.
Home Moves focus to the first button.
End Moves focus to the last button.

Legacy toolbar

The components above replaced the legacy toolbar, for example<GridToolbarContainer>.

API

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