[DataGrid] New Toolbar component

.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

docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { DataGrid, Toolbar, ColumnsPanel } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+
+function CustomToolbar() {
+  return (
+    <Toolbar.Root>
+      <Tooltip title="Columns">
+        <ColumnsPanel.Trigger render={<Toolbar.Button />}>
+          <ViewColumnIcon fontSize="small" />
+        </ColumnsPanel.Trigger>
+      </Tooltip>
+    </Toolbar.Root>
+  );
+}
+
+export default function GridColumnsPanelTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: CustomToolbar }} />
+    </div>
+  );
+}

docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { DataGrid, Toolbar, ColumnsPanel } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+
+function CustomToolbar() {
+  return (
+    <Toolbar.Root>
+      <Tooltip title="Columns">
+        <ColumnsPanel.Trigger render={<Toolbar.Button />}>
+          <ViewColumnIcon fontSize="small" />
+        </ColumnsPanel.Trigger>
+      </Tooltip>
+    </Toolbar.Root>
+  );
+}
+
+export default function GridColumnsPanelTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: CustomToolbar }} />
+    </div>
+  );
+}

docs/data/data-grid/components/columns-panel/GridColumnsPanelTrigger.tsx.preview

@@ -0,0 +1 @@
+<DataGrid {...data} loading={loading} slots={{ toolbar: CustomToolbar }} />

docs/data/data-grid/components/columns-panel/columns-panel.md

