[data grid] Is there a way to fix this right pin issue when using column grouping?

[fionaDawn]

Order ID 💳

51218

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Weird behavior when pinning any column to the right under the last column group

Codesandbox straight from MUI's Defining Column Group demo

Screen.Recording.2022-11-24.at.6.01.11.PM.mov

Your environment 🌎

`npx @mui/envinfo`

 System:
    OS: macOS 12.6
  Binaries:
    Node: 17.4.0 - ~/.nvm/versions/node/v17.4.0/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.6.0 - ~/.nvm/versions/node/v17.4.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.121
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.0
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.3 
    @emotion/styled: ^11.8.1 => 11.9.3 
    @mui/base:  5.0.0-alpha.85 
    @mui/icons-material:  5.8.4 
    @mui/lab:  5.0.0-alpha.86 
    @mui/material:  5.8.4 
    @mui/private-theming:  5.8.4 
    @mui/styled-engine:  5.8.0 
    @mui/styles:  5.8.4 
    @mui/system:  5.8.4 
    @mui/types:  7.1.4 
    @mui/utils:  5.10.6 
    @mui/x-data-grid:  5.17.9 
    @mui/x-data-grid-pro:  5.17.9 
    @mui/x-date-pickers:  5.0.0-alpha.6 
    @mui/x-license-pro:  5.17.0 
    @types/react:  17.0.47 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.7.4 

[m4theushw]

It's a limitation of column grouping. It doesn't play well with column pinning. I added "waiting for 👍" to get votes from the community to know if we should prioritize this.

[mamodev]

up vote! this is an annoyng issue

[fionaDawn]

Is there a way to disable or remove "Pin to the right" in the meantime?

[MBilalShafi]

Is there a way to disable or remove "Pin to the right" in the meantime?

With the new implementation of the column menu API released in v6, you can customize the custom pinning item in the ColumnMenu to remove a pinning item until a proper fix for the bug is there.

I stripped off some logic from the default PinningItem to keep only Pin to Left part in this codesandbox example.

For more examples of how to customize the column menu, see the documentation.

Caution: ColumnMenu API will be using slots/slotProps instead of components/componentsProps in the upcoming release, here's the related PR: #7999

[claudioctonha]

Is there any way to fix this? I am facing the same issue.

[RubtsovAV]

the same

[saikumarf9]

Hey, Any update on this?

[hafley66]

Hi in the same boat here. I am trying to use pinned columns with columns that do not belong to column groups. Here is another repro, https://codesandbox.io/s/icy-sun-fx7kdr?file=/Demo.tsx

The issue happens when the "Age" column disappears after uncommenting out the pinnedColumns prop.

The true error is that the pinned columns first row of the headers is too long, you can see it in the "data-fields" attribute, it has not just the pinned columns, but also the next ungrouped column.

[hafley66]

https://codesandbox.io/s/pinned-and-grouped-fix-vgdpxm?file=/Demo.tsx

I manage a library that wraps this one for my company. I have spots where i add special fields to the columns defs and such, and i just figured out how to get around this.

i made sure that any col def that had no grouping was given a "phantom" group definition on behalf of the user. feel free to adopt this code.

if you dont want to center the column headers like i do in the demo, just remove the styled code