Data Grid - Columns Panel 🚧

Customize the Data Grid's columns panel.

Basic usage

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

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

<ColumnsPanelTrigger />;

<ColumnsPanelTrigger /> is a button that opens and closes the columns 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 Columns Panel Trigger.

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

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