Data Grid - Columns Panel component 🚧
Customize the Data Grid's columns panel.
The columns panel is part of the column visibility feature and is enabled by default.
Users can trigger the columns panel via the column menu, as well as from the toolbar when showToolbar is passed to the <DataGrid /> component.
You can use the Columns Panel Trigger and Toolbar components when you need to customize the columns panel trigger, or when implementing a custom toolbar.
Basic usage
The demo below shows how to add a columns panel trigger to a custom toolbar.
Anatomy
import { ColumnsPanelTrigger } from '@mui/x-data-grid';
<ColumnsPanelTrigger />;
Columns Panel Trigger
<ColumnsPanelTrigger /> is a button that opens and closes the columns panel.
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 Columns Panel Trigger.
Accessibility
ARIA
You must apply a text label or an aria-label attribute to the <ColumnsPanelTrigger />.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.