[data grid] Column Menu Positioning in MUI DataGridPremium

[Iuli1478]

Steps to reproduce

Open a DataGridPremium with several columns.
Scroll the grid to a point where one of the column headers is near the bottom of the viewport.
Click the column menu button (three dots) to open the menu.
Notice that the menu extends below the screen and is not fully visible.
Try scrolling the page; the menu will close automatically.

Current behavior

The menu extends below the screen when it doesn’t fit in the available space, causing some options to be inaccessible. Attempting to scroll the page to reach those hidden options causes the menu to close, which makes it impossible to select those menu items.

Expected behavior

The column menu should automatically reposition itself to fit within the visible viewport. For example, it could open upwards if there's not enough space below or introduce an internal scroll for the menu itself.

Context

When using the MUI DataGridPremium, I encountered a problem with the column menu positioning. If the column menu is triggered near the bottom of the viewport, it extends below the visible screen area. This causes part of the menu to be inaccessible. Additionally, if I try to scroll the page to view the hidden menu options, the menu closes automatically, making it impossible to interact with the options that are out of view.

Your environment

npx @mui/envinfo

System: OS: Windows 10 64-bit CPU: Intel Core i7-9700K Memory: 16 GB RAM

Binaries: Node: 16.14.0 - C:\Program Files\nodejs\node.EXE npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD

Browsers: Chrome: 117.0.5938.132 Firefox: 118.0 Edge: 117.0.2045.60

npmPackages: @mui/material: ^5.14.1 => 5.14.1 @mui/x-data-grid-premium: ^5.17.0 => 5.17.0 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0

Search keywords: DataGrid column menu offscreen

[michelengelen]

Hey @Iuli1478 this is the default behavior.
Could you share your implementation, since this works for me in the docs:

Screen.Recording.2024-10-30.at.10.56.46.mov

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Iuli1478 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[Iuli1478]

Continuing the discussion here as recommended by MUI support, with the correct MUI X license key applied for premium support: #15264