angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

Angular Material CDK scrolling - Display a million items is not working... #23174

Open mahop-net opened 3 years ago

mahop-net commented 3 years ago

How to Reproduce:

Cause:

Possible Solution:

dev-ptera commented 2 years ago

Was there ever a solution found to this? I'm encountering the same issue & my dataset involves elements with >1M.

viniciusschuelter commented 2 years ago

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

mmalerba commented 2 years ago

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

MaximPVladimirovich commented 1 year ago

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.

viniciusschuelter commented 1 year ago

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.

MaximPVladimirovich commented 1 year ago

Screenshot 2023-01-17 at 8 40 33 PM It seems to be ok here.

viniciusschuelter commented 1 year ago

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.