Sticky headers <> Max height

v2/pink-sb/src/lib/table/Root.svelte

@@ -5,6 +5,8 @@
     export let columns: Array<Column> | number;
     export let allowSelection: boolean = false;
     export let selectedRows: Array<string> = [];
+    export let stickyHeaders: boolean = false;
+    export let maxHeight: string | undefined = undefined;
 
     let availableIds: Set<string> = new Set();
 
@@ -77,8 +79,9 @@
     }
 
     $: root = {
-        allowSelection,
+        stickyHeaders,
         selectedRows,
+        allowSelection,
         columns: groupById(columns),
         toggleAll,
         toggle,
@@ -90,7 +93,7 @@
     } as RootProp;
 </script>
 
-<div class="root">
+<div class="root" class:has-max-height={!!maxHeight} style:max-height={maxHeight}>
     <div role="table" style:--grid-template-columns={createGridTemplateColumns(columns)}>
         {#if $$slots.header}
             <Row type="header" {root}>
@@ -108,6 +111,15 @@
         border-radius: var(--border-radius-s);
         background: var(--bgcolor-neutral-primary);
 
+        &.has-max-height {
+            scrollbar-width: none;
+            -ms-overflow-style: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+
         ::-webkit-scrollbar {
             display: none;
         }

v2/pink-sb/src/lib/table/index.ts

@@ -17,6 +17,7 @@ export type Column = {
 };
 
 export type RootProp = {
+    stickyHeaders: boolean;
     allowSelection: boolean;
     selectedRows: string[];
     selectedAll: boolean;

v2/pink-sb/src/lib/table/row/Base.svelte

@@ -25,10 +25,14 @@
         };
     });
 
+    $: stickyHeaders = root.stickyHeaders;
     $: selected = id ? root.selectedRows.includes(id) : false;
 </script>
 
-<div role={type === 'row' ? 'row' : 'rowheader'}>
+<div
+    role={type === 'row' ? 'row' : 'rowheader'}
+    class:sticky={type !== 'row' ? stickyHeaders : undefined}
+>
     {#if root.allowSelection}
         {@const isHeader = type === 'header'}
         <Cell column={`__select_${id}`} {root}>
@@ -66,5 +70,10 @@
                 border-bottom: 0;
             }
         }
+
+        &.sticky {
+            top: 0;
+            position: sticky;
+        }
     }
 </style>

v2/pink-sb/src/stories/Table.stories.svelte

@@ -9,10 +9,12 @@
 
 <script lang="ts">
     import Avatar from '$lib/avatar/Avatar.svelte';
-    import { Button, Badge, Tag, Icon, Status, Typography } from '$lib/index.js';
+    import { Button, Badge, Tag, Icon, Status, Typography, InlineCode } from '$lib/index.js';
     import { Story } from '@storybook/addon-svelte-csf';
     import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
     import type { Column } from '$lib/table/index.ts';
+    import Modal from '$lib/Modal.svelte';
+    import Stack from '$lib/layout/Stack.svelte';
 
     const columns: Array<Column> = [
         {
@@ -25,6 +27,8 @@
             id: 'third'
         }
     ];
+
+    let openModal = false;
 </script>
 
 <Story name="Default">
@@ -241,3 +245,41 @@
         </Table.Row.Link>
     </Table.Root>
 </Story>
+
+<Story name="Sticky headers">
+    <Layout.Stack alignItems="center">
+        <Modal title="Table with Sticky Headers" bind:open={openModal}>
+            <span slot="description">
+                The table must have a <InlineCode code="maxHeight" size="m" /> set for sticky headers
+                to take effect.
+            </span>
+
+            <Table.Root columns={4} let:root stickyHeaders maxHeight="17rem">
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="first" {root}>First</Table.Header.Cell>
+                    <Table.Header.Cell column="second" {root}>Second</Table.Header.Cell>
+                    <Table.Header.Cell column="third" {root}>Third</Table.Header.Cell>
+                    <Table.Header.Cell column="fourth" {root}>Fourth</Table.Header.Cell>
+                </svelte:fragment>
+
+                {#each Array(20) as _}
+                    <Table.Row.Base {root} id="lorem">
+                        <Table.Cell column="first" {root}>Lorem</Table.Cell>
+                        <Table.Cell column="second" {root}>Base</Table.Cell>
+                        <Table.Cell column="third" {root}>Ipsum</Table.Cell>
+                        <Table.Cell column="fourth" {root}>Lorem</Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+
+            <svelte:fragment slot="footer">
+                <Stack direction="row" gap="s" justifyContent="flex-end">
+                    <Button.Button variant="secondary" size="s" on:click={() => (openModal = false)}
+                        >Close</Button.Button
+                    >
+                </Stack>
+            </svelte:fragment>
+        </Modal>
+        <Button.Button on:click={() => (openModal = !openModal)}>Open Modal</Button.Button>
+    </Layout.Stack>
+</Story>