[DataGrid] Experimental toolbar

.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,28 @@
+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 (
+    <Grid.Toolbar.Root>
+      <Grid.ColumnsPanel.Trigger render={<Grid.Toolbar.Button />}>
+        <ViewColumnIcon fontSize="small" />
+        Columns
+      </Grid.ColumnsPanel.Trigger>
+    </Grid.Toolbar.Root>
+  );
+}
+
+export default function GridColumnsPanelTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: Toolbar }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+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 (
+    <Grid.Toolbar.Root>
+      <Grid.ColumnsPanel.Trigger render={<Grid.Toolbar.Button />}>
+        <ViewColumnIcon fontSize="small" />
+        Columns
+      </Grid.ColumnsPanel.Trigger>
+    </Grid.Toolbar.Root>
+  );
+}
+
+export default function GridColumnsPanelTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: Toolbar }} />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,39 @@
+# Data Grid - Columns Panel component 🚧
+
+<p class="description">Customize the columns panel UI.</p>
+
+:::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
+<Grid.ColumnsPanel.Trigger />
+```
+
+### Trigger
+
+A button that opens the columns panel.
+
+Renders a [Button](/material-ui/react-button/) component or a custom button provided to `slots.baseButton`.
+
+## Examples
+
+Below are some ways the Columns Panel component can be used.
+
+### Toolbar columns panel trigger
+
+Toggle the visibility of the columns panel.
+
+{{"demo": "GridColumnsPanelTrigger.js", "bg": "inline"}}
+
+## API
+
+- [Grid](/x/api/data-grid/data-grid/)
+- [GridColumnsPanel](/x/api/data-grid/data-grid/)
+- [GridColumnsPanelTrigger](/x/api/data-grid/data-grid/)

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

@@ -0,0 +1,66 @@
+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 (
+    <React.Fragment>
+      <Grid.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" />
+        Export
+        <ArrowDropDownIcon fontSize="small" sx={{ mx: -0.5 }} />
+      </Grid.Toolbar.Button>
+      <Menu
+        id="export-menu"
+        anchorEl={triggerRef.current}
+        open={open}
+        onClose={() => setOpen(false)}
+        MenuListProps={{
+          'aria-labelledby': 'export-menu-trigger',
+        }}
+      >
+        <Grid.Export.Trigger exportType="csv" render={<MenuItem />}>
+          Download as CSV
+        </Grid.Export.Trigger>
+        <Grid.Export.Trigger exportType="print" render={<MenuItem />}>
+          Print
+        </Grid.Export.Trigger>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+function Toolbar() {
+  return (
+    <Grid.Toolbar.Root>
+      <ExportMenu />
+    </Grid.Toolbar.Root>
+  );
+}
+
+export default function GridExportMenu() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: Toolbar }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+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<HTMLButtonElement>(null);
+
+  return (
+    <React.Fragment>
+      <Grid.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" />
+        Export
+        <ArrowDropDownIcon fontSize="small" sx={{ mx: -0.5 }} />
+      </Grid.Toolbar.Button>
+      <Menu
+        id="export-menu"
+        anchorEl={triggerRef.current}
+        open={open}
+        onClose={() => setOpen(false)}
+        MenuListProps={{
+          'aria-labelledby': 'export-menu-trigger',
+        }}
+      >
+        <Grid.Export.Trigger exportType="csv" render={<MenuItem />}>
+          Download as CSV
+        </Grid.Export.Trigger>
+        <Grid.Export.Trigger exportType="print" render={<MenuItem />}>
+          Print
+        </Grid.Export.Trigger>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+function Toolbar() {
+  return (
+    <Grid.Toolbar.Root>
+      <ExportMenu />
+    </Grid.Toolbar.Root>
+  );
+}
+
+export default function GridExportMenu() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: Toolbar }} />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,33 @@
+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 (
+    <Grid.Toolbar.Root>
+      <Grid.Export.Trigger exportType="csv" render={<Grid.Toolbar.Button />}>
+        <FileDownloadIcon fontSize="small" />
+        CSV
+      </Grid.Export.Trigger>
+      <Grid.Export.Trigger exportType="print" render={<Grid.Toolbar.Button />}>
+        <PrintIcon fontSize="small" />
+        Print
+      </Grid.Export.Trigger>
+    </Grid.Toolbar.Root>
+  );
+}
+
+export default function GridExportTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: Toolbar }} />
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+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 (
+    <Grid.Toolbar.Root>
+      <Grid.Export.Trigger exportType="csv" render={<Grid.Toolbar.Button />}>
+        <FileDownloadIcon fontSize="small" />
+        CSV
+      </Grid.Export.Trigger>
+      <Grid.Export.Trigger exportType="print" render={<Grid.Toolbar.Button />}>
+        <PrintIcon fontSize="small" />
+        Print
+      </Grid.Export.Trigger>
+    </Grid.Toolbar.Root>
+  );
+}
+
+export default function GridExportTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: Toolbar }} />
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,39 @@
+# Data Grid - Export component
+
+<p class="description">Components to trigger exports of the Data Grid.</p>
+
+## Anatomy
+
+The `Grid.Export` component is comprised of the following parts.
+
+```tsx
+<Grid.Export.Trigger />
+```
+
+### Trigger
+
+A button that triggers an export.
+
+The `exportType` prop can be set to `print`, `csv` or `excel`[<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan').
+
+## Examples
+
+Below are some ways the Export component can be used.
+
+### Toolbar export buttons
+
+Display export options as buttons on the toolbar.
+
+{{"demo": "GridExportTrigger.js", "bg": "inline"}}
+
+### Toolbar export menu
+
+Display export options within a menu on the toolbar.
+
+{{"demo": "GridExportMenu.js", "bg": "inline"}}
+
+## API
+
+- [Grid](/x/api/data-grid/data-grid/)
+- [GridExport](/x/api/data-grid/data-grid/)
+- [GridExportTrigger](/x/api/data-grid/data-grid/)

docs/data/data-grid/components/filter-panel/GridFilterPanelTrigger.js

@@ -0,0 +1,28 @@
+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 (
+    <Grid.Toolbar.Root>
+      <Grid.FilterPanel.Trigger render={<Grid.Toolbar.Button />}>
+        <FilterListIcon fontSize="small" />
+        Filters
+      </Grid.FilterPanel.Trigger>
+    </Grid.Toolbar.Root>
+  );
+}
+
+export default function GridFilterPanelTrigger() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 10,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} loading={loading} slots={{ toolbar: Toolbar }} />
+    </div>
+  );
+}