[data grid] scrollToIndexes with lazyloading

[m-fercher]

I created an example application based on the lazy loading documentation example here:
https://codesandbox.io/p/sandbox/confident-benji-37qqyl?file=%2Fsrc%2FDemo.js

After the first couple of datagrid entries are loaded from the server we want to use scrollToIndexes() to navigate to a specific rowIndex. We tried using apiRef.current.scrollToIndexes() with a timeout in a useEffect which does work but we want to directly react to the rows being loaded and navigate afterwards.

The navigation itself does work when using onStateChange but once the focus is reset (e.g. by scrolling using the scrollbar) the grid scrolls back to the previously used coordinates.

tldr; We want to scroll with lazyloading and refrain from using timeouts and the scroll is supposed to happen only once in the beginning.

Also, I saw a similar issue here #15179 but we don't want to use timeouts as a solution.

Your environment

`npx @mui/envinfo`

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.20.4 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3
    @emotion/styled: ^11.13.0 => 11.13.0
    @mui/base: ^5.0.0-beta.4 => 5.0.0-beta.63
    @mui/core-downloads-tracker:  6.1.9
    @mui/icons-material: ^6.1.9 => 6.1.9
    @mui/lab: ^6.0.0-beta.17 => 6.0.0-beta.17
    @mui/material: ^6.0.0 => 6.1.9
    @mui/private-theming:  6.1.9
    @mui/styled-engine:  6.1.9
    @mui/system:  6.1.9
    @mui/types:  7.2.19
    @mui/utils:  6.1.9
    @mui/x-data-grid: 7.23.0 => 7.23.0
    @mui/x-data-grid-pro: ^7.23.0 => 7.23.0
    @mui/x-date-pickers: ^7.23.0 => 7.23.0
    @mui/x-internals:  7.23.0
    @mui/x-license: ^7.0.0 => 7.23.0
    @types/react: ^18.2.14 => 18.2.14
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Search keywords: scrollToIndexes, lazyLoading
Order ID: 102538

[michelengelen]

Interesting ... it is indeed very similar and maybe even a duplicate of #15179
@arminmeh could you please have a look into that?

[arminmeh]

Hey @m-fercher
The example you have provided works as expected.

You are setting the coordinates in useEffect to { rowIndex: 5000, colindex: 0 }
Each time you load new rows, state is changed and onStateChange is called which in turn does apiRef.current.scrollToIndexes(coordinates);

I see that your intention is to execute this only once. To achieve that you can set the scroll index in the useEffect that triggers the initial fetch

  // The initial fetch request of the viewport.
  React.useEffect(() => {
    if (rowsServerSide.length === 0) {
      return;
    }

    (async () => {
      const { slice, total } = await fetchRow({
        firstRowToRender: 0,
        lastRowToRender: 10,
        sortModel: [],
        filterModel: {
          items: [],
        },
      });

      setInitialRows(slice);
      setRowCount(total);

      apiRef.current.scrollToIndexes({ rowIndex: 5000, colindex: 0 });
      apiRef.current.setCellFocus("id-8057", "name");
    })();
  }, [apiRef, rowsServerSide, fetchRow]);

in this case you don't need onStateChange nor the coordinates state anymore.

Will this solve your issue?