[DataGrid] Improved column menu design and api

docs/data/data-grid/column-header/column-header.md

@@ -38,12 +38,6 @@ const columns: GridColDef[] = [
 
 You can check the [styling header](/x/react-data-grid/style/#styling-column-headers) section for more information.
 
-## Column menu
-
-By default, each column header displays a column menu. The column menu allows actions to be performed in the context of the target column, e.g. filtering. To disable the column menu, set the prop `disableColumnMenu={true}`.
-
-{{"demo": "ColumnMenuGrid.js", "bg": "inline"}}
-
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

docs/data/data-grid/column-menu/AddNewColumnMenuGrid.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
+import { DataGrid, GridColumnMenu } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+function CustomUserItem(props) {
+  const { myCustomHandler, myCustomValue } = props;
+  return (
+    <MenuItem onClick={myCustomHandler}>
+      <ListItemIcon>
+        <SettingsApplicationsIcon fontSize="small" />
+      </ListItemIcon>
+      <ListItemText>{myCustomValue}</ListItemText>
+    </MenuItem>
+  );
+}
+
+function CustomColumnMenu(props) {
+  return (
+    <GridColumnMenu
+      {...props}
+      components={{
+        // Add new item
+        ColumnMenuUserItem: CustomUserItem,
+      }}
+      componentsProps={{
+        columnMenuUserItem: {
+          // set `displayOrder` for new item
+          displayOrder: 15,
+          // pass additional props
+          myCustomValue: 'Do custom action',
+          myCustomHandler: () => alert('Custom handler fired'),
+        },
+      }}
+    />
+  );
+}
+
+export default function AddNewColumnMenuGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} components={{ ColumnMenu: CustomColumnMenu }} />
+    </div>
+  );
+}

docs/data/data-grid/column-menu/AddNewColumnMenuGrid.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
+import {
+  DataGrid,
+  GridColumnMenu,
+  GridColumnMenuProps,
+  GridColumnMenuItemProps,
+} from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+function CustomUserItem(props: GridColumnMenuItemProps) {
+  const { myCustomHandler, myCustomValue } = props;
+  return (
+    <MenuItem onClick={myCustomHandler}>
+      <ListItemIcon>
+        <SettingsApplicationsIcon fontSize="small" />
+      </ListItemIcon>
+      <ListItemText>{myCustomValue}</ListItemText>
+    </MenuItem>
+  );
+}
+
+function CustomColumnMenu(props: GridColumnMenuProps) {
+  return (
+    <GridColumnMenu
+      {...props}
+      components={{
+        // Add new item
+        ColumnMenuUserItem: CustomUserItem,
+      }}
+      componentsProps={{
+        columnMenuUserItem: {
+          // set `displayOrder` for new item
+          displayOrder: 15,
+          // pass additional props
+          myCustomValue: 'Do custom action',
+          myCustomHandler: () => alert('Custom handler fired'),
+        },
+      }}
+    />
+  );
+}
+
+export default function AddNewColumnMenuGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 5,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid {...data} components={{ ColumnMenu: CustomColumnMenu }} />
+    </div>
+  );
+}

docs/data/data-grid/column-menu/AddNewColumnMenuGrid.tsx.preview

@@ -0,0 +1 @@
+<DataGrid {...data} components={{ ColumnMenu: CustomColumnMenu }} />

docs/data/data-grid/column-header/ColumnMenuGrid.js → docs/data/data-grid/column-menu/ColumnMenuGrid.js

@@ -11,7 +11,7 @@ export default function ColumnMenuGrid() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid {...data} disableColumnMenu />
+      <DataGrid {...data} />
     </div>
   );
 }

docs/data/data-grid/column-header/ColumnMenuGrid.tsx → docs/data/data-grid/column-menu/ColumnMenuGrid.tsx

@@ -11,7 +11,7 @@ export default function ColumnMenuGrid() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid {...data} disableColumnMenu />
+      <DataGrid {...data} />
     </div>
   );
 }

docs/data/data-grid/column-menu/ColumnMenuGrid.tsx.preview

@@ -0,0 +1 @@
+<DataGrid {...data} />

docs/data/data-grid/column-menu/ColumnMenuGridPremium.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+export default function ColumnMenuGridPremium() {
+  const apiRef = useGridApiRef();
+  const data = useMovieData();
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      aggregation: {
+        model: {
+          gross: 'avg',
+        },
+      },
+      columns: {
+        columnVisibilityModel: {
+          cinematicUniverse: false,
+          title: false,
+        },
+      },
+      rowGrouping: {
+        model: ['company'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        groupingColDef={{
+          leafField: 'title',
+        }}
+        initialState={initialState}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+export default function ColumnMenuGridPremium() {
+  const apiRef = useGridApiRef();
+  const data = useMovieData();
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      aggregation: {
+        model: {
+          gross: 'avg',
+        },
+      },
+      columns: {
+        columnVisibilityModel: {
+          cinematicUniverse: false,
+          title: false,
+        },
+      },
+      rowGrouping: {
+        model: ['company'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        groupingColDef={{
+          leafField: 'title',
+        }}
+        initialState={initialState}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPremium
+  {...data}
+  apiRef={apiRef}
+  groupingColDef={{
+    leafField: 'title',
+  }}
+  initialState={initialState}
+/>