Data Grid - Computed Columns Panel component 🚧
Customize the Data Grid's computed columns panel.
The computed columns panel is part of the computed columns feature and is enabled by default when showToolbar is passed to the <DataGridPremium /> component and the formula feature is injected through featureDependencies.
To keep the default toolbar without the trigger, set slotProps.toolbar.showComputedColumnsButton to false.
You can use the Computed Columns Panel Trigger and Toolbar components when you need to customize the computed columns panel trigger, or when implementing a custom toolbar.
Basic usage
The demo below shows how to add a computed columns panel trigger to a custom toolbar.
Anatomy
import { ComputedColumnsPanelTrigger } from '@mui/x-data-grid-premium';
<ComputedColumnsPanelTrigger />;
Computed Columns Panel Trigger
<ComputedColumnsPanelTrigger /> is a button that opens and closes the computed columns panel.
It renders the baseButton slot.
The trigger renders nothing when computed columns are not available: when the formula feature is not injected through featureDependencies, when the disableComputedColumns, disableFormulas, or dataSource prop is set, or while pivoting is active.
Custom elements
Use the render prop to replace default elements.
See Components usage—Customization for more details.
Accessibility
ARIA
You must apply a text label or an aria-label attribute to the <ComputedColumnsPanelTrigger />.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.