[data grid] Grouped column menu shows redundant Divider

[rettoua]

Order ID 💳

54867

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

When all the possible options (except the one that allows ungrouping) are turned off for the grouped column then there is a divider is shown:

Is there any way to hide it?

Here is live example: https://codesandbox.io/s/immutable-cherry-51xoxo?file=/demo.tsx

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 13.0
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 107.0.5304.121
  npmPackages:
    @emotion/react: ~11.10.0 => 11.10.4 
    @emotion/styled: ~11.10.0 => 11.10.4 
    @mui/base:  5.0.0-alpha.79 
    @mui/icons-material: ~5.8.4 => 5.8.4 
    @mui/lab: 5.0.0-alpha.80 => 5.0.0-alpha.80 
    @mui/material: ~5.6.4 => 5.6.4 
    @mui/private-theming:  5.10.6 
    @mui/styled-engine:  5.10.7 
    @mui/styles: ~5.6.2 => 5.6.2 
    @mui/system:  5.10.7 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.6 
    @mui/x-data-grid: ~5.17.12 => 5.17.12 
    @mui/x-data-grid-premium: ~5.17.12 => 5.17.13 
    @mui/x-data-grid-pro:  5.17.13 
    @mui/x-date-pickers: ~5.0.0-beta.4 => 5.0.3 
    @mui/x-license-pro:  5.17.12 
    @types/react: ~18.0.21 => 18.0.21 
    react: ~17.0.2 => 17.0.2 
    react-dom: ~17.0.2 => 17.0.2 
    typescript: ~4.6.4 => 4.6.4 

[m4theushw]

There's no way to remove the divider in this column menu. You can only hide all dividers from all column menus.

To fix this issue we need to change the way that the column menu items related to basic features (sorting, filtering, hiding) are added. We used to always add them, no matter if the feature is disabled. Now, this needs to be changed to only add them if the feature is enabled. Then, when adding the menu items for advanced features (row grouping, aggregation, column pinning), we check if there's already some menu item before adding the divider. Something like:

diff --git a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx
index 3e33f4e14..fc73b8732 100644
--- a/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx
+++ b/packages/grid/x-data-grid/src/components/menu/columnMenu/GridColumnMenu.tsx
@@ -14,23 +14,29 @@ const GridColumnMenu = React.forwardRef<HTMLUListElement, GridColumnMenuProps>(
     const apiRef = useGridApiContext();
 
     const defaultButtons = [
-      <SortGridMenuItems onClick={hideMenu} column={currentColumn!} />, // TODO update types to allow `onClick` and `column` to be optional
-      <GridFilterMenuItem onClick={hideMenu} column={currentColumn!} />,
-      <HideGridColMenuItem onClick={hideMenu} column={currentColumn!} />,
-      <GridColumnsMenuItem onClick={hideMenu} column={currentColumn!} />,
+      currentColumn?.sortable && <SortGridMenuItems onClick={hideMenu} column={currentColumn!} />, // TODO update types to allow `onClick` and `column` to be optional
+      !rootProps.disableColumnFilter && currentColumn?.filterable && (
+        <GridFilterMenuItem onClick={hideMenu} column={currentColumn!} />
+      ),
+      currentColumn?.hideable && <HideGridColMenuItem onClick={hideMenu} column={currentColumn!} />,
+      !rootProps.disableColumnSelector && (
+        <GridColumnsMenuItem onClick={hideMenu} column={currentColumn!} />
+      ),
     ];
 
     const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors(
       'columnMenu',
-      defaultButtons,
+      defaultButtons.filter(Boolean),
       currentColumn,
     );
 
     return (
       <GridColumnMenuContainer ref={ref} {...props}>
-        {preProcessedButtons.map((button: any, index: number) =>
-          React.cloneElement(button, { key: index, onClick: hideMenu, column: currentColumn }),
-        )}
+        {preProcessedButtons
+          .filter(Boolean)
+          .map((button: any, index: number) =>
+            React.cloneElement(button, { key: index, onClick: hideMenu, column: currentColumn }),
+          )}
       </GridColumnMenuContainer>
     );
   },

#6619 is implementing a completely new column menu that hopefully will handle this edge case. cc @MBilalShafi