Sticky header in a useReactTable table with useVirtualizer disappears when scrolling

Describe the bug

When using a react-table together with vritualizer and a sticky header the sticky header disappears when scrolling. This is due to the fact that when combining the two the table should be wrapped in two divs:

1. The container that takes the height that should be taken up. This is the div that is scrollable
2. The div that directly wraps the container and takes the height of all the virtual items combined

Since the table element at any given time only contains the visible rows (plus overscan) the table itself has a height smaller than the wrapper div (nr. 2). This causes the sticky header to disappear when you scroll down since the sticky header cannot escape the table element.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/tanstack-react-virtual-example-dynamic-mr8t3x

Steps to reproduce

1. Add position: sticky to the thead element
2. Scroll down the table and watch how the header dissapears

Expected behavior

The header should stay on top since it is sticky.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Chrome

tanstack-virtual version

3.0.0-beta.68

TypeScript version

5.3.2

Additional context

I've tried getting rid of the wrapper div (nr. 2) and setting the height: ${getTotalSize()}px` directly on the table element but this causes the rows' height the grow because there are only ever enough rows to fit on the screen (plus overscan) but having the table the full height causes the rows to evenly divide the space between each other (making them a lot larger).

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.

Start with the linked CodeSandbox minimal reproduction and inspect how useReactTable, useVirtualizer, the scrollable container, and the wrapper containing the virtual items interact. Reproduce the disappearing thead while scrolling in Chrome, then verify that the sticky header remains visible without causing virtualized rows to expand incorrectly.