sticky header for virtualized table gets scrolled after scrollTop reaches table height
I have an issue with a virtualized table with a sticky header.
Apparently the
sticky css suppose that scrollTop of the container is less than the height of the content being scrolled.
But for virtual lists this is not true, because height of the content is quite fixed = (overscan * 2 + number of visible rows)*rowHeight , but the conteiner's scrollTop property being increased as you scroll.
That way, after you scroll to the point when scrollTop is bigger than the content's height, sticky header gets scrolled up together with the rows. (it will flicker unpleasantly before doing so).
How does everyone deals with this behavior?5 Replies
fascinating-indigoOP•2y ago
I've managed to fix that with the
smooth scrolling behavior example! Basically I just added a single tr after the virtualized rows with the height of sum of heights of the real rows minus sum of heights of virtualized rows.optimistic-gold•2y ago
I solved this, by adding a paddingStart by calculating the table headers height using a ref.
optimistic-gold•2y ago
Sean Cassiere
StackBlitz
virtualized-datagri-starter - StackBlitz
Run official live example code for Virtual Table, created by Tan Stack on StackBlitz
sensitive-blue•4mo ago
Thanks for the help almost 2 years later!
equal-aqua•2w ago
Hey guys, am facing the same issue and I don't fully understand the proposed solutions here, if anyone has some free-time and could elaborate more that would be very much appreciated!
For context am using tanstack table wrapped with radix-ui ScrollArea and tanstack virtual ( and yes I have correctly sat the parentRef to the ScrollAreadViewPort )