search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.57k stars 1.34k forks source link

[DataGrid] Issue while resizing with pinned columns #13548

Open Janpot opened 5 months ago

Janpot commented 5 months ago

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 commented 5 months ago

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

KenanYusuf commented 4 weeks ago

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