[data grid] Change height of the column menu

[amrutamangaonkar]

The problem in depth

I am a MUI Pro license user. I am working on making the column menu responsive. I have a use-case where the column menu may have long list of options in custom menu, I need add a max-height to the column menu or fit it to the viewport and have a scrollbar inside it, so that the column menu does not spill out of its container. I have a custom column menu with my custom column menu options:

export const ColumnMenu: FunctionComponent<
  GridColumnMenuProps
> = () => {

  return (
    <GridColumnMenu
      {...props}
      slotProps={{
        columnMenuUserItem: {
          customMenuList,
        },
      }}
      slots={{
        columnMenuUserItem: CustomMenu,
      }}
    />
  );
};

So far I have tried -

1. Changing the css properties on via sx on DataGrid directly:

<DataGridPro
        sx={{
        "& .MuiPaper-root": { maxHeight: '100px' }
        }}

2. Using componentProps to change css properties:

<DataGridPro
     componentsProps={{
          columnMenu: {
            sx: {
                maxHeight: "100px" 
              }
          },
          basePopper: {
            sx: {
              maxHeight: "100px",
              "& .MuiPaper-root": { maxHeight: "100px"},
              "&.MuiDataGrid-menu .MuiPaper-root": { maxHeight: "100px" }
            }
          }
        }}

3. Changing css props from ColumnMenu component:

export const ColumnMenu: FunctionComponent<
  GridColumnMenuProps
> = () => {

  return (
    <GridColumnMenu
      {...props}
      slotProps={{
        sx: { maxHeight: '100px' },
        columnMenuUserItem: {
          customMenuList,
        },
      }}
      slots={{
        columnMenuUserItem: CustomMenu,
      }}
    />
  );
};

None of the solutions mentioned above have worked so far, please could you help me with your recommendations to fix this issue.

Your environment

Search keywords: Change column height

Order ID: 103430

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[amrutamangaonkar]

I am attaching link to sandbox where I have made some changes in order to access the css of the column menu but I can't really access the styles of the menu. My end goal is to give a max-height to the column menu so that incase of too many custom menu items, it does not spill out of the viewport.
https://codesandbox.io/p/sandbox/charming-carson-jhzlq4?workspaceId=ws_Apb7KQPyARFpMNGyjA2tRf

Thanks for your help.

[michelengelen]

Oh, I haven't seen that you are trying to use componentsProps to change the styling. We renamed this with the last major release to slotProps to better align this with the slots prop.

[michelengelen]

Here is the docs section talking about the deprecation of components and componentsProps during the v5 - v6 transition: https://mui.com/x/migration/migration-data-grid-v5/#rename-components-to-slots-optional

And here is the section about actually removing the deprecated props components and componentsProps: https://mui.com/x/migration/migration-data-grid-v6/#removed-props

[amrutamangaonkar]

@michelengelen I used componentProps just to show you the solutions that I have tried. I have used slotProps but I don't see it working as well. https://codesandbox.io/p/sandbox/charming-carson-jhzlq4?workspaceId=ws_Apb7KQPyARFpMNGyjA2tRf

The solutions I have in the CodeSandBox are just the ones that I found, I would appreciate your inputs on how a column menu could get a max-height incase if there are too many options in the custom menu.

[michelengelen]

Hey @amrutamangaonkar ... here is an example that should work for you.
The only problem is that the sx prop is not exposed through typescript, but it's usable anyways.

function CustomColumnMenu(props: GridColumnMenuProps) {
  const apiRef = useGridApiContext();
  React.useEffect(() => {
    const unsub = apiRef.current.subscribeEvent(
      'virtualScrollerWheel',
      (p, e) => {
        e.defaultMuiPrevented = true;
      },
      { isFirst: true },
    );

    return unsub;
  }, []);
  return (
    <GridColumnMenu
      {...props}
      slots={{
        // Add new item
        columnMenuUserItem: CustomUserItem,
      }}
      // @ts-ignore
      sx={{ maxHeight: 200, overflow: 'auto' }}
      slotProps={{
        columnMenuUserItem: {
          // set `displayOrder` for new item
          displayOrder: 15,
          // pass additional props
          myCustomValue: 'Do custom action',
          myCustomHandler: () => alert('Custom handler fired'),
        },
      }}
    />
  );
}

You can also limit the height of all poppers (menus) when applying slotProps on grid level:

<DataGrid
  {...data}
  slots={{ columnMenu: CustomColumnMenu }}
  slotProps={{
    basePopper: {
      sx: {
        '& .MuiPaper-root': {
          maxHeight: 300,
          overflow: 'auto',
        },
      },
    },
  }}
/>

Does this work for you?

[amrutamangaonkar]

Thanks for sending the solution @michelengelen this really helped.