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

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

We will look into it

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

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]);

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

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.

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?

Yes, the grid takes full browser height.

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.

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!

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

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