fix(data-table): keep virtualized header sticky across full scroll range#775
fix(data-table): keep virtualized header sticky across full scroll range#775paanSinghCoder wants to merge 1 commit intomainfrom
Conversation
`position: sticky` is bounded by its containing block. The sticky class was on the inner `VirtualHeaders` rowgroup, but the wrapping `<div ref={headerRef}>` (used for measurement) became the containing block and was only one header-row tall — so the header detached after ~one row of scroll.
Move `stickyHeader` onto the wrapper itself so its containing block becomes `.virtualTable` (full content height), restoring sticky behavior for the entire scroll range.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe pull request refactors the header wrapper structure in the VirtualizedContent component. The sticky header class and ref are relocated from the VirtualHeaders component to the outer wrapper div that contains it. This is a structural change affecting how styling is applied to the header elements, with no changes to the underlying virtualization logic. Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary
DataTable.VirtualizedContentappliesposition: sticky; top: 0to the column header, but it only stayed pinned for ~one header row of scroll, then drifted off with the body.position: stickyis bounded by its containing block. The sticky class was on the innerVirtualHeadersrowgroup, while the outer<div ref={headerRef}>(used to measure header height) became the containing block. That wrapper is only one header-row tall, so sticky had effectively no scroll range to live in.This PR moves the
stickyHeaderclass onto the wrapper itself. Its containing block becomes.virtualTable(full content height), so the header now stays pinned for the entire scroll range. TheheaderRefmeasurement is unaffected (same node).Test plan
stickyGroupHeaderenabled and confirm the group anchor still stacks correctly under the column header.headerHeight(used to position the sticky group anchor) remains correct.