[data grid] Need to use column grouping, leaf field, pinning and detail panel in a single grid

[mltuasonbmcd]

The problem in depth

I am trying to use the premium Data Grid with grouping with a specific leaf field, pinned column, and a detail panel. I cannot determine how to combine them and get the grid to render correctly after the initial load (for example, I have the grid displayed on a tab and when I toggle to a different tab and return to the grid, the columns attempt to reorder and place them in the wrong order.

Initial Load:

After toggling display using a Tab:

Your environment

`npx @mui/envinfo`

System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (131.0.2903.51) npmPackages: @emotion/react: ^11.14.0 => 11.14.0 @emotion/styled: ^11.14.0 => 11.14.0 @mui/core-downloads-tracker: 6.4.2 @mui/icons-material: ^6.4.2 => 6.4.2 @mui/material: ^6.4.2 => 6.4.2 @mui/private-theming: 6.4.2 @mui/styled-engine: 6.4.2 @mui/system: 6.4.2 @mui/types: 7.2.21 @mui/utils: 6.4.2 @mui/x-charts: 7.24.1 @mui/x-charts-pro: ^7.24.1 => 7.24.1 @mui/x-charts-vendor: 7.20.0 @mui/x-data-grid: 7.27.0 @mui/x-data-grid-premium: ^7.27.0 => 7.27.0 @mui/x-data-grid-pro: 7.27.0 @mui/x-internals: 7.24.1 @mui/x-license: ^7.24.1 => 7.24.1 @types/react: ^18.3.18 => 18.3.18 react: 18.3 => 18.3.1 react-dom: 18.3 => 18.3.1 typescript: ^5 => 5.7.3

Search keywords: Group Pin Panel Leaf

Order ID: 17890456

[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! 🙇🏼

[mltuasonbmcd]

Sure thing, attached a sample .tsx showing the formatting issues.

Sample.tsx.txt

[michelengelen]

Hey @mltuasonbmcd ... I added your example into a tab sequence and for me it does work as expected. There is no shift in columns to be seen. I tested this with v7 and v8. Could it be that you have another factor that might cause this somewhere?

Screen.Recording.2025-03-19.at.10.14.30.mov

[mltuasonbmcd]

It must be something else, will continue to research. Thank you so much for the help!

[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.