[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/primitives/columns-panel/GridColumnsPanelTrigger.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Toolbar, ColumnsPanel } from '@mui/x-data-grid/primitives';
+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/primitives/columns-panel/GridColumnsPanelTrigger.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Toolbar, ColumnsPanel } from '@mui/x-data-grid/primitives';
+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/primitives/columns-panel/GridColumnsPanelTrigger.tsx.preview

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

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

@@ -0,0 +1,54 @@
+---
+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 columns panel UI.</p>
+
+:::warning
+This component is incomplete.
+
+Currently, the only part 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.
+
+In the meantime, see the following:
+
+- [Custom subcomponents—Columns panel](/x/react-data-grid/components/#columns-panel)
+
+:::
+
+## 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/primitives';
+
+<ColumnsPanel.Trigger />;
+```
+
+### Trigger
+
+A button that opens the columns panel.
+
+Renders the `baseButton` slot.
+
+## Custom elements
+
+The default elements can be replaced using the `render` prop. See [Grid components—Customization](/x/react-data-grid/components/overview/#customization).
+
+See the [Toolbar—Custom elements demo](/x/react-data-grid/primitives/toolbar/#custom-elements) for an example.
+
+## Accessibility
+
+### ARIA
+
+- The element rendered by the `<ColumnsPanel.Trigger />` component should have a text label, or an `aria-label` attribute set.

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { Toolbar, Export } from '@mui/x-data-grid-premium/primitives';
+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/primitives/export/GridExportMenu.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { DataGridPremium } from '@mui/x-data-grid-premium';
+import { Toolbar, Export } from '@mui/x-data-grid-premium/primitives';
+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/primitives/export/GridExportMenu.tsx.preview

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

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Toolbar, Export } from '@mui/x-data-grid/primitives';
+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/primitives/export/GridExportTrigger.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { Toolbar, Export } from '@mui/x-data-grid/primitives';
+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/primitives/export/GridExportTrigger.tsx.preview

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