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

[danprat92]

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

307093934-1477c3a9-9396-407c-81e6-2550f45a5f08.mov

Platform

macOS

tanstack-virtual version

3.1.1

TypeScript version

No response

Additional context

Table: 8.12.0

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[hahatulk]

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]

This situation is also obvious on mobile phone devices

[Muhammad-bK]

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

[NeerabhKr]

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]

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]

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?

[romlacerda]

Any solution???

[piecyk]

Any solution???

@romlacerda is this happening more?

@danprat92 can you update virtual to latest, or covert the example to https://stackblitz.com/

[romlacerda]

Any solution???

@romlacerda is this happening more?

@danprat92 can you update virtual to latest, or covert the example to https://stackblitz.com/

@piecyk
Unfortunately, yes.

[xeinebiu]

I had the same performance issue (facing frame loss) while scorlling. Many will say its MUI, Chakra, Mantine issue and if you use native html elements directly it goes away, but I wonder, why then using https://github.com/bvaughn/react-window I do not face any performance issue

This for sure its a Tanstack virtual issue and has to be addressed, because the point to use virtualisation is to prevent frame loss or performance issues :D

[suitux]

I'm facing the same problem

[suitux]

I ended migrating it to react-window with Autosizer and InfiniteLoader 😄

[piecyk]

Thanks, I’ll take a look at the issue soon and work on improving the performance to prevent frame loss. If you’re interested, I’d be happy to accept any PRs that tackle this in the meantime. Appreciate your patience!"

[piecyk]

Kinda connected with #860

[rui-reevo]

Facing the same issue, just follow the example on the doc with perhaps 20 columns using radix component to render. Pretty lagging.

[piecyk]

Facing the same issue, just follow the example on the doc with perhaps 20 columns using radix component to render. Pretty lagging.

@rui-reevo looks like adding will-change helps a bit with lag, checkout #860 (comment) ping us if that had any effect.

[soliyapintu]

#860 (comment) still facing issue after implementing solution.

[YuesIt17]

Hi!
I did this problem via smooth-scroll #860 (comment)

[Gokul-Nath-27]

@YuesIt17 Have you resolved the issue using smooth-scroll as mentioned in the docs ?

[YuesIt17]

@YuesIt17 Have you resolved the issue using smooth-scroll as mentioned in the docs ?

Yes, in my case scrolling works faster after adding function scrollToFn to hook useVirtualizer

const rowVirtualizer = useVirtualizer({
    count: 10000,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
    overscan: 5,
    scrollToFn,
  })

[Gokul-Nath-27]

@YuesIt17 In my case I have used the same scrollToFn, still white space occurs even while scrolling a bit faster. I have memoised all the cell and the rows. Still facing the same. Let's say if I'm scrolling for a while, the scroll become too laggy. @piecyk

Also added the the performant css properties

contain: 'paint', willChange: 'transform'

still facing the same issue

Using
"@tanstack/react-table": "^8.20.5"
"@tanstack/react-virtual": "^3.10.8"

Screen.Recording.2024-12-11.at.23.40.23.online-video-cutter.com.mp4

[soliyapintu]

@piecyk how can i display skeleton in table-cell instead white or blank spaces?

[YuesIt17]

@YuesIt17 In my case I have used the same scrollToFn, still white space occurs even while scrolling a bit faster. I have memoised all the cell and the rows. Still facing the same. Let's say if I'm scrolling for a while, the scroll become too laggy. @piecyk

Also added the the performant css properties

contain: 'paint', willChange: 'transform'

still facing the same issue

Using "@tanstack/react-table": "^8.20.5" "@tanstack/react-virtual": "^3.10.8"

Screen.Recording.2024-12-11.at.23.40.23.online-video-cutter.com.mp4

I have the same lagg.

@piecyk, maybe there is some other optimization for sluggish scrolling?

[piecyk]

@YuesIt17 Not really, first we need to identify the root cause and figure out what's causing the slowdown. Thanks for your patience! I'm working on debugging this and updating the example, Just juggling a lot at the moment.

[YuesIt17]

@YuesIt17 Not really, first we need to identify the root cause and figure out what's causing the slowdown. Thanks for your patience! I'm working on debugging this and updating the example, Just juggling a lot at the moment.

@piecyk It would be nice to add this example to the official documentation with row + column virtualization + smooth-scroll for a table.
Thanks for your feedback🤝