[datagrid] Virtualized columns when two elements are scrollsynced

[netouson]

Order ID

74451

The problem in depth 🔍

We have two DataGridPremium tables - with a lot of columns. we want to virtualize the columns (performance issues) and sync the scroll between them with scrollsyncpane (and other components). when using scrollsync the width need to be set and that clashes with the column virtualization.

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 13.5 Binaries: Node: 18.12.1 - /usr/local/bin/node Yarn: Not Found npm: 8.19.2 - /usr/local/bin/npm Browsers: Chrome: 116.0.5845.187 Edge: Not Found Safari: 16.6 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.11 @mui/core-downloads-tracker: 5.14.5 @mui/icons-material: ^5.14.3 => 5.14.3 @mui/material: ^5.14.5 => 5.14.5 @mui/private-theming: 5.14.5 @mui/styled-engine: 5.13.2 @mui/system: 5.14.5 @mui/types: 7.2.4 @mui/utils: 5.14.8 @mui/x-data-grid: 6.13.0 @mui/x-data-grid-premium: ^6.13.0 => 6.13.0 @mui/x-data-grid-pro: 6.13.0 @mui/x-date-pickers: ^6.11.2 => 6.11.2 @mui/x-license-pro: 6.10.2 @types/react: ^18.2.20 => 18.2.20 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.1.6 => 5.1.6 ```

[romgrk]

Column virtualization already exists by default. Can you share a minimal reproduction test case with the latest version. This would help a lot 👷. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[netouson]

https://codesandbox.io/s/wizardly-solomon-c9nnyx?file=/demo.tsx Here is a reproduction of the issue

[romgrk]

You can use useGridApiEventHandler(apiRef, 'scrollPositionChange', (params, event) => { ... }) to react to scroll events, and you can use apiRef.current.virtualScrollerRef.current to access the grid DOM node with scrollbars. Don't try to wrap the grid with custom scrollbars.

https://mui.com/x/react-data-grid/events/#with-usegridapieventhandler

[netouson]

Is this the only way? how can we optimize it so it wont show lag when scrolling and it would feel more seamless? Thanks

[romgrk]

You can add a vanilla javascript handler attached to the apiRef.current.virtualScrollerRef element that listens to scroll events, and reflects it to the other grid. You will need to ensure that programatically scrolling one doesn't trigger the other one's scroll event, to avoid the scroll behaving weirdly (if it gets semi-locked, not scrolling for more than a few pixels, it means you're hitting this case).

Be sure to free the resources and detach the event listeners when your components are unmounted.

[netouson]

Thank you very much! will give it a try

[netouson]

Im having a problem when forwarding the ref to the datagridpremium - could you please write a small example on how to sync-
const apiRefData = useGridApiRef() with a forwardRef? Thank you!

[netouson]

Im having a problem when forwarding the ref to the datagridpremium - could you please write a small example on how to sync- const apiRefData = useGridApiRef() with a forwardRef? Thank you!

[romgrk]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[netouson]

https://codesandbox.io/s/loving-vaughan-wg84tf?file=/demo.tsx basically when scrolling the position left is always on 0 and not propagating.

[romgrk]

The link you shared does not run. Please provide a minimally working link.

[netouson]

https://codesandbox.io/s/lucid-pateu-tm6n6z?file=/demo.tsx sorry! from what I can see on my end- on the top element that forwards the ref the current.scrollLeft is always 0 and cant be set. maybe Im not accessing it correctly?

[romgrk]

The horizontal scroll sync is working in that link for me. Could you clarify what is not working for you? Make sure to include good reproduction steps.

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.