From 9477979d5399c865a022666e4249b9c8dea7bb1e Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Wed, 6 May 2026 08:25:09 +0530
Subject: [PATCH 1/2] fix(data-table): keep virtualized header sticky across
 full scroll range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`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.
---
 .../data-table/components/virtualized-content.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/raystack/components/data-table/components/virtualized-content.tsx b/packages/raystack/components/data-table/components/virtualized-content.tsx
index d6f3b5a9b..a4fdd9abb 100644
--- a/packages/raystack/components/data-table/components/virtualized-content.tsx
+++ b/packages/raystack/components/data-table/components/virtualized-content.tsx
@@ -332,11 +332,11 @@ export function VirtualizedContent({
       onScroll={handleVirtualScroll}
     >
       <div role='table' className={cx(styles.virtualTable, classNames.table)}>
-        <div ref={headerRef}>
-          <VirtualHeaders
-            headerGroups={headerGroups}
-            className={cx(styles.stickyHeader, classNames.header)}
-          />
+        <div
+          ref={headerRef}
+          className={cx(styles.stickyHeader, classNames.header)}
+        >
+          <VirtualHeaders headerGroups={headerGroups} />
         </div>
         {stickyGroupHeader && isGrouped && stickyGroup && (
           <div

From c56b032c904945a32eac7571f0af569c57c76a34 Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Wed, 6 May 2026 14:26:36 +0530
Subject: [PATCH 2/2] fix(data-table): adjust padding, height, and margin for
 improved header layout

---
 .../raystack/components/data-table/data-table.module.css   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css
index 187b2ca48..810729899 100644
--- a/packages/raystack/components/data-table/data-table.module.css
+++ b/packages/raystack/components/data-table/data-table.module.css
@@ -186,7 +186,10 @@
   align-items: center;
   background: var(--rs-color-background-base-secondary);
   font-weight: var(--rs-font-weight-medium);
-  padding: var(--rs-space-3);
+  padding: 0 var(--rs-space-3);
+  height: var(--rs-space-10);
+  margin-bottom: calc(-1 * var(--rs-space-10));
+  box-sizing: border-box;
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: 0 1px 0 0 var(--rs-color-border-base-primary);
 }
@@ -202,7 +205,7 @@
 /* Non-virtualized: sticky section header under table header */
 .stickySectionHeader {
   position: sticky;
-  top: var(--rs-space-10);
+  top: var(--rs-space-8);
   z-index: 1;
   background: var(--rs-color-background-base-secondary);
   box-shadow: 0 1px 0 0 var(--rs-color-border-base-primary);