[question] onRowsScrollEnd is never fired when initial data rows height less than table height

[sep2]

Order ID 💳

#35352

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

When the page is loaded first time, I fetched some initial data rows (e.g. 10 rows), displayed them in DataGridPro. Depending on the screen size of the users, the height of these rows may or may not exceed the height of the table, therefore a scrollbar may or may not be shown.

In the case a scrollbar did show, the user can simply load more data by just scrolling down the page, which will trigger onRowsScrollEnd correctly. However in the case of a larger screen, the scrollbar did not show, so DataGridPro will not trigger onRowsScrollEnd, therefore the user has no way to load subsequent data.

I would like to implement an infinite scrolling behavior that doesn't depends on the user's screen size. That is, DataGridPro should repeadedly load the data until a scrollbar is shown. Is this possible?

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[cherniavskii]

Yes, I can reproduce it with static grid height: https://codesandbox.io/s/infiniteloadinggrid-material-demo-forked-fb441f?file=/demo.tsx

[sep2]

Will there be ETA for this issue? This basically makes the infinite scrolling feature unavailable.

[cherniavskii]

We will look into it

[sbitenc]

Hi, i'm having the same issue. Any eta?

[sbitenc]

created a temporary workaround for anyone having the same issue. It's not pretty but it works in practice.

    const ref: React.MutableRefObject<HTMLDivElement | null> = React.useRef(null);


                <div ref={ref}>
                    < Grid ....
               </ div>

    React.useEffect(() => {
        const pageHax: number = (ref?.current?.clientHeight ?? 1) / 600; // 600 is the size of initial list height in px


       // here for example, i load 10 items and they exceed the size of 600px
        if (pageHax > uniqueList.length / 10 && !PageIsLoading && uniqueList.length > 0) {
            handleOnRowsScrollEnd();
        }
    }, [uniqueList.length]);

[cherniavskii]

Hey
Did you consider loading more rows initially to make sure there's enough rows on each screen size?

[sep2]

This is a possible workaround, but we can't assume the screen height of our users. The best we can do for now is adding a load more button at the end and ask users to click it. Maybe we can use intersection observer to find out when the button appears in viewport, and do the loading automatically.

[cherniavskii]

we can't assume the screen height of our users

By the way, why does screen size matter? Do you use vh units for grid container height?
I think initial loading of 20 rows should cover all cases?

[sep2]

Yes, the grid takes full browser height.

[RobinTail]

I'm experiencing the same issue trying to implement the infinite scrolling.
I found out that onRowsScrollEnd does not work correctly with autoHeight option.

Only when the DataGridPro if wrapped into something that has a fixed height, or an absolutely positioned and stretched to the viewport boundaries component, only in this case it works well.

[liho00]

This is a possible workaround, but we can't assume the screen height of our users. The best we can do for now is adding a load more button at the end and ask users to click it. Maybe we can use intersection observer to find out when the button appears in viewport, and do the loading automatically.

this is the proper way to achieve infinite scroll, hopefully we got this feature sooner.

I have an idea, add a slot for last row (empty div), and then we use IntersectionObserver on the last row empty div for infinitescroll. simple and precise solution

#7416 this pr can solve the infinite scroll issue, pls take a look guys!

[formatlos]

having the same issue, this also happens if the rows fit (almost )exactly ... I assume when the scrollable area is lower than thescrollEndThreshold

https://codesandbox.io/s/sleepy-farrell-uo38ju?file=/demo.tsx

[m4theushw]

This one is very similar to #4371 where the discussion has evolved more. I'm closing #4184