Scrolling with items of dynamic height lags and stutters are lot

[logeekal]

Describe the bug

Objective

https://github.com/user-attachments/assets/c82f19f2-c0ed-4f83-9d28-a10985342e5e

As you can see in the above video, we have a data grid in which each row is being accompanied by an additional row which shows the status of customer's outstanding fees ( here i have added some random text ) which can be actually of variable height. Currently the table that I am using does not support virtualization in this state

Now from the perspective of react-virtual, I am passing the combination of the table row + additional row as a single row so that I can make use of List virtualization.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/custom-body-render-virtual-nk7wr9?file=%2Fdemo.tsx%3A227%2C1-228%2C1

Steps to reproduce

1. Go to the linked code sandbox
2. Scroll the table as normal in preview.

You can see the implementation of useVirtualizer as line 227.

https://github.com/user-attachments/assets/e0605881-c367-4381-af6d-efa89b94bead

Expected behavior

Scrolling should be smooth.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

MacOS

• firefox
• chrome

tanstack-virtual version

v3.10.7

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] 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.

[piecyk]

@logeekal Something is really slow there, was trying to checkout the preview but it freezes, even without scrolling.

[logeekal]

Thank you @piecyk for your revert. I switch debug off for react-virtual and now the sandbox seems to be working for me. Could you please check again.

The exact implementation of virtualizer is here.

[piecyk]

Thank you @piecyk for your revert. I switch debug off for react-virtual and now the sandbox seems to be working for me. Could you please check again.

The exact implementation of virtualizer is here.

There is a typo transform at end you have an extra }

basic it should be

transform: `translateY(${items[0]?.start ?? 0}px)`,

Second is something off with indexes, like CustomExtraRowCellRender renders difrient index from virtual that changes it size while scrolling.

Another issue is the setCellProps, CustomExtraRowCellRender looks like when row is unmounted the height is reseted from auto that trigger updating the row height an re calculations,

https://codesandbox.io/p/sandbox/custom-body-render-virtual-forked-pydzxx?file=%2Fdemo.tsx%3A127%2C3-127%2C15

[logeekal]

Thank you very much @piecyk . I spend 2 days looking into why this was not working 🤦‍♂ . Sorry for bothering and thanks for pointing out the issue.

You are right about setCellProps and i can go ahead and delve into its logic. Closing this issue for now. Thanks.