Skip to content

fix(data-table): keep virtualized header sticky across full scroll range#775

Draft
paanSinghCoder wants to merge 1 commit intomainfrom
fix/datatable-sticky-header-virtualized
Draft

fix(data-table): keep virtualized header sticky across full scroll range#775
paanSinghCoder wants to merge 1 commit intomainfrom
fix/datatable-sticky-header-virtualized

Conversation

@paanSinghCoder
Copy link
Copy Markdown
Contributor

Summary

DataTable.VirtualizedContent applies position: sticky; top: 0 to the column header, but it only stayed pinned for ~one header row of scroll, then drifted off with the body.

position: sticky is bounded by its containing block. The sticky class was on the inner VirtualHeaders rowgroup, 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 stickyHeader class onto the wrapper itself. Its containing block becomes .virtualTable (full content height), so the header now stays pinned for the entire scroll range. The headerRef measurement is unaffected (same node).

Test plan

  • Open the virtualized DataTable example, scroll inside the table, and confirm the column header stays pinned at the top throughout the scroll (not just the first row).
  • Group by a column with stickyGroupHeader enabled and confirm the group anchor still stacks correctly under the column header.
  • Resize the viewport and confirm headerHeight (used to position the sticky group anchor) remains correct.

`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.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
apsara Ready Ready Preview, Comment May 6, 2026 2:57am

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 6, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 383f58ac-ccf1-476c-b4d3-b419084c7de9

📥 Commits

Reviewing files that changed from the base of the PR and between 78b7563 and 9477979.

📒 Files selected for processing (1)
  • packages/raystack/components/data-table/components/virtualized-content.tsx

📝 Walkthrough

Walkthrough

The 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

  • rsbh
  • rohanchkrabrty
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: moving sticky header styling to keep the virtualized header pinned across the full scroll range, which is the primary focus of this UI refactor.
Description check ✅ Passed The description is directly related to the changeset, explaining the problem with sticky positioning, the solution implemented, and providing a clear test plan that matches the code change.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ 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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant