From 0d781ab45d6358a2beabf97dabb6d7de3da90c5e Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 1 Apr 2025 01:51:37 +0200
Subject: [PATCH 1/3] Add sticky rows and max height to Table component

---
 v2/pink-sb/src/lib/table/Cell.svelte        |  8 +--
 v2/pink-sb/src/lib/table/Root.svelte        | 22 ++++--
 v2/pink-sb/src/lib/table/index.ts           |  3 +
 v2/pink-sb/src/lib/table/row/Base.svelte    | 12 +++-
 v2/pink-sb/src/lib/table/row/index.ts       |  1 +
 v2/pink-sb/src/stories/Table.stories.svelte | 75 +++++++++++++++++++++
 6 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/v2/pink-sb/src/lib/table/Cell.svelte b/v2/pink-sb/src/lib/table/Cell.svelte
index 58a312df23..479541c849 100644
--- a/v2/pink-sb/src/lib/table/Cell.svelte
+++ b/v2/pink-sb/src/lib/table/Cell.svelte
@@ -19,6 +19,7 @@
         class:vertical-end={isVerticalEnd}
         class:horizontal-start={isHorizontalStart}
         class:horizontal-end={isHorizontalEnd}
+        style:--cell-height={root.cellHeight}
     >
         <slot />
     </div>
@@ -26,13 +27,12 @@
 
 <style lang="scss">
     [role='cell'] {
-        --p-cell-width: var(--cell-width);
-        --p-cell-max-width: var(--cell-max-width);
-        --p-cell-alignment: var(--cell-alignment);
+        --p-cell-height: var(--cell-height);
+
         display: flex;
         align-items: center;
         padding-inline: var(--space-6);
-        height: 40px;
+        height: var(--p-cell-height);
         border-bottom: var(--border-width-s) solid var(--border-neutral);
         overflow: hidden;
 
diff --git a/v2/pink-sb/src/lib/table/Root.svelte b/v2/pink-sb/src/lib/table/Root.svelte
index 8098c9f1e7..5777a44b00 100644
--- a/v2/pink-sb/src/lib/table/Root.svelte
+++ b/v2/pink-sb/src/lib/table/Root.svelte
@@ -5,6 +5,9 @@
     export let columns: Array<Column> | number;
     export let allowSelection: boolean = false;
     export let selectedRows: Array<string> = [];
+    export let maxRows: number = Infinity;
+    export let stickyHeader: boolean = false;
+    export let cellHeight: string = '40px';
 
     let availableIds: Set<string> = new Set();
 
@@ -34,7 +37,7 @@
                 }
                 return acc;
             },
-            allowSelection ? ' 40px' : '' // Default width for selection column
+            allowSelection ? ` ${cellHeight}px` : '' // Default width for selection column
         );
     }
 
@@ -93,14 +96,21 @@
         selectedNone: !someRowsSelected,
         selectedAll: allRowsSelected,
         addAvailableId,
-        removeAvailableId
+        removeAvailableId,
+        cellHeight,
+        hasHeader: $$slots.header !== undefined
     } as RootProp;
+
+    $: maxHeight =
+        maxRows === Infinity
+            ? undefined
+            : `calc(${root.hasHeader ? maxRows + 1 : maxRows} * ${cellHeight})`;
 </script>
 
-<div class="root">
+<div class="root" style:max-height={maxHeight}>
     <div role="table" style:--grid-template-columns={createGridTemplateColumns(columns)}>
