[DataGrid] Add methods to save and restore scroll position

[joe0BAB]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

There already is an API to export/restore parts of the Datagrid state (related to #820). It would be awesome to extend this and add scroll position. As a current workaround we hook into rowScroll event to persist scroll position but restoring it is a bit hacky:

useEffect(() => {
    setTimeout(() => {
      apiRef.current.scroll({
        top: scrollPosition,
        left: 0,
      });
    });
  }, [apiRef.current]);

Without the setTimeout hack we get

Examples 🌈

No response

Motivation 🔦

We want to be able to restore Datagrid scroll position. Ideally by using initialState prop.

Maybe there's a workaround until then that's cleaner as the hack suggested above.

Order ID 💳 (optional)

41693

[m4theushw]

Could you provide a reproduction demonstrating the error you see? With static rows it works, but with rows loaded from the server it didn't, but no error.

We do can allow to save the scroll position and restore it passing the value in the initialState prop. But first I would like to understand the error message, it might be related to #4674

[AndreSilva1993]

The issue you mentioned has the exact same error that we're experiencing but I can try to get you a quick reproducible example. We're just calling apiRef.current.scroll inside an useEffect (which has apiRef.current as a dependency) so it should be easily reproducible on a codesandbox. Tomorrow we'll post something!

[AndreSilva1993]

There you go - https://codesandbox.io/s/compassionate-kirch-bpxoz1?file=/src/App.tsx

@m4theushw Is there something wrong in our usage? I'd assume that waiting for apiRef.current should be enough.

[m4theushw]

@AndreSilva1993 your usage is correct for any React component, but the DataGrid doesn't work with it. When the effect runs it only means that apiRef is available, however, windowRef will only become available after some other state changes.

[AndreSilva1993]

@m4theushw Then how would you suggest for us to deal with us? I feel like waiting for windowRef is a bit hack-ish as it's an internal implementation.

[HansBrende]

@m4theushw

We do can allow to save the scroll position and restore it passing the value in the initialState prop.

I don't see this anywhere in the initialState typings... did you mean you currently do allow, or you do not allow yet but can allow later?

[noghartt]

Hey guys, is there any update on that? Any method to store and restore the last scrolled position on datagrid?

[sibelius]

any workaround ?