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.53k stars 1.32k forks source link

[DataGrid] Horizontal scroll with column spanning makes the cells jump #14130

Open arminmeh opened 3 months ago

arminmeh commented 3 months ago

Latest version

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-h5uqwq?file=Demo.tsx

Steps:

  1. Open the page
  2. Scroll the last grid horizontally

https://github.com/user-attachments/assets/d3326ca4-4f3d-4865-b61f-7f2ec1ff524a

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: column spanning

cherniavskii commented 3 months ago

I can't reproduce it in v6: https://stackblitz.com/edit/react-fgsjvx?file=Demo.tsx Which makes it a regression 👍🏻

MBilalShafi commented 2 months ago

It was introduced in https://github.com/mui/mui-x/pull/12353. (Check the column spanning demo for before and after builds attached in the PR description)

I think we need to find a way to disable dynamic virtualization when required. (This also causes issues in row spanning demo when virtualization is enabled)

@romgrk Do you think adding a default true boolean flag (like dynamicVirtualizationRange: boolean) could make sense here?

Update: https://github.com/mui/mui-x/issues/14130#issuecomment-2312864301

For the quick fix for this demo, we could just disableVirtualization until the issue with the dynamic virtualization range is solved.

romgrk commented 2 months ago

Not sure what the root cause is but I'd rather fix the virtualization logic than introduce a flag to disable the dynamic range, unless there's really an issue with the dynamic range.

MBilalShafi commented 2 months ago

Not sure what the root cause is but I'd rather fix the virtualization logic than introduce a flag to disable the dynamic range, unless there's really an issue with the dynamic range.

IIUC, the dynamic range makes the virtualization work only in one direction (direction of the scroll) and the XBufferPx doesn't have an impact in the other direction. Now this is a really good optimization for normal use cases, but for column and row spanning, it causes behavior similar to the one shown in the issue description.

That is why I thought about allowing the dynamic range to work like ScrollDirection.NONE using some flag so that we can reap the benefits of virtualization with these features too.

MBilalShafi commented 2 months ago

Correction. It was always an issue with the column spanning, dynamic virtualization range only surfaced it. Previously it was not reproduced in the demo because column virtualization was never kicking in.

See an example built on the v5 version of the Data Grid: https://codesandbox.io/p/sandbox/column-spanning-with-virtualization-4d6dpf, I only increased the number of columns and was able to reproduce the issue.