@@ -0,0 +1,52 @@
+---
+title: React Data Grid - Columns Panel component
+productId: x-data-grid
+components: ColumnsPanelTrigger
+packageName: '@mui/x-data-grid'
+githubLabel: 'component: data grid'
+---
+
+# Data Grid - Columns Panel 🚧
+
+<p class="description">Customize the Data Grid's columns panel.</p>
+
+:::warning
+This component is incomplete.
+
+Currently, the Trigger is the only composable part of the Columns Panel available.
+Future versions of the Columns Panel component will make it possible to compose each of its parts to create a custom columns panel.
+
+In the meantime, it's still possible to deeply customize the panel's subcomponents using custom slots.
+See [Custom subcomponents—Columns panel](/x/react-data-grid/components/#columns-panel) for more details.
+
+:::
+
+## Basic usage
+
+The demo below shows how to add a columns panel trigger to a custom toolbar.
+
+{{"demo": "GridColumnsPanelTrigger.js", "bg": "inline", "defaultCodeOpen": false}}
+
+## Anatomy
+
+```tsx
+import { ColumnsPanel } from '@mui/x-data-grid';
+
+<ColumnsPanel.Trigger />;
+```
+
+### Trigger
+
+`Trigger` is a button that opens/closes the columns panel.
+It renders the `baseButton` slot.
+
+## Custom elements
+
+Use the `render` prop to replace default elements.
+See [Components usage—Customization](/x/react-data-grid/components/usage/#customization) for more details, and [Toolbar—Custom elements demo](/x/react-data-grid/components/toolbar/#custom-elements) for an example of a custom Columns Panel Trigger.
+
+## Accessibility
+
+### ARIA
+
+You must apply a text label or an `aria-label` attribute to the `<ColumnsPanel.Trigger />`.

docs/data/data-grid/components/components.md

@@ -50,6 +50,13 @@
 
 ### Toolbar
 
+:::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 `toolbar: GridToolbar` to the Data Grid `slots` prop.
 This demo showcases how this can be achieved.
 

docs/data/data-grid/components/export/GridExportMenu.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { DataGridPremium, Toolbar, Export } from '@mui/x-data-grid-premium';
+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 FileDownloadIcon from '@mui/icons-material/FileDownload';
+
+function ExportMenu() {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Export">
+        <Toolbar.Button
+          ref={triggerRef}
+          id="export-menu-trigger"
+          aria-controls="export-menu"
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          onClick={() => setOpen(true)}
+        >
+          <FileDownloadIcon fontSize="small" />
+        </Toolbar.Button>
+      </Tooltip>
+      <Menu
+        id="export-menu"
+        anchorEl={triggerRef.current}
+        open={open}
+        onClose={() => setOpen(false)}
+        MenuListProps={{
+          'aria-labelledby': 'export-menu-trigger',
+        }}
+      >
+        <Export.Csv render={<MenuItem />}>Download as CSV</Export.Csv>
+        <Export.Excel render={<MenuItem />}>Download as Excel</Export.Excel>
+        <Export.Print render={<MenuItem />}>Print</Export.Print>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+function CustomToolbar() {
+  return (
+    <Toolbar.Root>
+      <ExportMenu />
+    </Toolbar.Root>
+  );
+}
+
+export default function GridExportMenu() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        loading={loading}
+        slots={{ toolbar: CustomToolbar }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/components/export/GridExportMenu.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { DataGridPremium, Toolbar, Export } from '@mui/x-data-grid-premium';
+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 FileDownloadIcon from '@mui/icons-material/FileDownload';
+
+function ExportMenu() {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  return (
+    <React.Fragment>
+      <Tooltip title="Export">
+        <Toolbar.Button
+          ref={triggerRef}
+          id="export-menu-trigger"
+          aria-controls="export-menu"
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          onClick={() => setOpen(true)}
+        >
+          <FileDownloadIcon fontSize="small" />
+        </Toolbar.Button>
+      </Tooltip>
+      <Menu
+        id="export-menu"
+        anchorEl={triggerRef.current}
+        open={open}
+        onClose={() => setOpen(false)}
+        MenuListProps={{
+          'aria-labelledby': 'export-menu-trigger',
+        }}
+      >
+        <Export.Csv render={<MenuItem />}>Download as CSV</Export.Csv>
+        <Export.Excel render={<MenuItem />}>Download as Excel</Export.Excel>
+        <Export.Print render={<MenuItem />}>Print</Export.Print>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+function CustomToolbar() {
+  return (
+    <Toolbar.Root>
+      <ExportMenu />
+    </Toolbar.Root>
+  );
+}
+
+export default function GridExportMenu() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        loading={loading}
+        slots={{ toolbar: CustomToolbar }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/components/export/GridExportMenu.tsx.preview

@@ -0,0 +1,5 @@
+<DataGridPremium
+  {...data}
+  loading={loading}
+  slots={{ toolbar: CustomToolbar }}
+/>

docs/data/data-grid/components/export/GridExportTrigger.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { DataGrid, Toolbar, Export } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import PrintIcon from '@mui/icons-material/Print';
+
+function CustomToolbar() {
+  return (
+    <Toolbar.Root>
+      <Tooltip title="Download as CSV">
+        <Export.Csv render={<Toolbar.Button />}>
+          <FileDownloadIcon fontSize="small" />
+        </Export.Csv>
+      </Tooltip>
+      <Tooltip title="Print">
+        <Export.Print render={<Toolbar.Button />}>
+          <PrintIcon fontSize="small" />
+        </Export.Print>
+      </Tooltip>
+    </Toolbar.Root>
+  );
+}
+
+export default function GridExportTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: CustomToolbar }} />
+    </div>
+  );
+}

docs/data/data-grid/components/export/GridExportTrigger.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { DataGrid, Toolbar, Export } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Tooltip from '@mui/material/Tooltip';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import PrintIcon from '@mui/icons-material/Print';
+
+function CustomToolbar() {
+  return (
+    <Toolbar.Root>
+      <Tooltip title="Download as CSV">
+        <Export.Csv render={<Toolbar.Button />}>
+          <FileDownloadIcon fontSize="small" />
+        </Export.Csv>
+      </Tooltip>
+      <Tooltip title="Print">
+        <Export.Print render={<Toolbar.Button />}>
+          <PrintIcon fontSize="small" />
+        </Export.Print>
+      </Tooltip>
+    </Toolbar.Root>
+  );
+}
+
+export default function GridExportTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+    maxColumns: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: CustomToolbar }} />
+    </div>
+  );
+}

docs/data/data-grid/components/export/GridExportTrigger.tsx.preview

@@ -0,0 +1 @@
+<DataGrid {...data} loading={loading} slots={{ toolbar: CustomToolbar }} />