TanStack / virtual

🤖 Headless UI for Virtualizing Large Element Lists in JS/TS, React, Solid, Vue and Svelte
https://tanstack.com/virtual
MIT License
5.43k stars 293 forks source link

Rendering lag when using virtualised for both rows and columns along with Tanstack/table #685

Open danprat92 opened 7 months ago

danprat92 commented 7 months ago

Describe the bug

I'm currently using table + virtual in this example here

Blank page is shown when scrolling horizontally and vertically, lots of warning that scroll handler took too long

Your minimal, reproducible example

here

Steps to reproduce

Can be reproduced in this example here

Scroll vertically and horizonally causes blank screen, lots of scroll handler warnings about taking too long to execute it

Expected behavior

No blank page shown

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/TanStack/virtual/assets/9660071/7090b066-7515-4af8-a3d7-398f0c900ff3

Screenshot 2024-03-04 at 21 45 33

Platform

macOS

tanstack-virtual version

3.1.1

TypeScript version

No response

Additional context

Table: 8.12.0

Terms & Code of Conduct

hahatulk commented 6 months ago

important notice on windows this happens only when table is hardware accelerated, but still bad performace without hardware acceleration it just scrolls very laggy

Sphinm commented 5 months ago

This situation is also obvious on mobile phone devices

Muhammad-bK commented 2 months ago

I am using Material React Table which uses TanStack Virtual for virtualization and I am experiencing this same problem

NeerabhKr commented 1 month ago

Add this style to your parent div where you put overlow scroll , this is working fine for me -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

hahatulk commented 1 month ago

Add this style to your parent div where you put overlow scroll , this is working fine for me -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

This is not solution. It is just telling browser not to wait render of rows and continue scrolling. Rows are still rendered very slow

cmachu commented 1 week ago

I have same problem with Material React Table. Method maybeNotify can take up to 400ms with large datasets. I have tried different configuration of Virtualizer, but nothing helps. Any solution?