[DataGrid] Problem between features pinnedColumns and column grouping

[nade33]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/zen-chandrasekhar-2tfskp?fontsize=14&hidenavigation=1&theme=dark

Steps:

1. Create a table enabling the column grouping by allowing this experimental feature
2. Define the property pinnedColumns property to have only one column of the column group

Additionally you'll also get the problem if you try to pin the column via the the column menu and with no state initiation

Current behavior 😯

When pinning to the left a single column from the utmost left column group, the column header is considered as fully pinned and hides the remaining(s) column headers of the group.
Those columns arent accessible and can't be pinned/sort/filtered.

Expected behavior 🤔

The grouping is split by the pinning just like pinning from a column group that comes from the "middle of the table"

Context 🔦

I have a datagrid displaying many columns in order to facilitate the navigation, we used column grouping to hide/show some column blocks. The basic info is pinned to the left but the user can define his own setting.
So if he unpins a column that he finds less relevant he cannot see it anymore or change its status.

Your environment 🌎

npx @mui/envinfo

 Browser firefox 112.0.1
System:
    OS: Linux 5.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 18.16.0 - /usr/local/share/nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.5.1 - /usr/local/share/nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @mui/base:  5.0.0-alpha.126 
    @mui/core-downloads-tracker:  5.12.2 
    @mui/lab: ^5.0.0-alpha.127 => 5.0.0-alpha.127 
    @mui/material: ^5.12.2 => 5.12.2 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/styled-engine-sc: ^5.12.0 => 5.12.0 
    @mui/system:  5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @mui/x-data-grid:  6.2.1 
    @mui/x-data-grid-pro: ^6.2.1 => 6.2.1 
    @mui/x-license-pro:  6.0.4 
    @types/react: ^18.0.38 => 18.2.0 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components: 5.3.10 => 5.3.10 
    typescript: ^5.0.4 => 5.0.4 

Order ID or Support key 💳 (optional)

42922

[m4theushw]

It's a limitation of column grouping. Please upvote #7041