diff --git a/.eslintrc.js b/.eslintrc.js
index fac05b6d0e35..c9bfa88a5df2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -292,6 +292,7 @@ module.exports = {
'!@mui/internal-*/**',
// Exceptions (QUESTION: Keep or remove?)
+ '!@mui/x-data-grid/internals/demo',
'!@mui/x-date-pickers/internals/demo',
'!@mui/x-tree-view/hooks/useTreeViewApiRef',
// TODO: export this from /ButtonBase in core. This will break after we move to package exports
diff --git a/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js
new file mode 100644
index 000000000000..2327648fab76
--- /dev/null
+++ b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { DataGrid, Grid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+
+function Toolbar() {
+ return (
+
+
+ );
+}
+
+export default function GridColumnsPanelTrigger() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx
new file mode 100644
index 000000000000..2327648fab76
--- /dev/null
+++ b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { DataGrid, Grid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+
+function Toolbar() {
+ return (
+
+
+ );
+}
+
+export default function GridColumnsPanelTrigger() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx.preview b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx.preview
new file mode 100644
index 000000000000..6e44e64d1dbc
--- /dev/null
+++ b/docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx.preview
@@ -0,0 +1 @@
+Customize the columns panel UI.
+
+:::warning
+This component is incomplete.
+
+Currently, the only feature available for the Columns Panel component is the Trigger. In the future, this component will allow you to extend the data grid's columns panel.
+:::
+
+## Anatomy
+
+The `Grid.ColumnsPanel` component is comprised of the following parts.
+
+```tsx
+
+
+
+
+ );
+}
+
+function Toolbar() {
+ return (
+
+
+ );
+}
+
+export default function GridExportMenu() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/export/GridExportMenu.tsx b/docs/data/data-grid/components/export/GridExportMenu.tsx
new file mode 100644
index 000000000000..f3deba6ea47c
--- /dev/null
+++ b/docs/data/data-grid/components/export/GridExportMenu.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { DataGrid, Grid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+function ExportMenu() {
+ const [open, setOpen] = React.useState(false);
+ const triggerRef = React.useRef(null);
+
+ return (
+
+
+
+
+ );
+}
+
+function Toolbar() {
+ return (
+
+
+ );
+}
+
+export default function GridExportMenu() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/export/GridExportMenu.tsx.preview b/docs/data/data-grid/components/export/GridExportMenu.tsx.preview
new file mode 100644
index 000000000000..6e44e64d1dbc
--- /dev/null
+++ b/docs/data/data-grid/components/export/GridExportMenu.tsx.preview
@@ -0,0 +1 @@
+
+
+ );
+}
+
+export default function GridExportTrigger() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/export/GridExportTrigger.tsx b/docs/data/data-grid/components/export/GridExportTrigger.tsx
new file mode 100644
index 000000000000..91d62b0ddeeb
--- /dev/null
+++ b/docs/data/data-grid/components/export/GridExportTrigger.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid, Grid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import PrintIcon from '@mui/icons-material/Print';
+
+function Toolbar() {
+ return (
+
+
+ );
+}
+
+export default function GridExportTrigger() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/export/GridExportTrigger.tsx.preview b/docs/data/data-grid/components/export/GridExportTrigger.tsx.preview
new file mode 100644
index 000000000000..6e44e64d1dbc
--- /dev/null
+++ b/docs/data/data-grid/components/export/GridExportTrigger.tsx.preview
@@ -0,0 +1 @@
+Components to trigger exports of the Data Grid.
+
+## Anatomy
+
+The `Grid.Export` component is comprised of the following parts.
+
+```tsx
+
+
+ );
+}
+
+export default function GridFilterPanelTrigger() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx
new file mode 100644
index 000000000000..116f3e09b8a1
--- /dev/null
+++ b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { DataGrid, Grid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+function Toolbar() {
+ return (
+
+
+ );
+}
+
+export default function GridFilterPanelTrigger() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx.preview b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx.preview
new file mode 100644
index 000000000000..6e44e64d1dbc
--- /dev/null
+++ b/docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.tsx.preview
@@ -0,0 +1 @@
+Customize the filter panel UI.
+
+:::warning
+This component is incomplete.
+
+Currently, the only feature available for the Filter Panel component is the Trigger. In the future, this component will allow you to extend the data grid's filter panel.
+:::
+
+## Anatomy
+
+The `Grid.FilterPanel` component is comprised of the following parts.
+
+```tsx
+Data Grid components provide a way to extend the default UI via composable parts.
+
+## Introduction
+
+The `Grid` component is available to import from the same package as the `DataGrid` component. It consists of many parts that can be used in combination with [slots](/x/react-data-grid/components/) to extend the Data Grid.
+
+```tsx
+import { DataGrid, Grid } from '@mui/x-data-grid';
+
+function Toolbar() {
+ return (
+
+
+ );
+}
+
+function App() {
+ return (state.open ? 'text-blue-600' : 'text-gray-900')}
+/>
+```
+
+### render
+
+The `render` prop can be used to override the element rendered by each grid component:
+
+```tsx
+ (
+
+ {state.open ? 'Close filter panel' : 'Open filter panel'}
+
+ )}
+/>
+```
+
+## Components
+
+- [Toolbar](/x/react-data-grid/components/toolbar/)
+- [Columns Panel](/x/react-data-grid/components/columns-panel/)
+- [Filter Panel](/x/react-data-grid/components/filter-panel/)
+- [Export](/x/react-data-grid/components/export/)
diff --git a/docs/data/data-grid/components/toolbar/GridToolbar.js b/docs/data/data-grid/components/toolbar/GridToolbar.js
new file mode 100644
index 000000000000..651b6066cc72
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbar.js
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid, GridToolbarQuickFilter } from '@mui/x-data-grid';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import PrintIcon from '@mui/icons-material/Print';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import GridViewIcon from '@mui/icons-material/ViewModule';
+import ListViewIcon from '@mui/icons-material/ViewList';
+
+export default function GridToolbar() {
+ const [view, setView] = React.useState('grid');
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setView('grid')}
+ >
+
+ setView('list')}
+ >
+
+
+
+
+ );
+}
+
+const demoStyles = {
+ border: '1px solid',
+ borderColor: 'divider',
+ borderRadius: 1,
+ width: '100%',
+};
diff --git a/docs/data/data-grid/components/toolbar/GridToolbar.tsx b/docs/data/data-grid/components/toolbar/GridToolbar.tsx
new file mode 100644
index 000000000000..20f738afba86
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbar.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid, GridToolbarQuickFilter } from '@mui/x-data-grid';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import PrintIcon from '@mui/icons-material/Print';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import GridViewIcon from '@mui/icons-material/ViewModule';
+import ListViewIcon from '@mui/icons-material/ViewList';
+
+export default function GridToolbar() {
+ const [view, setView] = React.useState<'grid' | 'list'>('grid');
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setView('grid')}
+ >
+
+ setView('list')}
+ >
+
+
+
+
+ );
+}
+
+const demoStyles = {
+ border: '1px solid',
+ borderColor: 'divider',
+ borderRadius: 1,
+ width: '100%',
+};
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarButton.js b/docs/data/data-grid/components/toolbar/GridToolbarButton.js
new file mode 100644
index 000000000000..f803dcdc658a
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarButton.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid } from '@mui/x-data-grid';
+import PrintIcon from '@mui/icons-material/Print';
+
+export default function GridToolbarButton() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarButton.tsx b/docs/data/data-grid/components/toolbar/GridToolbarButton.tsx
new file mode 100644
index 000000000000..f803dcdc658a
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarButton.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid } from '@mui/x-data-grid';
+import PrintIcon from '@mui/icons-material/Print';
+
+export default function GridToolbarButton() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarButton.tsx.preview b/docs/data/data-grid/components/toolbar/GridToolbarButton.tsx.preview
new file mode 100644
index 000000000000..10c601462b52
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarButton.tsx.preview
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarDefault.js b/docs/data/data-grid/components/toolbar/GridToolbarDefault.js
new file mode 100644
index 000000000000..95e9590ee839
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarDefault.js
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { DataGrid, Grid, GridToolbarQuickFilter } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import Badge from '@mui/material/Badge';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import PrintIcon from '@mui/icons-material/Print';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import MenuItem from '@mui/material/MenuItem';
+
+function Toolbar() {
+ const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
+ const downloadMenuTriggerRef = React.useRef(null);
+
+ return (
+
+
+
+
+
+ (
+
+
+
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function GridToolbarDefault() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarDefault.tsx b/docs/data/data-grid/components/toolbar/GridToolbarDefault.tsx
new file mode 100644
index 000000000000..462867a810c2
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarDefault.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import {
+ DataGrid,
+ Grid,
+ GridToolbarButtonProps,
+ GridToolbarQuickFilter,
+} from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import Badge from '@mui/material/Badge';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import PrintIcon from '@mui/icons-material/Print';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import MenuItem from '@mui/material/MenuItem';
+
+function Toolbar() {
+ const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
+ const downloadMenuTriggerRef = React.useRef(null);
+
+ return (
+
+
+
+
+
+ (
+
+
+
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function GridToolbarDefault() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Commodity',
+ rowLength: 10,
+ maxColumns: 10,
+ });
+
+ return (
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarDefault.tsx.preview b/docs/data/data-grid/components/toolbar/GridToolbarDefault.tsx.preview
new file mode 100644
index 000000000000..6e44e64d1dbc
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarDefault.tsx.preview
@@ -0,0 +1 @@
+
+
+
+ {activeFilters.map((filter) => {
+ const column = columns[filter.field];
+ const field = column?.headerName ?? filter.field;
+ const operator = apiRef.current.getLocaleText(
+ `filterOperator${capitalize(filter.operator)}`,
+ );
+ const isDate = column?.type === 'date';
+ const value = isDate
+ ? new Date(filter.value).toLocaleDateString()
+ : (filter.value ?? '');
+
+ return (
+ onRemoveFilter(filter.id)}
+ sx={{ mx: 0.25 }}
+ />
+ );
+ })}
+
+ );
+}
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'position'];
+
+export default function GridToolbarFilterBar() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Employee',
+ visibleFields: VISIBLE_FIELDS,
+ rowLength: 100,
+ });
+
+ const [filterModel, setFilterModel] = React.useState({
+ items: [
+ {
+ id: 'rating',
+ field: 'rating',
+ operator: '>',
+ value: '2.5',
+ },
+ {
+ id: 'dateCreated',
+ field: 'dateCreated',
+ operator: 'before',
+ value: '2024-01-01',
+ },
+ ],
+ });
+
+ const onRemoveFilter = (filterId) => {
+ setFilterModel({
+ items: filterModel.items.filter((item) => item.id !== filterId),
+ });
+ };
+
+ return (
+
+ setFilterModel(newFilterModel)}
+ slots={{ toolbar: Toolbar }}
+ slotProps={{ toolbar: { onRemoveFilter } }}
+ />
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarFilterBar.tsx b/docs/data/data-grid/components/toolbar/GridToolbarFilterBar.tsx
new file mode 100644
index 000000000000..c1e3afab9a2d
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarFilterBar.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import {
+ DataGridPro,
+ gridColumnLookupSelector,
+ gridFilterActiveItemsSelector,
+ GridFilterItem,
+ GridFilterModel,
+ Grid,
+ useGridApiContext,
+ useGridSelector,
+ GridFilterListIcon,
+ GridToolbarProps,
+} from '@mui/x-data-grid-pro';
+import Chip from '@mui/material/Chip';
+import { unstable_capitalize as capitalize } from '@mui/utils';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+declare module '@mui/x-data-grid' {
+ interface ToolbarPropsOverrides {
+ onRemoveFilter: (filterId: GridFilterItem['id']) => void;
+ }
+}
+
+type ToolbarProps = GridToolbarProps & {
+ onRemoveFilter: (filterId: GridFilterItem['id']) => void;
+};
+
+function Toolbar({ onRemoveFilter, ...other }: ToolbarProps) {
+ const apiRef = useGridApiContext();
+ const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+ const columns = useGridSelector(apiRef, gridColumnLookupSelector);
+
+ return (
+
+
+
+ {activeFilters.map((filter) => {
+ const column = columns[filter.field];
+ const field = column?.headerName ?? filter.field;
+ const operator = apiRef.current.getLocaleText(
+ `filterOperator${capitalize(filter.operator)}` as 'filterOperatorContains',
+ );
+ const isDate = column?.type === 'date';
+ const value = isDate
+ ? new Date(filter.value).toLocaleDateString()
+ : (filter.value ?? '');
+
+ return (
+ onRemoveFilter(filter.id)}
+ sx={{ mx: 0.25 }}
+ />
+ );
+ })}
+
+ );
+}
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'position'];
+
+export default function GridToolbarFilterBar() {
+ const { data, loading } = useDemoData({
+ dataSet: 'Employee',
+ visibleFields: VISIBLE_FIELDS,
+ rowLength: 100,
+ });
+
+ const [filterModel, setFilterModel] = React.useState({
+ items: [
+ {
+ id: 'rating',
+ field: 'rating',
+ operator: '>',
+ value: '2.5',
+ },
+ {
+ id: 'dateCreated',
+ field: 'dateCreated',
+ operator: 'before',
+ value: '2024-01-01',
+ },
+ ],
+ });
+
+ const onRemoveFilter = (filterId: GridFilterItem['id']) => {
+ setFilterModel({
+ items: filterModel.items.filter((item) => item.id !== filterId),
+ });
+ };
+
+ return (
+
+ setFilterModel(newFilterModel)}
+ slots={{ toolbar: Toolbar }}
+ slotProps={{ toolbar: { onRemoveFilter } }}
+ />
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarFilterBar.tsx.preview b/docs/data/data-grid/components/toolbar/GridToolbarFilterBar.tsx.preview
new file mode 100644
index 000000000000..3746335e5f4a
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarFilterBar.tsx.preview
@@ -0,0 +1,8 @@
+ setFilterModel(newFilterModel)}
+ slots={{ toolbar: Toolbar }}
+ slotProps={{ toolbar: { onRemoveFilter } }}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.js b/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.js
new file mode 100644
index 000000000000..d260c2014f36
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid } from '@mui/x-data-grid';
+import PivotTableChartIcon from '@mui/icons-material/PivotTableChart';
+
+export default function GridToolbarToggleButton() {
+ const [pivotEnabled, setPivotEnabled] = React.useState(false);
+
+ return (
+
+ setPivotEnabled(!pivotEnabled)}
+ >
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.tsx b/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.tsx
new file mode 100644
index 000000000000..d260c2014f36
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid } from '@mui/x-data-grid';
+import PivotTableChartIcon from '@mui/icons-material/PivotTableChart';
+
+export default function GridToolbarToggleButton() {
+ const [pivotEnabled, setPivotEnabled] = React.useState(false);
+
+ return (
+
+ setPivotEnabled(!pivotEnabled)}
+ >
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.tsx.preview b/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.tsx.preview
new file mode 100644
index 000000000000..07f3051c65c9
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarToggleButton.tsx.preview
@@ -0,0 +1,8 @@
+ setPivotEnabled(!pivotEnabled)}
+>
+
\ No newline at end of file
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.js b/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.js
new file mode 100644
index 000000000000..ffc6edd5f03a
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.js
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid } from '@mui/x-data-grid';
+import GridViewIcon from '@mui/icons-material/ViewModule';
+import ListViewIcon from '@mui/icons-material/ViewList';
+
+export default function GridToolbarToggleButtonGroup() {
+ const [view, setView] = React.useState('grid');
+
+ return (
+
+
+ setView('grid')}
+ >
+
+ setView('list')}
+ >
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.tsx b/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.tsx
new file mode 100644
index 000000000000..ffc6edd5f03a
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-data-grid/internals/demo';
+import { Grid } from '@mui/x-data-grid';
+import GridViewIcon from '@mui/icons-material/ViewModule';
+import ListViewIcon from '@mui/icons-material/ViewList';
+
+export default function GridToolbarToggleButtonGroup() {
+ const [view, setView] = React.useState('grid');
+
+ return (
+
+
+ setView('grid')}
+ >
+
+ setView('list')}
+ >
+
+
+
+ );
+}
diff --git a/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.tsx.preview b/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.tsx.preview
new file mode 100644
index 000000000000..f378c8ee193c
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/GridToolbarToggleButtonGroup.tsx.preview
@@ -0,0 +1,16 @@
+
+ setView('grid')}
+ >
+
+ setView('list')}
+ >
+
+
\ No newline at end of file
diff --git a/docs/data/data-grid/components/toolbar/toolbar.md b/docs/data/data-grid/components/toolbar/toolbar.md
new file mode 100644
index 000000000000..be6d335dad7d
--- /dev/null
+++ b/docs/data/data-grid/components/toolbar/toolbar.md
@@ -0,0 +1,114 @@
+# Data Grid - Toolbar component
+
+The Toolbar component provides a way to add custom controls and functionality to the Data Grid.
+
+{{"demo": "GridToolbar.js"}}
+
+## Usage
+
+Import the `Grid` component. See [Grid components](/x/react-data-grid/components/overview/) for details.
+
+```tsx
+import { Grid } from '@mui/x-data-grid';
+```
+
+Create a toolbar using the `Grid.Toolbar` component.
+
+```tsx
+function Toolbar() {
+ return (
+
+
+
+ );
+}
+```
+
+Pass the component to the `toolbar` slot.
+
+```tsx
+
+
+
+
+```
+
+### Root
+
+The top level component that positions items in a row.
+
+Renders a `div` with `role="toolbar"`.
+
+### Button
+
+A button item that can be used to perform actions from the toolbar.
+
+See [ButtonBase API](/material-ui/api/button-base/) for available props.
+
+{{"demo": "GridToolbarButton.js"}}
+
+### ToggleButtonGroup
+
+A toggle button group that can be used to switch between multiple states.
+
+See [ToggleButtonGroup API](/material-ui/api/toggle-button/) for available props.
+
+{{"demo": "GridToolbarToggleButtonGroup.js"}}
+
+### ToggleButton
+
+A toggle button item that can be used to switch between two states.
+
+See [ToggleButton API](/material-ui/api/toggle-button-group/) for available props.
+
+{{"demo": "GridToolbarToggleButton.js"}}
+
+### Separator
+
+Separate items and groups in the toolbar.
+
+Renders a `div` with `role="separator"`.
+
+```tsx
+;
+}
+
+const GridColumnsPanelTrigger = React.forwardRef(
+ function GridColumnsPanelTrigger(props, ref) {
+ const { render, ...other } = props;
+ const rootProps = useGridRootProps();
+ const buttonId = useId();
+ const panelId = useId();
+ const apiRef = useGridApiContext();
+ const panelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+ const open =
+ panelState.open && panelState.openedPanelValue === GridPreferencePanelsValue.columns;
+
+ const toggleColumnsPanel = () => {
+ if (open) {
+ apiRef.current.hidePreferences();
+ } else {
+ apiRef.current.showPreferences(GridPreferencePanelsValue.columns, panelId, buttonId);
+ }
+ };
+
+ const { renderElement } = useGridComponentRenderer({
+ render,
+ defaultElement: rootProps.slots.baseButton,
+ props: {
+ ref,
+ id: buttonId,
+ 'aria-haspopup': 'true',
+ 'aria-expanded': open ? 'true' : undefined,
+ 'aria-controls': open ? panelId : undefined,
+ onClick: toggleColumnsPanel,
+ ...rootProps.slotProps?.baseButton,
+ ...other,
+ },
+ state: {
+ open,
+ },
+ });
+
+ return renderElement();
+ },
+);
+
+GridColumnsPanelTrigger.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { GridColumnsPanelTrigger };
diff --git a/packages/x-data-grid/src/components/grid/columnsPanel/index.parts.ts b/packages/x-data-grid/src/components/grid/columnsPanel/index.parts.ts
new file mode 100644
index 000000000000..bc186c21beec
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/columnsPanel/index.parts.ts
@@ -0,0 +1 @@
+export { GridColumnsPanelTrigger as Trigger } from './GridColumnsPanelTrigger';
diff --git a/packages/x-data-grid/src/components/grid/columnsPanel/index.ts b/packages/x-data-grid/src/components/grid/columnsPanel/index.ts
new file mode 100644
index 000000000000..e333d675352a
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/columnsPanel/index.ts
@@ -0,0 +1 @@
+export * from './GridColumnsPanelTrigger';
diff --git a/packages/x-data-grid/src/components/grid/export/GridExportTrigger.tsx b/packages/x-data-grid/src/components/grid/export/GridExportTrigger.tsx
new file mode 100644
index 000000000000..43a022f094e2
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/export/GridExportTrigger.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonProps } from '@mui/material/Button';
+import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import {
+ useGridComponentRenderer,
+ RenderProp,
+} from '../../../hooks/utils/useGridComponentRenderer';
+import { GridCsvExportOptions, GridPrintExportOptions } from '../../../models/gridExport';
+
+export interface GridExportTriggerState {}
+
+export type GridExportTriggerProps = ButtonProps & {
+ // eslint-disable-next-line react/no-unused-prop-types
+ render?: RenderProp;
+} & (
+ | {
+ exportType: 'csv';
+ exportOptions?: GridCsvExportOptions;
+ }
+ | {
+ exportType: 'print';
+ exportOptions?: GridPrintExportOptions;
+ }
+ );
+
+const GridExportTrigger = React.forwardRef(
+ function GridExportTrigger(props, ref) {
+ const { render, exportType, exportOptions, onClick, ...other } = props;
+ const rootProps = useGridRootProps();
+ const apiRef = useGridApiContext();
+
+ const handleClick = (event: React.MouseEvent) => {
+ switch (exportType) {
+ case 'csv':
+ apiRef.current.exportDataAsCsv(exportOptions);
+ break;
+ case 'print':
+ apiRef.current.exportDataAsPrint(exportOptions);
+ break;
+ default:
+ break;
+ }
+
+ onClick?.(event);
+ };
+
+ const { renderElement } = useGridComponentRenderer({
+ render,
+ defaultElement: rootProps.slots.baseButton,
+ props: {
+ ref,
+ onClick: handleClick,
+ ...rootProps.slotProps?.baseButton,
+ ...other,
+ },
+ });
+
+ return renderElement();
+ },
+);
+
+GridExportTrigger.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ exportOptions: PropTypes.oneOfType([
+ PropTypes.shape({
+ allColumns: PropTypes.bool,
+ delimiter: PropTypes.string,
+ escapeFormulas: PropTypes.bool,
+ fields: PropTypes.arrayOf(PropTypes.string),
+ fileName: PropTypes.string,
+ getRowsToExport: PropTypes.func,
+ includeColumnGroupsHeaders: PropTypes.bool,
+ includeHeaders: PropTypes.bool,
+ shouldAppendQuotes: PropTypes.bool,
+ utf8WithBom: PropTypes.bool,
+ }),
+ PropTypes.shape({
+ allColumns: PropTypes.bool,
+ bodyClassName: PropTypes.string,
+ copyStyles: PropTypes.bool,
+ fields: PropTypes.arrayOf(PropTypes.string),
+ fileName: PropTypes.string,
+ getRowsToExport: PropTypes.func,
+ hideFooter: PropTypes.bool,
+ hideToolbar: PropTypes.bool,
+ includeCheckboxes: PropTypes.bool,
+ pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ }),
+ ]),
+ exportType: PropTypes.oneOf(['csv', 'print']).isRequired,
+ render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { GridExportTrigger };
diff --git a/packages/x-data-grid/src/components/grid/export/index.parts.ts b/packages/x-data-grid/src/components/grid/export/index.parts.ts
new file mode 100644
index 000000000000..4c127d0970da
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/export/index.parts.ts
@@ -0,0 +1 @@
+export { GridExportTrigger as Trigger } from './GridExportTrigger';
diff --git a/packages/x-data-grid/src/components/grid/export/index.ts b/packages/x-data-grid/src/components/grid/export/index.ts
new file mode 100644
index 000000000000..ee8950a789fb
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/export/index.ts
@@ -0,0 +1 @@
+export * from './GridExportTrigger';
diff --git a/packages/x-data-grid/src/components/grid/filterPanel/GridFilterPanelTrigger.tsx b/packages/x-data-grid/src/components/grid/filterPanel/GridFilterPanelTrigger.tsx
new file mode 100644
index 000000000000..e542c569ec16
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/filterPanel/GridFilterPanelTrigger.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useId from '@mui/utils/useId';
+import { ButtonProps } from '@mui/material/Button';
+import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
+import {
+ gridFilterActiveItemsSelector,
+ gridPreferencePanelStateSelector,
+ GridPreferencePanelsValue,
+ useGridSelector,
+} from '../../../hooks';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import {
+ useGridComponentRenderer,
+ RenderProp,
+} from '../../../hooks/utils/useGridComponentRenderer';
+
+export interface GridFilterPanelTriggerState {
+ open: boolean;
+ filterCount: number;
+}
+
+export interface GridFilterPanelTriggerProps extends ButtonProps {
+ render?: RenderProp;
+}
+
+const GridFilterPanelTrigger = React.forwardRef(
+ function GridFilterPanelTrigger(props, ref) {
+ const { render, ...other } = props;
+ const rootProps = useGridRootProps();
+ const buttonId = useId();
+ const panelId = useId();
+ const apiRef = useGridApiContext();
+ const panelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+ const open =
+ panelState.open && panelState.openedPanelValue === GridPreferencePanelsValue.filters;
+ const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
+ const filterCount = activeFilters.length;
+
+ const toggleFilterPanel = () => {
+ if (open) {
+ apiRef.current.hidePreferences();
+ } else {
+ apiRef.current.showPreferences(GridPreferencePanelsValue.filters, panelId, buttonId);
+ }
+ };
+
+ const { renderElement } = useGridComponentRenderer({
+ render,
+ defaultElement: rootProps.slots.baseButton,
+ props: {
+ ref,
+ id: buttonId,
+ 'aria-haspopup': 'true',
+ 'aria-expanded': open ? 'true' : undefined,
+ 'aria-controls': open ? panelId : undefined,
+ onClick: toggleFilterPanel,
+ ...rootProps.slotProps?.baseButton,
+ ...other,
+ },
+ state: {
+ open,
+ filterCount,
+ },
+ });
+
+ return renderElement();
+ },
+);
+
+GridFilterPanelTrigger.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+export { GridFilterPanelTrigger };
diff --git a/packages/x-data-grid/src/components/grid/filterPanel/index.parts.ts b/packages/x-data-grid/src/components/grid/filterPanel/index.parts.ts
new file mode 100644
index 000000000000..9dee45abc9bb
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/filterPanel/index.parts.ts
@@ -0,0 +1 @@
+export { GridFilterPanelTrigger as Trigger } from './GridFilterPanelTrigger';
diff --git a/packages/x-data-grid/src/components/grid/filterPanel/index.ts b/packages/x-data-grid/src/components/grid/filterPanel/index.ts
new file mode 100644
index 000000000000..f77de815994c
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/filterPanel/index.ts
@@ -0,0 +1 @@
+export * from './GridFilterPanelTrigger';
diff --git a/packages/x-data-grid/src/components/grid/index.parts.ts b/packages/x-data-grid/src/components/grid/index.parts.ts
new file mode 100644
index 000000000000..375a00124f3c
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/index.parts.ts
@@ -0,0 +1,4 @@
+export * as Toolbar from './toolbar/index.parts';
+export * as FilterPanel from './filterPanel/index.parts';
+export * as ColumnsPanel from './columnsPanel/index.parts';
+export * as Export from './export/index.parts';
diff --git a/packages/x-data-grid/src/components/grid/index.ts b/packages/x-data-grid/src/components/grid/index.ts
new file mode 100644
index 000000000000..a5c9c08b73f2
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/index.ts
@@ -0,0 +1,4 @@
+export * from './columnsPanel';
+export * from './export';
+export * from './filterPanel';
+export * from './toolbar';
diff --git a/packages/x-data-grid/src/components/grid/toolbar/GridToolbarButton.tsx b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarButton.tsx
new file mode 100644
index 000000000000..ab3ea11d892d
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarButton.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { alpha, styled } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import clsx from 'clsx';
+import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../../constants/gridClasses';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+
+export type GridToolbarButtonProps = ButtonBaseProps & {
+ color?: 'standard' | 'primary';
+};
+
+type OwnerState = DataGridProcessedProps;
+
+const useUtilityClasses = (ownerState: OwnerState) => {
+ const { classes } = ownerState;
+
+ const slots = {
+ root: ['toolbarButton'],
+ };
+
+ return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+// Based on @mui/material/ToggleButton styles
+const StyledGridToolbarButton = styled(ButtonBase, {
+ name: 'MuiDataGrid',
+ slot: 'ToolbarButton',
+ overridesResolver: (_, styles) => styles.toolbarButton,
+})<{ ownerState: OwnerState; selected?: boolean }>(({ theme }) => ({
+ ...theme.typography.button,
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(1),
+ borderRadius: (theme.vars || theme).shape.borderRadius,
+ padding: 7,
+ minHeight: 34,
+ fontSize: theme.typography.pxToRem(13),
+ lineHeight: 'normal',
+ color: (theme.vars || theme).palette.action.active,
+ '&:disabled': {
+ color: (theme.vars || theme).palette.action.disabled,
+ border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
+ },
+ '&:hover': {
+ textDecoration: 'none',
+ // Reset on mouse devices
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})`
+ : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+ '@media (hover: none)': {
+ backgroundColor: 'transparent',
+ },
+ },
+ variants: [
+ {
+ props: { selected: true, color: 'standard' },
+ style: {
+ color: (theme.vars || theme).palette.text.primary,
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})`
+ : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+ '&:hover': {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+ : alpha(
+ theme.palette.text.primary,
+ theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+ ),
+ // Reset on touch devices, it doesn't add specificity
+ '@media (hover: none)': {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})`
+ : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+ },
+ },
+ },
+ },
+ {
+ props: { color: 'primary' },
+ style: {
+ color: (theme.vars || theme).palette.primary.main,
+ },
+ },
+ {
+ props: { selected: true, color: 'primary' },
+ style: {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
+ : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+ '&:hover': {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
+ : alpha(
+ theme.palette.primary.main,
+ theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
+ ),
+ // Reset on touch devices, it doesn't add specificity
+ '@media (hover: none)': {
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
+ : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+ },
+ },
+ },
+ },
+ ],
+}));
+
+const GridToolbarButton = React.forwardRef(
+ function GridToolbarButton(props, ref) {
+ const { children, className, color = 'standard', ...other } = props;
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+export { GridToolbarButton };
diff --git a/packages/x-data-grid/src/components/grid/toolbar/GridToolbarRoot.tsx b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarRoot.tsx
new file mode 100644
index 000000000000..91a0d327c586
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarRoot.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled, SxProps, Theme } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass } from '../../../constants/gridClasses';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+
+export type GridToolbarRootProps = React.HTMLAttributes & {
+ sx?: SxProps;
+};
+
+type OwnerState = DataGridProcessedProps;
+
+const useUtilityClasses = (ownerState: OwnerState) => {
+ const { classes } = ownerState;
+
+ const slots = {
+ root: ['toolbarRoot'],
+ };
+
+ return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const StyledGridToolbarRoot = styled('div', {
+ name: 'MuiDataGrid',
+ slot: 'ToolbarRoot',
+ overridesResolver: (_, styles) => styles.toolbarRoot,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+ display: 'flex',
+ alignItems: 'center',
+ gap: theme.spacing(0.25),
+ padding: theme.spacing(0.5),
+ minHeight: 45,
+ borderBottom: `1px solid ${theme.palette.divider}`,
+}));
+
+const GridToolbarRoot = React.forwardRef(
+ function GridToolbarRoot(props, ref) {
+ const { className, children, ...other } = props;
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+ if (!children) {
+ return null;
+ }
+
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+GridToolbarRoot.propTypes = {
+ // ----------------------------- Warning --------------------------------
+ // | These PropTypes are generated from the TypeScript type definitions |
+ // | To update them edit the TypeScript types and run "pnpm proptypes" |
+ // ----------------------------------------------------------------------
+ sx: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+ PropTypes.func,
+ PropTypes.object,
+ ]),
+} as any;
+
+export { GridToolbarRoot };
diff --git a/packages/x-data-grid/src/components/grid/toolbar/GridToolbarSeparator.tsx b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarSeparator.tsx
new file mode 100644
index 000000000000..62c3aa1794d5
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarSeparator.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled, SxProps, Theme } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import clsx from 'clsx';
+import { getDataGridUtilityClass } from '../../../constants/gridClasses';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+
+export interface GridToolbarSeparatorProps extends React.HTMLAttributes {
+ sx?: SxProps;
+}
+
+type OwnerState = DataGridProcessedProps;
+
+const useUtilityClasses = (ownerState: OwnerState) => {
+ const { classes } = ownerState;
+
+ const slots = {
+ root: ['toolbarSeparator'],
+ };
+
+ return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const Separator = styled('div', {
+ name: 'MuiDataGrid',
+ slot: 'Separator',
+ overridesResolver: (_, styles) => styles.separator,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+ height: 24,
+ width: 1,
+ margin: theme.spacing(0.25),
+ backgroundColor: theme.palette.divider,
+}));
+
+function GridToolbarSeparator(props: GridToolbarSeparatorProps) {
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+ const { className, ...other } = props;
+
+ return (
+ (
+ function GridToolbarToggleButton(props, ref) {
+ const { children, className, size = 'small', ...other } = props;
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+export { GridToolbarToggleButton };
diff --git a/packages/x-data-grid/src/components/grid/toolbar/GridToolbarToggleButtonGroup.tsx b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarToggleButtonGroup.tsx
new file mode 100644
index 000000000000..e8c25e13dd33
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/toolbar/GridToolbarToggleButtonGroup.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
+import composeClasses from '@mui/utils/composeClasses';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { getDataGridUtilityClass } from '../../../constants/gridClasses';
+
+export type GridToolbarToggleButtonGroupProps = ToggleButtonGroupProps;
+
+type OwnerState = DataGridProcessedProps;
+
+const useUtilityClasses = (ownerState: OwnerState) => {
+ const { classes } = ownerState;
+
+ const slots = {
+ root: ['toolbarToggleButtonGroup'],
+ };
+
+ return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridToolbarToggleButtonGroup(props: GridToolbarToggleButtonGroupProps) {
+ const rootProps = useGridRootProps();
+ const classes = useUtilityClasses(rootProps);
+ const { children, className, ...other } = props;
+
+ return (
+
+ {children}
+
+ );
+}
+
+export { GridToolbarToggleButtonGroup };
diff --git a/packages/x-data-grid/src/components/grid/toolbar/index.parts.ts b/packages/x-data-grid/src/components/grid/toolbar/index.parts.ts
new file mode 100644
index 000000000000..5019e808c303
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/toolbar/index.parts.ts
@@ -0,0 +1,5 @@
+export { GridToolbarRoot as Root } from './GridToolbarRoot';
+export { GridToolbarButton as Button } from './GridToolbarButton';
+export { GridToolbarToggleButton as ToggleButton } from './GridToolbarToggleButton';
+export { GridToolbarToggleButtonGroup as ToggleButtonGroup } from './GridToolbarToggleButtonGroup';
+export { GridToolbarSeparator as Separator } from './GridToolbarSeparator';
diff --git a/packages/x-data-grid/src/components/grid/toolbar/index.ts b/packages/x-data-grid/src/components/grid/toolbar/index.ts
new file mode 100644
index 000000000000..9c113a2dfc28
--- /dev/null
+++ b/packages/x-data-grid/src/components/grid/toolbar/index.ts
@@ -0,0 +1,5 @@
+export * from './GridToolbarRoot';
+export * from './GridToolbarSeparator';
+export * from './GridToolbarButton';
+export * from './GridToolbarToggleButtonGroup';
+export * from './GridToolbarToggleButton';
diff --git a/packages/x-data-grid/src/components/index.ts b/packages/x-data-grid/src/components/index.ts
index 2657dac0cd89..579b7fdcb718 100644
--- a/packages/x-data-grid/src/components/index.ts
+++ b/packages/x-data-grid/src/components/index.ts
@@ -18,3 +18,6 @@ export { GridPagination } from './GridPagination';
export * from './GridRowCount';
export * from './GridRow';
export * from './GridSelectedRowCount';
+
+export * from './grid';
+export * as Grid from './grid/index.parts';
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
index 29a4a8c637f6..00fc6d21044e 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -155,7 +155,7 @@ const GridToolbarFilterButton = React.forwardRef
-
+
+ ),
endAdornment: (
-
-
+
+
+
+
),
...other.InputProps,
}}
diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
index 30e9df86d3d0..99bdf2405097 100644
--- a/packages/x-data-grid/src/constants/gridClasses.ts
+++ b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -592,6 +592,26 @@ export interface GridClasses {
* Styles applied to the toolbar filter list element.
*/
toolbarFilterList: string;
+ /**
+ * Styles applied to the toolbar root element.
+ */
+ toolbarRoot: string;
+ /**
+ * Styles applied to the toolbar button element.
+ */
+ toolbarButton: string;
+ /**
+ * Styles applied to the toolbar separator element.
+ */
+ toolbarSeparator: string;
+ /**
+ * Styles applied to the toolbar toggle button element.
+ */
+ toolbarToggleButton: string;
+ /**
+ * Styles applied to the toolbar toggle button group element.
+ */
+ toolbarToggleButtonGroup: string;
/**
* Styles applied to the toolbar prompt control element.
*/
@@ -823,6 +843,9 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [
'sortIcon',
'toolbarContainer',
'toolbarFilterList',
+ 'toolbarSeparator',
+ 'toolbarToggleButton',
+ 'toolbarToggleButtonGroup',
'toolbarPromptControl',
'toolbarPromptControl--recording',
'toolbarPromptControlRecordingIndicator',
diff --git a/packages/x-data-grid/src/hooks/utils/index.ts b/packages/x-data-grid/src/hooks/utils/index.ts
index 642c9db07366..2cdb466cd76e 100644
--- a/packages/x-data-grid/src/hooks/utils/index.ts
+++ b/packages/x-data-grid/src/hooks/utils/index.ts
@@ -6,3 +6,4 @@ export * from './useGridNativeEventListener';
export * from './useFirstRender';
export * from './useOnMount';
export * from './useRunOnce';
+export * from './useGridComponentRenderer';
diff --git a/packages/x-data-grid/src/hooks/utils/useGridComponentRenderer.test.tsx b/packages/x-data-grid/src/hooks/utils/useGridComponentRenderer.test.tsx
new file mode 100644
index 000000000000..8134a80e3ebc
--- /dev/null
+++ b/packages/x-data-grid/src/hooks/utils/useGridComponentRenderer.test.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer, screen } from '@mui/internal-test-utils';
+import Box, { BoxProps } from '@mui/material/Box';
+import { RenderProp, useGridComponentRenderer } from './useGridComponentRenderer';
+
+const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+describe('useGridComponentRenderer', () => {
+ const { render } = createRenderer();
+
+ function TestComponent(
+ props: React.ComponentPropsWithoutRef<'button'> & {
+ render?: RenderProp<{ someState: string }>;
+ },
+ ) {
+ const { render: renderProp, ...other } = props;
+ const { renderElement } = useGridComponentRenderer({
+ defaultElement: 'button',
+ props: other,
+ render: renderProp,
+ state: { someState: 'state value' },
+ });
+ return renderElement();
+ }
+
+ it('should render intrinsic element type as default element', () => {
+ render(children );
+ expect(screen.getByTestId('rendered-element')).to.be.instanceOf(window.HTMLButtonElement);
+ expect(screen.getByTestId('rendered-element')).to.have.text('children');
+ });
+
+ it('should render component type as default element', () => {
+ function CustomButton(props: React.ComponentPropsWithoutRef<'button'>) {
+ return
+ children
+ ,
+ );
+ expect(screen.getByTestId('rendered-element')).to.be.instanceOf(window.HTMLButtonElement);
+ expect(screen.getByTestId('rendered-element')).to.have.text('children');
+ });
+
+ it('should allow default element to be overridden by render prop set to a children', () => {
+ render(children} />);
+ expect(screen.getByTestId('rendered-element')).to.be.instanceOf(window.HTMLDivElement);
+ expect(screen.getByTestId('rendered-element')).to.have.text('children');
+ });
+
+ it('should allow default element to be overridden by render prop set to a function', () => {
+ render(
+ children
}
+ />,
+ );
+ expect(screen.getByTestId('rendered-element')).to.be.instanceOf(window.HTMLDivElement);
+ expect(screen.getByTestId('rendered-element')).to.have.text('children');
+ });
+
+ it('should pass state to render prop', () => {
+ render(
+ {state.someState}
}
+ />,
+ );
+ expect(screen.getByTestId('rendered-element')).to.be.instanceOf(window.HTMLDivElement);
+ expect(screen.getByTestId('rendered-element')).to.have.text('state value');
+ });
+
+ it('should merge className props', () => {
+ render(
+ ,
+ });
+ return renderElement();
+ }
+ render(
+ & {
+ [key: `data-${string}`]: string | undefined;
+};
+
+export type ComponentRenderFn = (
+ props: Props,
+ state: State,
+) => React.ReactElement;
+
+export type RenderProp =
+ | ComponentRenderFn
+ | React.ReactElement;
+
+type GridComponentRendererOptions = {
+ defaultElement: keyof JSX.IntrinsicElements | React.ComponentType;
+ props: Props;
+ state?: State;
+ render?: RenderProp;
+};
+
+/**
+ * Returns a function that renders a component.
+ *
+ * @ignore - internal hook.
+ */
+export function useGridComponentRenderer<
+ Props extends ExtendedHTMLAttributes,
+ State extends Record,
+>({
+ defaultElement,
+ props,
+ state = {} as State,
+ render,
+}: GridComponentRendererOptions) {
+ const renderElement = () => {
+ if (typeof render === 'function') {
+ return render(props, state);
+ }
+
+ if (render) {
+ const className = clsx(render.props.className, props.className);
+ const style = { ...render.props.style, ...props.style };
+ const sx = mergeSx(render.props.sx, (props as any).sx);
+ return React.cloneElement(render, { ...props, className, style, sx });
+ }
+
+ return React.createElement(defaultElement, props);
+ };
+
+ return { renderElement };
+}
+
+function mergeSx(sx1: SxProps | undefined, sx2: SxProps | undefined) {
+ if (!sx1 && !sx2) {
+ return undefined;
+ }
+ if (!sx1 || !sx2) {
+ return sx1 || sx2;
+ }
+ return [...(Array.isArray(sx1) ? sx1 : [sx1]), ...(Array.isArray(sx2) ? sx2 : [sx2])];
+}
diff --git a/packages/x-data-grid/src/internals/demo/DemoContainer.tsx b/packages/x-data-grid/src/internals/demo/DemoContainer.tsx
new file mode 100644
index 000000000000..431ef37287ab
--- /dev/null
+++ b/packages/x-data-grid/src/internals/demo/DemoContainer.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridContextProvider } from '../../context/GridContextProvider';
+import { useDataGridProps } from '../../DataGrid/useDataGridProps';
+import { useDataGridComponent } from '../../DataGrid/useDataGridComponent';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { useGridRowAriaAttributes } from '../../hooks/features/rows/useGridRowAriaAttributes';
+import { DataGridProps } from '../../models/props/DataGridProps';
+import { GridValidRowModel } from '../../models/gridRows';
+
+interface DemoContainerProps extends Partial> {
+ children: React.ReactNode;
+}
+
+const CONFIGURATION = {
+ hooks: {
+ useGridAriaAttributes,
+ useGridRowAriaAttributes,
+ },
+};
+
+const DEFAULT_COLUMNS: GridColDef[] = [];
+
+/**
+ * WARNING: This is an internal component used in documentation to provide the required context for demos.
+ * Please do not use it in your application.
+ */
+export function DemoContainer(inProps: DemoContainerProps) {
+ const { children } = inProps;
+
+ const props = useDataGridProps({ columns: DEFAULT_COLUMNS, ...inProps });
+ const privateApiRef = useDataGridComponent(props.apiRef, props);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/x-data-grid/src/internals/demo/index.ts b/packages/x-data-grid/src/internals/demo/index.ts
new file mode 100644
index 000000000000..2fc02015f52c
--- /dev/null
+++ b/packages/x-data-grid/src/internals/demo/index.ts
@@ -0,0 +1 @@
+export { DemoContainer } from './DemoContainer';
diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts
index 6988f682d169..f545bec096b4 100644
--- a/packages/x-data-grid/src/internals/index.ts
+++ b/packages/x-data-grid/src/internals/index.ts
@@ -181,3 +181,5 @@ export { serializeCellValue } from '../hooks/features/export/serializers/csvSeri
export * from './utils';
export * from './constants';
export type { Localization } from '../utils/getGridLocalization';
+
+export * from './demo';
diff --git a/packages/x-data-grid/src/material/icons/index.tsx b/packages/x-data-grid/src/material/icons/index.tsx
index 0f3c0946bf97..71e49d82a342 100644
--- a/packages/x-data-grid/src/material/icons/index.tsx
+++ b/packages/x-data-grid/src/material/icons/index.tsx
@@ -46,7 +46,7 @@ export const GridCheckCircleIcon = createSvgIcon(
);
export const GridColumnIcon = createSvgIcon(
- ;
/**
* Icon displayed on the open export button present in the toolbar by default.
- * @default GridSaveAltIcon
+ * @default GridFileDownloadIcon
*/
exportIcon: React.JSXElementConstructor;
/**
diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts
index c9c38a0fe356..07e1fb5e3a60 100644
--- a/packages/x-data-grid/src/models/gridSlotsComponent.ts
+++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts
@@ -85,6 +85,16 @@ export interface GridBaseSlots {
* @default MenuItem
*/
baseSelectOption: React.JSXElementConstructor;
+ /**
+ * The custom ToggleButton component used in the grid.
+ * @default ToggleButton
+ */
+ baseToggleButton: React.JSXElementConstructor;
+ /**
+ * The custom ToggleButtonGroup component used in the grid.
+ * @default ToggleButtonGroup
+ */
+ baseToggleButtonGroup: React.JSXElementConstructor;
}
/**
diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
index 8b709b41a55b..5b1fcc88e7b9 100644
--- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
+++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -15,6 +15,8 @@ import type { InputLabelProps } from '@mui/material/InputLabel';
import type { PopperProps } from '@mui/material/Popper';
import type { TablePaginationProps } from '@mui/material/TablePagination';
import type { ChipProps } from '@mui/material/Chip';
+import type { ToggleButtonProps } from '@mui/material/ToggleButton';
+import type { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
import type { GridToolbarProps } from '../components/toolbar/GridToolbar';
import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
@@ -54,6 +56,8 @@ export interface BasePopperPropsOverrides {}
export interface BaseInputLabelPropsOverrides {}
export interface BaseSelectOptionPropsOverrides {}
export interface BaseChipPropsOverrides {}
+export interface BaseToggleButtonPropsOverrides {}
+export interface BaseToggleButtonGroupPropsOverrides {}
export interface CellPropsOverrides {}
export interface ToolbarPropsOverrides {}
export interface ColumnHeaderFilterIconButtonPropsOverrides {}
@@ -95,6 +99,8 @@ export interface GridSlotProps {
value: any;
children?: React.ReactNode;
} & BaseSelectOptionPropsOverrides;
+ baseToggleButton: ToggleButtonProps & BaseToggleButtonPropsOverrides;
+ baseToggleButtonGroup: ToggleButtonGroupProps & BaseToggleButtonGroupPropsOverrides;
baseChip: ChipProps & BaseChipPropsOverrides;
cell: GridCellProps & CellPropsOverrides;
columnHeaders: GridColumnHeadersProps;
diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
index 99ca439203b8..ddb955f86eec 100644
--- a/scripts/x-data-grid-premium.exports.json
+++ b/scripts/x-data-grid-premium.exports.json
@@ -15,6 +15,8 @@
{ "name": "BaseSelectPropsOverrides", "kind": "Interface" },
{ "name": "BaseSwitchPropsOverrides", "kind": "Interface" },
{ "name": "BaseTextFieldPropsOverrides", "kind": "Interface" },
+ { "name": "BaseToggleButtonGroupPropsOverrides", "kind": "Interface" },
+ { "name": "BaseToggleButtonPropsOverrides", "kind": "Interface" },
{ "name": "BaseTooltipPropsOverrides", "kind": "Interface" },
{ "name": "CellPropsOverrides", "kind": "Interface" },
{ "name": "checkGridRowIdIsValid", "kind": "Function" },
@@ -27,6 +29,7 @@
{ "name": "ColumnsStylesInterface", "kind": "Interface" },
{ "name": "COMFORTABLE_DENSITY_FACTOR", "kind": "Variable" },
{ "name": "COMPACT_DENSITY_FACTOR", "kind": "Variable" },
+ { "name": "ComponentRenderFn", "kind": "TypeAlias" },
{ "name": "createUseGridApiEventHandler", "kind": "Function" },
{ "name": "CursorCoordinates", "kind": "Interface" },
{ "name": "DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES", "kind": "Variable" },
@@ -61,6 +64,7 @@
{ "name": "getGridStringQuickFilterFn", "kind": "Variable" },
{ "name": "getGroupRowIdFromPath", "kind": "Variable" },
{ "name": "getRowGroupingFieldFromGroupingCriteria", "kind": "Variable" },
+ { "name": "Grid", "kind": "NamespaceExport" },
{ "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" },
{ "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" },
{ "name": "GRID_AGGREGATION_FUNCTIONS", "kind": "Variable" },
@@ -228,6 +232,9 @@
{ "name": "GridColumnsMeta", "kind": "Interface" },
{ "name": "GridColumnsPanel", "kind": "Function" },
{ "name": "GridColumnsPanelProps", "kind": "Interface" },
+ { "name": "GridColumnsPanelTrigger", "kind": "Variable" },
+ { "name": "GridColumnsPanelTriggerProps", "kind": "Interface" },
+ { "name": "GridColumnsPanelTriggerState", "kind": "Interface" },
{ "name": "GridColumnsRawState", "kind": "TypeAlias" },
{ "name": "GridColumnsRenderContext", "kind": "Interface" },
{ "name": "GridColumnsState", "kind": "Interface" },
@@ -319,8 +326,12 @@
{ "name": "GridExportMenuItemProps", "kind": "Interface" },
{ "name": "GridExportOptions", "kind": "Interface" },
{ "name": "GridExportStateParams", "kind": "Interface" },
+ { "name": "GridExportTrigger", "kind": "Variable" },
+ { "name": "GridExportTriggerProps", "kind": "TypeAlias" },
+ { "name": "GridExportTriggerState", "kind": "Interface" },
{ "name": "GridFeatureMode", "kind": "TypeAlias" },
{ "name": "GridFetchRowsParams", "kind": "Interface" },
+ { "name": "GridFileDownloadIcon", "kind": "Variable" },
{ "name": "GridFileExportOptions", "kind": "Interface" },
{ "name": "gridFilterableColumnDefinitionsSelector", "kind": "Variable" },
{ "name": "gridFilterableColumnLookupSelector", "kind": "Variable" },
@@ -358,6 +369,9 @@
{ "name": "gridFilterModelSelector", "kind": "Variable" },
{ "name": "GridFilterOperator", "kind": "Interface" },
{ "name": "GridFilterPanel", "kind": "Variable" },
+ { "name": "GridFilterPanelTrigger", "kind": "Variable" },
+ { "name": "GridFilterPanelTriggerProps", "kind": "Interface" },
+ { "name": "GridFilterPanelTriggerState", "kind": "Interface" },
{ "name": "GridFilterState", "kind": "Interface" },
{ "name": "GridFocusApi", "kind": "Interface" },
{ "name": "gridFocusCellSelector", "kind": "Variable" },
@@ -596,6 +610,8 @@
{ "name": "gridTabIndexStateSelector", "kind": "Variable" },
{ "name": "GridTableRowsIcon", "kind": "Variable" },
{ "name": "GridToolbar", "kind": "Variable" },
+ { "name": "GridToolbarButton", "kind": "Variable" },
+ { "name": "GridToolbarButtonProps", "kind": "TypeAlias" },
{ "name": "GridToolbarColumnsButton", "kind": "Variable" },
{ "name": "GridToolbarContainer", "kind": "Variable" },
{ "name": "GridToolbarContainerProps", "kind": "TypeAlias" },
@@ -608,6 +624,14 @@
{ "name": "GridToolbarProps", "kind": "Interface" },
{ "name": "GridToolbarQuickFilter", "kind": "Function" },
{ "name": "GridToolbarQuickFilterProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarRoot", "kind": "Variable" },
+ { "name": "GridToolbarRootProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarSeparator", "kind": "Function" },
+ { "name": "GridToolbarSeparatorProps", "kind": "Interface" },
+ { "name": "GridToolbarToggleButton", "kind": "Variable" },
+ { "name": "GridToolbarToggleButtonGroup", "kind": "Function" },
+ { "name": "GridToolbarToggleButtonGroupProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarToggleButtonProps", "kind": "TypeAlias" },
{ "name": "gridTopLevelRowCountSelector", "kind": "Variable" },
{ "name": "GridTranslationKeys", "kind": "TypeAlias" },
{ "name": "GridTreeBasicNode", "kind": "Interface" },
@@ -659,6 +683,7 @@
{ "name": "renderEditDateCell", "kind": "Variable" },
{ "name": "renderEditInputCell", "kind": "Variable" },
{ "name": "renderEditSingleSelectCell", "kind": "Variable" },
+ { "name": "RenderProp", "kind": "TypeAlias" },
{ "name": "renderRowReorderCell", "kind": "Variable" },
{ "name": "RowPropsOverrides", "kind": "Interface" },
{ "name": "sanitizeFilterItemValue", "kind": "Variable" },
@@ -678,6 +703,7 @@
{ "name": "useGridApiMethod", "kind": "Function" },
{ "name": "useGridApiOptionHandler", "kind": "Function" },
{ "name": "useGridApiRef", "kind": "Variable" },
+ { "name": "useGridComponentRenderer", "kind": "Function" },
{ "name": "useGridLogger", "kind": "Function" },
{ "name": "useGridNativeEventListener", "kind": "Variable" },
{ "name": "useGridRootProps", "kind": "Variable" },
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index 71add8c10f94..cf88b1b50a5b 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -15,6 +15,8 @@
{ "name": "BaseSelectPropsOverrides", "kind": "Interface" },
{ "name": "BaseSwitchPropsOverrides", "kind": "Interface" },
{ "name": "BaseTextFieldPropsOverrides", "kind": "Interface" },
+ { "name": "BaseToggleButtonGroupPropsOverrides", "kind": "Interface" },
+ { "name": "BaseToggleButtonPropsOverrides", "kind": "Interface" },
{ "name": "BaseTooltipPropsOverrides", "kind": "Interface" },
{ "name": "CellPropsOverrides", "kind": "Interface" },
{ "name": "checkGridRowIdIsValid", "kind": "Function" },
@@ -26,6 +28,7 @@
{ "name": "ColumnsPanelPropsOverrides", "kind": "Interface" },
{ "name": "COMFORTABLE_DENSITY_FACTOR", "kind": "Variable" },
{ "name": "COMPACT_DENSITY_FACTOR", "kind": "Variable" },
+ { "name": "ComponentRenderFn", "kind": "TypeAlias" },
{ "name": "createUseGridApiEventHandler", "kind": "Function" },
{ "name": "CursorCoordinates", "kind": "Interface" },
{ "name": "DATA_GRID_PRO_PROPS_DEFAULT_VALUES", "kind": "Variable" },
@@ -58,6 +61,7 @@
{ "name": "getGridStringOperators", "kind": "Variable" },
{ "name": "getGridStringQuickFilterFn", "kind": "Variable" },
{ "name": "getGroupRowIdFromPath", "kind": "Variable" },
+ { "name": "Grid", "kind": "NamespaceExport" },
{ "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" },
{ "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" },
{ "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" },
@@ -201,6 +205,9 @@
{ "name": "GridColumnsMeta", "kind": "Interface" },
{ "name": "GridColumnsPanel", "kind": "Function" },
{ "name": "GridColumnsPanelProps", "kind": "Interface" },
+ { "name": "GridColumnsPanelTrigger", "kind": "Variable" },
+ { "name": "GridColumnsPanelTriggerProps", "kind": "Interface" },
+ { "name": "GridColumnsPanelTriggerState", "kind": "Interface" },
{ "name": "GridColumnsRawState", "kind": "TypeAlias" },
{ "name": "GridColumnsRenderContext", "kind": "Interface" },
{ "name": "GridColumnsState", "kind": "Interface" },
@@ -287,8 +294,12 @@
{ "name": "GridExportMenuItemProps", "kind": "Interface" },
{ "name": "GridExportOptions", "kind": "Interface" },
{ "name": "GridExportStateParams", "kind": "Interface" },
+ { "name": "GridExportTrigger", "kind": "Variable" },
+ { "name": "GridExportTriggerProps", "kind": "TypeAlias" },
+ { "name": "GridExportTriggerState", "kind": "Interface" },
{ "name": "GridFeatureMode", "kind": "TypeAlias" },
{ "name": "GridFetchRowsParams", "kind": "Interface" },
+ { "name": "GridFileDownloadIcon", "kind": "Variable" },
{ "name": "GridFileExportOptions", "kind": "Interface" },
{ "name": "gridFilterableColumnDefinitionsSelector", "kind": "Variable" },
{ "name": "gridFilterableColumnLookupSelector", "kind": "Variable" },
@@ -326,6 +337,9 @@
{ "name": "gridFilterModelSelector", "kind": "Variable" },
{ "name": "GridFilterOperator", "kind": "Interface" },
{ "name": "GridFilterPanel", "kind": "Variable" },
+ { "name": "GridFilterPanelTrigger", "kind": "Variable" },
+ { "name": "GridFilterPanelTriggerProps", "kind": "Interface" },
+ { "name": "GridFilterPanelTriggerState", "kind": "Interface" },
{ "name": "GridFilterState", "kind": "Interface" },
{ "name": "GridFocusApi", "kind": "Interface" },
{ "name": "gridFocusCellSelector", "kind": "Variable" },
@@ -547,6 +561,8 @@
{ "name": "gridTabIndexStateSelector", "kind": "Variable" },
{ "name": "GridTableRowsIcon", "kind": "Variable" },
{ "name": "GridToolbar", "kind": "Variable" },
+ { "name": "GridToolbarButton", "kind": "Variable" },
+ { "name": "GridToolbarButtonProps", "kind": "TypeAlias" },
{ "name": "GridToolbarColumnsButton", "kind": "Variable" },
{ "name": "GridToolbarContainer", "kind": "Variable" },
{ "name": "GridToolbarContainerProps", "kind": "TypeAlias" },
@@ -559,6 +575,14 @@
{ "name": "GridToolbarProps", "kind": "Interface" },
{ "name": "GridToolbarQuickFilter", "kind": "Function" },
{ "name": "GridToolbarQuickFilterProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarRoot", "kind": "Variable" },
+ { "name": "GridToolbarRootProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarSeparator", "kind": "Function" },
+ { "name": "GridToolbarSeparatorProps", "kind": "Interface" },
+ { "name": "GridToolbarToggleButton", "kind": "Variable" },
+ { "name": "GridToolbarToggleButtonGroup", "kind": "Function" },
+ { "name": "GridToolbarToggleButtonGroupProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarToggleButtonProps", "kind": "TypeAlias" },
{ "name": "gridTopLevelRowCountSelector", "kind": "Variable" },
{ "name": "GridTranslationKeys", "kind": "TypeAlias" },
{ "name": "GridTreeBasicNode", "kind": "Interface" },
@@ -608,6 +632,7 @@
{ "name": "renderEditDateCell", "kind": "Variable" },
{ "name": "renderEditInputCell", "kind": "Variable" },
{ "name": "renderEditSingleSelectCell", "kind": "Variable" },
+ { "name": "RenderProp", "kind": "TypeAlias" },
{ "name": "renderRowReorderCell", "kind": "Variable" },
{ "name": "RowPropsOverrides", "kind": "Interface" },
{ "name": "sanitizeFilterItemValue", "kind": "Variable" },
@@ -623,6 +648,7 @@
{ "name": "useGridApiMethod", "kind": "Function" },
{ "name": "useGridApiOptionHandler", "kind": "Function" },
{ "name": "useGridApiRef", "kind": "Variable" },
+ { "name": "useGridComponentRenderer", "kind": "Function" },
{ "name": "useGridLogger", "kind": "Function" },
{ "name": "useGridNativeEventListener", "kind": "Variable" },
{ "name": "useGridRootProps", "kind": "Variable" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index 34314a105432..7dfdcac9363e 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -15,6 +15,8 @@
{ "name": "BaseSelectPropsOverrides", "kind": "Interface" },
{ "name": "BaseSwitchPropsOverrides", "kind": "Interface" },
{ "name": "BaseTextFieldPropsOverrides", "kind": "Interface" },
+ { "name": "BaseToggleButtonGroupPropsOverrides", "kind": "Interface" },
+ { "name": "BaseToggleButtonPropsOverrides", "kind": "Interface" },
{ "name": "BaseTooltipPropsOverrides", "kind": "Interface" },
{ "name": "CellPropsOverrides", "kind": "Interface" },
{ "name": "checkGridRowIdIsValid", "kind": "Function" },
@@ -26,6 +28,7 @@
{ "name": "ColumnsPanelPropsOverrides", "kind": "Interface" },
{ "name": "COMFORTABLE_DENSITY_FACTOR", "kind": "Variable" },
{ "name": "COMPACT_DENSITY_FACTOR", "kind": "Variable" },
+ { "name": "ComponentRenderFn", "kind": "TypeAlias" },
{ "name": "createUseGridApiEventHandler", "kind": "Function" },
{ "name": "CursorCoordinates", "kind": "Interface" },
{ "name": "DATA_GRID_PROPS_DEFAULT_VALUES", "kind": "Variable" },
@@ -55,6 +58,7 @@
{ "name": "getGridSingleSelectOperators", "kind": "Variable" },
{ "name": "getGridStringOperators", "kind": "Variable" },
{ "name": "getGridStringQuickFilterFn", "kind": "Variable" },
+ { "name": "Grid", "kind": "NamespaceExport" },
{ "name": "GRID_ACTIONS_COL_DEF", "kind": "Variable" },
{ "name": "GRID_ACTIONS_COLUMN_TYPE", "kind": "Variable" },
{ "name": "GRID_BOOLEAN_COL_DEF", "kind": "Variable" },
@@ -187,6 +191,9 @@
{ "name": "GridColumnsMeta", "kind": "Interface" },
{ "name": "GridColumnsPanel", "kind": "Function" },
{ "name": "GridColumnsPanelProps", "kind": "Interface" },
+ { "name": "GridColumnsPanelTrigger", "kind": "Variable" },
+ { "name": "GridColumnsPanelTriggerProps", "kind": "Interface" },
+ { "name": "GridColumnsPanelTriggerState", "kind": "Interface" },
{ "name": "GridColumnsRawState", "kind": "TypeAlias" },
{ "name": "GridColumnsRenderContext", "kind": "Interface" },
{ "name": "GridColumnsState", "kind": "Interface" },
@@ -258,7 +265,11 @@
{ "name": "GridExportMenuItemProps", "kind": "Interface" },
{ "name": "GridExportOptions", "kind": "Interface" },
{ "name": "GridExportStateParams", "kind": "Interface" },
+ { "name": "GridExportTrigger", "kind": "Variable" },
+ { "name": "GridExportTriggerProps", "kind": "TypeAlias" },
+ { "name": "GridExportTriggerState", "kind": "Interface" },
{ "name": "GridFeatureMode", "kind": "TypeAlias" },
+ { "name": "GridFileDownloadIcon", "kind": "Variable" },
{ "name": "GridFileExportOptions", "kind": "Interface" },
{ "name": "gridFilterableColumnDefinitionsSelector", "kind": "Variable" },
{ "name": "gridFilterableColumnLookupSelector", "kind": "Variable" },
@@ -296,6 +307,9 @@
{ "name": "gridFilterModelSelector", "kind": "Variable" },
{ "name": "GridFilterOperator", "kind": "Interface" },
{ "name": "GridFilterPanel", "kind": "Variable" },
+ { "name": "GridFilterPanelTrigger", "kind": "Variable" },
+ { "name": "GridFilterPanelTriggerProps", "kind": "Interface" },
+ { "name": "GridFilterPanelTriggerState", "kind": "Interface" },
{ "name": "GridFilterState", "kind": "Interface" },
{ "name": "GridFocusApi", "kind": "Interface" },
{ "name": "gridFocusCellSelector", "kind": "Variable" },
@@ -497,6 +511,8 @@
{ "name": "gridTabIndexStateSelector", "kind": "Variable" },
{ "name": "GridTableRowsIcon", "kind": "Variable" },
{ "name": "GridToolbar", "kind": "Variable" },
+ { "name": "GridToolbarButton", "kind": "Variable" },
+ { "name": "GridToolbarButtonProps", "kind": "TypeAlias" },
{ "name": "GridToolbarColumnsButton", "kind": "Variable" },
{ "name": "GridToolbarContainer", "kind": "Variable" },
{ "name": "GridToolbarContainerProps", "kind": "TypeAlias" },
@@ -509,6 +525,14 @@
{ "name": "GridToolbarProps", "kind": "Interface" },
{ "name": "GridToolbarQuickFilter", "kind": "Function" },
{ "name": "GridToolbarQuickFilterProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarRoot", "kind": "Variable" },
+ { "name": "GridToolbarRootProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarSeparator", "kind": "Function" },
+ { "name": "GridToolbarSeparatorProps", "kind": "Interface" },
+ { "name": "GridToolbarToggleButton", "kind": "Variable" },
+ { "name": "GridToolbarToggleButtonGroup", "kind": "Function" },
+ { "name": "GridToolbarToggleButtonGroupProps", "kind": "TypeAlias" },
+ { "name": "GridToolbarToggleButtonProps", "kind": "TypeAlias" },
{ "name": "gridTopLevelRowCountSelector", "kind": "Variable" },
{ "name": "GridTranslationKeys", "kind": "TypeAlias" },
{ "name": "GridTreeBasicNode", "kind": "Interface" },
@@ -556,6 +580,7 @@
{ "name": "renderEditDateCell", "kind": "Variable" },
{ "name": "renderEditInputCell", "kind": "Variable" },
{ "name": "renderEditSingleSelectCell", "kind": "Variable" },
+ { "name": "RenderProp", "kind": "TypeAlias" },
{ "name": "RowPropsOverrides", "kind": "Interface" },
{ "name": "sanitizeFilterItemValue", "kind": "Variable" },
{ "name": "selectedGridRowsCountSelector", "kind": "Variable" },
@@ -570,6 +595,7 @@
{ "name": "useGridApiMethod", "kind": "Function" },
{ "name": "useGridApiOptionHandler", "kind": "Function" },
{ "name": "useGridApiRef", "kind": "Variable" },
+ { "name": "useGridComponentRenderer", "kind": "Function" },
{ "name": "useGridLogger", "kind": "Function" },
{ "name": "useGridNativeEventListener", "kind": "Variable" },
{ "name": "useGridRootProps", "kind": "Variable" },