components
components copied to clipboard
angular
Angular Material CDK scrolling - Display a million items is not working...
How to Reproduce:
- Take the first example from https://material.angular.io/cdk/scrolling/examples open it in stackblitz an display 1 Mio instaed of 100,000
- Scroll down to the end. The last item displayed is 213,043
Cause:
- Maximum height of single Elements in Browsers
Possible Solution:
- Use more than one element inside the ViewPort to render Items
Was there ever a solution found to this? I'm encountering the same issue & my dataset involves elements with >1M.
This is actually a navigator limitation(values), i cant see a easy way to solve this, maybe if create constants with the height limit per browser we can do some handling. But what would it be? any ideas @crisbeto @mmalerba
I looked into this at one point and its pretty tricky. IIRC its not just height that breaks down, but scrollTop as well. Even if I used multiple elements for the spacer, I couldn't figure out a good method of figuring out where the user was scrolled to
I played with the the example in stackblitz. I changed the itemSize to 1 and removed appendOnly. It's a temporary fix. https://stackblitz.com/edit/angular-eb1m1s?file=src/app/cdk-virtual-scroll-append-only-example.ts. I'll dig deeper and see if I can figure out what might be the underlying problem.
Idk, the limitation continue, change de size array of 10kk to 50kk and u can see what happening, the last item will be "Item #33554133" the exact chrome height limitation. And also this virtualization is kinda weird, if u set de itemSize to 1px the item-list should 1px as well, but actually have 50px so the virtualization is rendering 50x more than necessary.
It seems to be ok here.
Try with 50kk instead of 10kk, another way to check something is wrong is open your inspector and count what is currently rendered "document.getElementsByClassName("example-item").length", the result will be 400 items 50x more than correct , which should be 8 items.