-        {#if $$slots.header}
-            <Row type="header" {root}>
+        {#if root.hasHeader}
+            <Row type="header" {root} sticky={stickyHeader}>
                 <slot name="header" {root} />
             </Row>
         {/if}
@@ -110,7 +120,7 @@
 
 <style lang="scss">
     .root {
-        overflow-x: auto;
+        overflow: auto;
         border: 1px solid var(--border-neutral);
         border-radius: var(--border-radius-s);
         background: var(--bgcolor-neutral-primary);
diff --git a/v2/pink-sb/src/lib/table/index.ts b/v2/pink-sb/src/lib/table/index.ts
index c37a233344..4814fd1501 100644
--- a/v2/pink-sb/src/lib/table/index.ts
+++ b/v2/pink-sb/src/lib/table/index.ts
@@ -14,6 +14,7 @@ export type Column = {
           }
         | number;
     hide?: boolean;
+    sticky?: boolean;
 };
 
 export type RootProp = {
@@ -27,6 +28,8 @@ export type RootProp = {
     toggleAll: () => void;
     addAvailableId: (id: string) => void;
     removeAvailableId: (id: string) => void;
+    cellHeight: string;
+    hasHeader: boolean;
 };
 
 export type Alignment =
diff --git a/v2/pink-sb/src/lib/table/row/Base.svelte b/v2/pink-sb/src/lib/table/row/Base.svelte
index 2ca6535040..1b200eb2ab 100644
--- a/v2/pink-sb/src/lib/table/row/Base.svelte
+++ b/v2/pink-sb/src/lib/table/row/Base.svelte
@@ -12,6 +12,7 @@
     export let root: $$Props['root'];
     export let id: $$Props['id'] = undefined;
     export let type: $$Props['type'] = 'row';
+    export let sticky: $$Props['sticky'] = false;
 
     function toggle() {
         if (id) root.toggle(id);
@@ -26,9 +27,13 @@
     });
 
     $: selected = id ? root.selectedRows.includes(id) : false;
+    $: top =
+        sticky !== false && Number.isInteger(sticky)
+            ? `calc(${sticky} * ${root.cellHeight})`
+            : undefined;
 </script>
 
-<div role={type === 'row' ? 'row' : 'rowheader'}>
+<div role={type === 'row' ? 'row' : 'rowheader'} class:sticky style:top>
     {#if root.allowSelection}
         {@const isHeader = type === 'header'}
         <Cell column={`__select_${id}`} {root}>
@@ -66,5 +71,10 @@
                 border-bottom: 0;
             }
         }
+
+        &.sticky {
+            position: sticky;
+            top: 0;
+        }
     }
 </style>
diff --git a/v2/pink-sb/src/lib/table/row/index.ts b/v2/pink-sb/src/lib/table/row/index.ts
index 82a031ce2d..ff9b584c23 100644
--- a/v2/pink-sb/src/lib/table/row/index.ts
+++ b/v2/pink-sb/src/lib/table/row/index.ts
@@ -5,6 +5,7 @@ import Link from './Link.svelte';
 
 export type RowBaseProps = {
     id?: string;
+    sticky?: boolean | number;
     root: RootProp;
 };
 
diff --git a/v2/pink-sb/src/stories/Table.stories.svelte b/v2/pink-sb/src/stories/Table.stories.svelte
index 9e0ff5d3a5..e16576ef72 100644
--- a/v2/pink-sb/src/stories/Table.stories.svelte
+++ b/v2/pink-sb/src/stories/Table.stories.svelte
@@ -77,6 +77,81 @@
     </Table.Root>
 </Story>
 
+<Story name="Sticky rows">
+    <Table.Root columns={3} let:root maxRows={6} stickyHeader>
+        <svelte:fragment slot="header" let:root>
+            <Table.Header.Cell {root}>Lorem</Table.Header.Cell>
+            <Table.Header.Cell {root}>Ipsum</Table.Header.Cell>
+            <Table.Header.Cell {root}>Dolor</Table.Header.Cell>
+        </svelte:fragment>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root} sticky={1}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root} sticky={2}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+        <Table.Row.Base {root}>
+            <Table.Cell {root}>Lorem</Table.Cell>
+            <Table.Cell {root}>Ipsum</Table.Cell>
+            <Table.Cell {root}>Dolor</Table.Cell>
+        </Table.Row.Base>
+    </Table.Root>
+</Story>
+
 <Story name="Column sizing">
     <Table.Root
         columns={[

From 1a9d6e1c760531feafa7fdc210d2c10e66c184fb Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 1 Apr 2025 01:51:45 +0200
Subject: [PATCH 2/3] Remove sticky prop from Column type definition

---
 v2/pink-sb/src/lib/table/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/v2/pink-sb/src/lib/table/index.ts b/v2/pink-sb/src/lib/table/index.ts
index 4814fd1501..f005d86236 100644
--- a/v2/pink-sb/src/lib/table/index.ts
+++ b/v2/pink-sb/src/lib/table/index.ts
@@ -14,7 +14,6 @@ export type Column = {
           }
         | number;
     hide?: boolean;
-    sticky?: boolean;
 };
 
 export type RootProp = {

From ae61d4aa8163161f6eee9b5d4437b52aa54a225e Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 1 Apr 2025 02:13:55 +0200
Subject: [PATCH 3/3] Extract max height and position calculations into
 functions

The changes move row position and max height calculations into separate helper
functions for improved readability and maintainability.
---
 v2/pink-sb/src/lib/table/Root.svelte        | 25 +++++++++++----------
 v2/pink-sb/src/lib/table/row/Base.svelte    | 12 ++++++----
 v2/pink-sb/src/stories/Table.stories.svelte |  2 +-
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/v2/pink-sb/src/lib/table/Root.svelte b/v2/pink-sb/src/lib/table/Root.svelte
index 5777a44b00..05a971f27a 100644
--- a/v2/pink-sb/src/lib/table/Root.svelte
+++ b/v2/pink-sb/src/lib/table/Root.svelte
@@ -51,13 +51,6 @@
         }, {});
     }
 
