Data Grid - Toolbar

Add custom actions and controls to the Data Grid.

Basic usage

The demo below shows the default toolbar configuration.

To extend the default toolbar, the code in the demo below can be copied and customized to your needs.

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

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

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

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

Below are some ways the Toolbar component can be used.

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

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

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.

The component follows the WAI-ARIA authoring practices.

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

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.

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