From 9477979d5399c865a022666e4249b9c8dea7bb1e Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Wed, 6 May 2026 08:25:09 +0530 Subject: [PATCH 1/4] 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 `
` (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} >
-
- +
+
{stickyGroupHeader && isGrouped && stickyGroup && (
Date: Wed, 6 May 2026 14:26:36 +0530 Subject: [PATCH 2/4] 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); From 3f40e2674f316103af6c3604d253a7d50a577683 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Thu, 7 May 2026 08:44:54 +0530 Subject: [PATCH 3/4] fix(data-table): add styles to ensure proper table layout with separate border-collapse and bottom border --- .../raystack/components/data-table/data-table.module.css | 9 +++++++-- 1 file changed, 7 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 810729899..f82aa12bd 100644 --- a/packages/raystack/components/data-table/data-table.module.css +++ b/packages/raystack/components/data-table/data-table.module.css @@ -33,7 +33,7 @@ min-width: 0; } -.display-popover-properties-select > span { +.display-popover-properties-select>span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -83,6 +83,11 @@ overflow: auto; } +.contentRoot table { + border-collapse: separate; + border-spacing: 0; +} + .row { background: var(--rs-color-background-base-primary); } @@ -209,4 +214,4 @@ z-index: 1; background: var(--rs-color-background-base-secondary); box-shadow: 0 1px 0 0 var(--rs-color-border-base-primary); -} +} \ No newline at end of file From de56f78d44b34f9dd3a333389c5f6ffb18313c86 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Thu, 7 May 2026 11:03:40 +0530 Subject: [PATCH 4/4] fix(data-table): use small font size for virtualized group headers `.virtualSectionHeader` and `.stickyGroupAnchor` had no font-size rule and inherited the document default (~16px), while the non-virtualized variant renders group headers at small (~12px) via the `` font cascade. Added font-size and line-height tokens to both so they match. --- packages/raystack/components/data-table/data-table.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/raystack/components/data-table/data-table.module.css b/packages/raystack/components/data-table/data-table.module.css index f82aa12bd..a9ca29273 100644 --- a/packages/raystack/components/data-table/data-table.module.css +++ b/packages/raystack/components/data-table/data-table.module.css @@ -179,7 +179,9 @@ display: flex; align-items: center; background: var(--rs-color-background-base-secondary); + font-size: var(--rs-font-size-small); font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-small); padding: var(--rs-space-3); } @@ -190,7 +192,9 @@ display: flex; align-items: center; background: var(--rs-color-background-base-secondary); + font-size: var(--rs-font-size-small); font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-small); padding: 0 var(--rs-space-3); height: var(--rs-space-10); margin-bottom: calc(-1 * var(--rs-space-10));