-    $: someRowsSelected =
-        availableIds.size > 0 &&
-        selectedRows.length > 0 &&
-        selectedRows.some((row) => availableIds.has(row));
-    $: allRowsSelected =
-        availableIds.size > 0 && [...availableIds].every((row) => selectedRows.includes(row));
-
     function toggleAll() {
         if (allRowsSelected) {
             selectedRows = selectedRows.filter((row) => !availableIds.has(row));
@@ -86,6 +79,18 @@
         availableIds = availableIds;
     }
 
+    function calculateMaxHeight(maxRows: number, cellHeight: string, hasHeader: boolean) {
+        if (maxRows === Infinity) return undefined;
+        const totalRows = hasHeader ? maxRows + 1 : maxRows;
+        return `calc(${totalRows} * ${cellHeight})`;
+    }
+
+    $: someRowsSelected =
+        availableIds.size > 0 &&
+        selectedRows.length > 0 &&
+        selectedRows.some((row) => availableIds.has(row));
+    $: allRowsSelected =
+        availableIds.size > 0 && [...availableIds].every((row) => selectedRows.includes(row));
     $: root = {
         allowSelection,
         selectedRows,
@@ -100,11 +105,7 @@
         cellHeight,
         hasHeader: $$slots.header !== undefined
     } as RootProp;
-
-    $: maxHeight =
-        maxRows === Infinity
-            ? undefined
-            : `calc(${root.hasHeader ? maxRows + 1 : maxRows} * ${cellHeight})`;
+    $: maxHeight = calculateMaxHeight(maxRows, cellHeight, root.hasHeader);
 </script>
 
 <div class="root" style:max-height={maxHeight}>
diff --git a/v2/pink-sb/src/lib/table/row/Base.svelte b/v2/pink-sb/src/lib/table/row/Base.svelte
index 1b200eb2ab..c4a49b1420 100644
--- a/v2/pink-sb/src/lib/table/row/Base.svelte
+++ b/v2/pink-sb/src/lib/table/row/Base.svelte
@@ -18,6 +18,13 @@
         if (id) root.toggle(id);
     }
 
+    function calculateTop(sticky: $$Props['sticky'], cellHeight: $$Props['root']['cellHeight']) {
+        if (sticky !== false && Number.isInteger(sticky)) {
+            return `calc(${sticky} * ${cellHeight})`;
+        }
+        return undefined;
+    }
+
     onMount(() => {
         if (id) root.addAvailableId(id);
 
@@ -27,10 +34,7 @@
     });
 
     $: selected = id ? root.selectedRows.includes(id) : false;
-    $: top =
-        sticky !== false && Number.isInteger(sticky)
-            ? `calc(${sticky} * ${root.cellHeight})`
-            : undefined;
+    $: top = calculateTop(sticky, root.cellHeight);
 </script>
 
 <div role={type === 'row' ? 'row' : 'rowheader'} class:sticky style:top>
diff --git a/v2/pink-sb/src/stories/Table.stories.svelte b/v2/pink-sb/src/stories/Table.stories.svelte
index e16576ef72..ba7d553a9b 100644
--- a/v2/pink-sb/src/stories/Table.stories.svelte
+++ b/v2/pink-sb/src/stories/Table.stories.svelte
@@ -78,7 +78,7 @@
 </Story>
 
 <Story name="Sticky rows">
-    <Table.Root columns={3} let:root maxRows={6} stickyHeader>
+    <Table.Root columns={3} let:root maxRows={5} stickyHeader>
         <svelte:fragment slot="header" let:root>
             <Table.Header.Cell {root}>Lorem</Table.Header.Cell>
             <Table.Header.Cell {root}>Ipsum</Table.Header.Cell>