[DataGrid] Use new toolbar by default (#16814)

mui · Mar 6, 2025 · 25ef40e · 25ef40e
1 parent 7c80083
commit 25ef40e
Show file tree

Hide file tree

Showing 103 changed files with 1,872 additions and 1,123 deletions.
diff --git a/docs/data/data-grid/accessibility/DensitySelectorGrid.js b/docs/data/data-grid/accessibility/DensitySelectorGrid.js
@@ -1,16 +1,73 @@
 import * as React from 'react';
 import {
   DataGrid,
-  GridToolbarContainer,
-  GridToolbarDensitySelector,
+  gridDensitySelector,
+  Toolbar,
+  ToolbarButton,
+  useGridApiContext,
+  useGridSelector,
 } 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 MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import CheckIcon from '@mui/icons-material/Check';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const DENISTY_OPTIONS = [
+  { label: 'Compact density', value: 'compact' },
+  { label: 'Standard density', value: 'standard' },
+  { label: 'Comfortable density', value: 'comfortable' },
+];
 
 function CustomToolbar() {
+  const apiRef = useGridApiContext();
+  const density = useGridSelector(apiRef, gridDensitySelector);
+  const [densityMenuOpen, setDensityMenuOpen] = React.useState(false);
+  const densityMenuTriggerRef = React.useRef(null);
+
   return (
-    <GridToolbarContainer>
-      <GridToolbarDensitySelector />
-    </GridToolbarContainer>
+    <Toolbar>
+      <Tooltip title="Settings">
+        <ToolbarButton
+          ref={densityMenuTriggerRef}
+          id="density-menu-trigger"
+          aria-controls="density-menu"
+          aria-haspopup="true"
+          aria-expanded={densityMenuOpen ? 'true' : undefined}
+          onClick={() => setDensityMenuOpen(true)}
+        >
+          <SettingsIcon fontSize="small" sx={{ ml: 'auto' }} />
+        </ToolbarButton>
+      </Tooltip>
+
+      <Menu
+        id="density-menu"
+        anchorEl={densityMenuTriggerRef.current}
+        open={densityMenuOpen}
+        onClose={() => setDensityMenuOpen(false)}
+        MenuListProps={{
+          'aria-labelledby': 'density-menu-trigger',
+        }}
+      >
+        {DENISTY_OPTIONS.map((option) => (
+          <MenuItem
+            key={option.value}
+            onClick={() => {
+              apiRef.current.setDensity(option.value);
+              setDensityMenuOpen(false);
+            }}
+          >
+            <ListItemIcon>
+              {density === option.value && <CheckIcon fontSize="small" />}
+            </ListItemIcon>
+            <ListItemText>{option.label}</ListItemText>
+          </MenuItem>
+        ))}
+      </Menu>
+    </Toolbar>
   );
 }
 

diff --git a/docs/data/data-grid/accessibility/DensitySelectorGrid.tsx b/docs/data/data-grid/accessibility/DensitySelectorGrid.tsx
@@ -1,16 +1,74 @@
 import * as React from 'react';
 import {
   DataGrid,
-  GridToolbarContainer,
-  GridToolbarDensitySelector,
+  GridDensity,
+  gridDensitySelector,
+  Toolbar,
+  ToolbarButton,
+  useGridApiContext,
+  useGridSelector,
 } 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 MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import CheckIcon from '@mui/icons-material/Check';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const DENISTY_OPTIONS: { label: string; value: GridDensity }[] = [
+  { label: 'Compact density', value: 'compact' },
+  { label: 'Standard density', value: 'standard' },
+  { label: 'Comfortable density', value: 'comfortable' },
+];
 
 function CustomToolbar() {
+  const apiRef = useGridApiContext();
+  const density = useGridSelector(apiRef, gridDensitySelector);
+  const [densityMenuOpen, setDensityMenuOpen] = React.useState(false);
+  const densityMenuTriggerRef = React.useRef<HTMLButtonElement>(null);
+
   return (
-    <GridToolbarContainer>
-      <GridToolbarDensitySelector />
-    </GridToolbarContainer>
+    <Toolbar>
+      <Tooltip title="Settings">
+        <ToolbarButton
+          ref={densityMenuTriggerRef}
+          id="density-menu-trigger"
+          aria-controls="density-menu"
+          aria-haspopup="true"
+          aria-expanded={densityMenuOpen ? 'true' : undefined}
+          onClick={() => setDensityMenuOpen(true)}
+        >
+          <SettingsIcon fontSize="small" sx={{ ml: 'auto' }} />
+        </ToolbarButton>
+      </Tooltip>
+
+      <Menu
+        id="density-menu"
+        anchorEl={densityMenuTriggerRef.current}
+        open={densityMenuOpen}
+        onClose={() => setDensityMenuOpen(false)}
+        MenuListProps={{
+          'aria-labelledby': 'density-menu-trigger',
+        }}
+      >
+        {DENISTY_OPTIONS.map((option) => (
+          <MenuItem
+            key={option.value}
+            onClick={() => {
+              apiRef.current.setDensity(option.value);
+              setDensityMenuOpen(false);
+            }}
+          >
+            <ListItemIcon>
+              {density === option.value && <CheckIcon fontSize="small" />}
+            </ListItemIcon>
+            <ListItemText>{option.label}</ListItemText>
+          </MenuItem>
+        ))}
+      </Menu>
+    </Toolbar>
   );
 }
 

diff --git a/docs/data/data-grid/accessibility/accessibility.md b/docs/data/data-grid/accessibility/accessibility.md
@@ -19,29 +19,14 @@ The [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/grid
 
 ## Density
 
-You can change the density of the rows and the column header.
-
-### Density selection from the toolbar
-
-To enable the density selection from the toolbar, you can do one of the following:
-
-1. Enable the default toolbar component by passing the `slots.toolbar` prop to the Data Grid.
-2. Create a specific toolbar containing only the `GridToolbarDensitySelector` component and apply it using the `toolbar` property in the Data Grid's `slots` prop.
-
-The user can then change the density of the Data Grid by using the density selection menu from the toolbar, as the following demo illustrates:
-
-{{"demo": "DensitySelectorGrid.js", "bg": "inline"}}
-
-To disable the density selection menu, pass the `disableDensitySelector` prop to the Data Grid.
-
-### Set the density programmatically
-
 The Data Grid exposes the `density` prop which supports the following values:
 
 - `standard` (default)
 - `compact`
 - `comfortable`
 
+### Set the density programmatically
+
 You can set the density programmatically in one of the following ways:
 
 1. Uncontrolled – initialize the density with the `initialState.density` prop.
@@ -70,9 +55,11 @@ You can set the density programmatically in one of the following ways:
 The `density` prop applies the values determined by the `rowHeight` and `columnHeaderHeight` props, if supplied.
 The user can override this setting with the optional toolbar density selector.
 
-The following demo shows a Data Grid with the controlled density set to `compact` and outputs the current density to the console when the user changes it using the density selector from the toolbar:
+You can create a custom toolbar with a density selector that allows users to change the density of the Data Grid, as shown in the demo below.
+
+{{"demo": "DensitySelectorGrid.js", "bg": "inline"}}
 
-{{"demo": "DensitySelectorSmallGrid.js", "bg": "inline"}}
+See the [Toolbar component—Settings menu](/x/react-data-grid/components/toolbar/#settings-menu) for an example of how to create a settings menu that stores user preferences in local storage.
 
 ## Keyboard navigation
 

diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md
@@ -50,19 +50,22 @@ As mentioned above, the column menu is a component slot that can be recomposed e
 
 ### Toolbar
 
+Pass the `showToolbar` prop to the `<DataGrid />` component to enable the default toolbar.
+
+{{"demo": "ToolbarGrid.js", "bg": "inline"}}
+
+You can also compose your own toolbar using the [Toolbar component](/x/react-data-grid/components/toolbar/).
+
+#### Legacy toolbar components
+
 :::warning
 
 The examples below use the `<GridToolbar />`, `<GridToolbarContainer />`, and various toolbar button components.
 These components will be deprecated in v8 and replaced by the new [Toolbar component](/x/react-data-grid/components/toolbar/).
 
 :::
 
-To enable the toolbar you need to add the `showToolbar` prop to the Data Grid.
-This demo showcases how this can be achieved.
-
-{{"demo": "ToolbarGrid.js", "bg": "inline"}}
-
-You can also compose your own toolbar. Each button in the toolbar is wrapped with a tooltip component.
+Each button in the toolbar is wrapped with a tooltip component.
 In order to override some of the props corresponding to the toolbar buttons, you can use the `slotProps` prop.
 
 The following demo shows how to override the tooltip title of the density selector and the variant of the export button.

diff --git a/docs/data/data-grid/components/toolbar/GridToolbar.js b/docs/data/data-grid/components/toolbar/GridToolbar.js
@@ -17,7 +17,6 @@ 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 MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
@@ -27,8 +26,8 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import SearchIcon from '@mui/icons-material/Search';
 
 function CustomToolbar() {
-  const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
-  const downloadMenuTriggerRef = React.useRef(null);
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
 
   return (
     <Toolbar>
@@ -51,35 +50,32 @@ function CustomToolbar() {
       </Tooltip>
 
       <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 0.5 }} />
-      <Tooltip title="Print">
-        <ExportPrint render={<ToolbarButton />}>
-          <PrintIcon fontSize="small" />
-        </ExportPrint>
-      </Tooltip>
-
-      <Tooltip title="Download">
+      <Tooltip title="Export">
         <ToolbarButton
-          ref={downloadMenuTriggerRef}
+          ref={exportMenuTriggerRef}
           id="export-menu-trigger"
           aria-controls="export-menu"
           aria-haspopup="true"
-          aria-expanded={downloadMenuOpen ? 'true' : undefined}
-          onClick={() => setDownloadMenuOpen(true)}
+          aria-expanded={exportMenuOpen ? 'true' : undefined}
+          onClick={() => setExportMenuOpen(true)}
         >
           <FileDownloadIcon fontSize="small" />
         </ToolbarButton>
       </Tooltip>
 
       <Menu
         id="export-menu"
-        anchorEl={downloadMenuTriggerRef.current}
-        open={downloadMenuOpen}
-        onClose={() => setDownloadMenuOpen(false)}
+        anchorEl={exportMenuTriggerRef.current}
+        open={exportMenuOpen}
+        onClose={() => setExportMenuOpen(false)}
         MenuListProps={{
           'aria-labelledby': 'export-menu-trigger',
         }}
       >
-        <ExportCsv render={<MenuItem />} onClick={() => setDownloadMenuOpen(false)}>
+        <ExportPrint render={<MenuItem />} onClick={() => setExportMenuOpen(false)}>
+          Print
+        </ExportPrint>
+        <ExportCsv render={<MenuItem />} onClick={() => setExportMenuOpen(false)}>
           Download as CSV
         </ExportCsv>
         {/* Available to MUI X Premium users */}

diff --git a/docs/data/data-grid/components/toolbar/GridToolbar.tsx b/docs/data/data-grid/components/toolbar/GridToolbar.tsx
@@ -17,7 +17,6 @@ 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 MenuItem from '@mui/material/MenuItem';
 import Divider from '@mui/material/Divider';
@@ -27,8 +26,8 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import SearchIcon from '@mui/icons-material/Search';
 
 function CustomToolbar() {
-  const [downloadMenuOpen, setDownloadMenuOpen] = React.useState(false);
-  const downloadMenuTriggerRef = React.useRef<HTMLButtonElement>(null);
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef<HTMLButtonElement>(null);
 
   return (
     <Toolbar>
@@ -52,35 +51,32 @@ function CustomToolbar() {
 
       <Divider orientation="vertical" variant="middle" flexItem sx={{ mx: 0.5 }} />
 
-      <Tooltip title="Print">
-        <ExportPrint render={<ToolbarButton />}>
-          <PrintIcon fontSize="small" />
-        </ExportPrint>
-      </Tooltip>
-
-      <Tooltip title="Download">
+      <Tooltip title="Export">
         <ToolbarButton
-          ref={downloadMenuTriggerRef}
+          ref={exportMenuTriggerRef}
           id="export-menu-trigger"
           aria-controls="export-menu"
           aria-haspopup="true"
-          aria-expanded={downloadMenuOpen ? 'true' : undefined}
-          onClick={() => setDownloadMenuOpen(true)}
+          aria-expanded={exportMenuOpen ? 'true' : undefined}
+          onClick={() => setExportMenuOpen(true)}
         >
           <FileDownloadIcon fontSize="small" />
         </ToolbarButton>
       </Tooltip>
 
       <Menu
         id="export-menu"
-        anchorEl={downloadMenuTriggerRef.current}
-        open={downloadMenuOpen}
-        onClose={() => setDownloadMenuOpen(false)}
+        anchorEl={exportMenuTriggerRef.current}
+        open={exportMenuOpen}
+        onClose={() => setExportMenuOpen(false)}
         MenuListProps={{
           'aria-labelledby': 'export-menu-trigger',
         }}
       >
-        <ExportCsv render={<MenuItem />} onClick={() => setDownloadMenuOpen(false)}>
+        <ExportPrint render={<MenuItem />} onClick={() => setExportMenuOpen(false)}>
+          Print
+        </ExportPrint>
+        <ExportCsv render={<MenuItem />} onClick={() => setExportMenuOpen(false)}>
           Download as CSV
         </ExportCsv>
         {/* Available to MUI X Premium users */}