[datagrid] Virtualized columns when two elements are scrollsynced about mui-x HOT 14 CLOSED

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!

from mui-x.

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

from mui-x.

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

from mui-x.

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

from mui-x.

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.

from mui-x.

Thank you very much!
will give it a try

from mui-x.

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!

from mui-x.

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!

from mui-x.

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!

from mui-x.

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

from mui-x.

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

from mui-x.

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?

from mui-x.

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.

from mui-x.

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.

from mui-x.