[DataGrid] Issue while resizing with pinned columns

[Janpot]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/column-pinning/#initializing-the-pinned-columns

Steps:

1. Open the demo on the docs
2. Hide the first center column
3. Resize the first column smaller

Current behavior

At some point the pinned column starts moving to the left, leaving behind empty space. Once you let go of the mouse button, the pinned column snaps back to the right.

https://github.com/mui/mui-x/assets/2109932/6afcf3e2-5e83-47fb-9af2-4a2b2720cc30

Expected behavior

The rightmost column always stays pinned during resizing

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: pinned column resizing

[romgrk]

Seems to be fixed by https://github.com/mui/mui-x/pull/12979, but that PR still has unsolved problems.

[kenanyusuf]

Discovered that this is a problem with decreasing the size of any column:

https://github.com/user-attachments/assets/1be8b1fb-8e58-45da-8ff2-b3869f1fdad9

The empty cell does not fill the gap correctly during resizing. Though it is more apparent when you have a right pinned column.

Should be fixed in #15107

[cherniavskii]

Fixed in v7 by https://github.com/mui/mui-x/pull/16193 https://deploy-preview-16193--material-ui-x.netlify.app/x/react-data-grid/column-pinning/

[github-actions[bot]]

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.