[question] - Infinite Loading Server Side.

[vsspt]

Order ID 💳

#28950

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I'm using Infinite Loading, with loading being done server side.
Although the loading in chunks is being correctly executed, and the number of row reflects it, the Grid is not rendering all the rows, and just a small subset of them.

The problem in depth 🔍

I've researched Infinite Loading, having found two resources:

• [data grid] Lazy load data with virtualization #1247
• [DataGrid] Add onRowsScrollEnd to support infinite loading #1199

These resources provide two examples:

• Documentation: https://deploy-preview-1199--material-ui-x.netlify.app/components/data-grid/rows/#infinite-loading
• Demo: https://deploy-preview-1199--material-ui-x.netlify.app/storybook/?path=/story/x-grid-tests-rendering--infinite-loading

Based on these examples, i create a Sandbox that loads the data from an Backend API that provides paging:

• https://codesandbox.io/s/billowing-platform-mq6tl?file=/src/App.js

Unfortunately, although loading in chunks is being correctly executed, and the number of row reflects it, the Grid is not rendering all the rows, and just a small subset of them.

I must be missing some small detail, but i cannot find what it is.

What am i missing?

Thank you!

Context 🔦

Replacing all the regular Paging with Infinite Loading on all grids.

Your environment 🌎

`npx @material-ui/envinfo`

  ←[4mBinaries:←[0m
    Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
  ←[4mUtilities:←[0m
    Git: 2.29.2.
  ←[4mBrowsers:←[0m
    Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38)
    Internet Explorer: 11.0.19041.1202
  ←[4mMonorepos:←[0m
    Yarn Workspaces: 1.22.15
    Lerna: 4.0.0

[DanailH]

Hi, @vsspt thanks for raising this.

Yes, for now, we don't support the server-side infinite loading out of the box. The ticket you mentioned #1247 aims to do that but there was a delay with it.

I assume that in order to implement the server-side infinite loading you need to set the total grid rowCount. The problem is that for now, you would also need to provide the grid with "dummy" rows (empty) and then swap them while you scroll with your "real" rows. There is a prop you can use to know which rows you need to load and in what position -> onViewportRowsChange (more on it here https://v4.mui.com/api/data-grid/data-grid-pro/#main-content).

We haven't done a demo for it but now that there is demand I think we should spend some time to do it, @mui-org/x ?

[vsspt]

Good afternoon and thank you for the quick response.

Could you please inform me?

1. Could you provide any time estimate on when [data grid] Lazy load data with virtualization #1247 will be available?
2. A demo would be extremely useful, given how important this Use Case is for the majority of users; i would suspect that almost everyone that is using the Datagrid in production environments is loading and paging the data Server side ...

Regards!

[DanailH]

We don't plan on working on #1247 this quarter, but we've been discussing working on the demo. It will utilize the onViewportRowsChange prop.

[vsspt]

Good afternoon!
Could you please provide an estimate on when the Demo might be available?
Thank you!

[DanailH]

@vsspt, unfortunately, I can't give you an exact estimate of when the demo will be available because this PR #2673 will change the internals that this prop relies on.

[oliviertassinari]

I'm closing for #1247. This issue is indeed about having pages of up to 100,000 rows, and lazy loading rows as they are visible in the viewport (inside these large pages). This is about significantly reducing the need for a footer pagination, a UX requirement that some products have.