From 4a497aefb474d909f929edb697906942a330e8d5 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Tue, 25 Mar 2025 19:29:16 +0100
Subject: [PATCH] Lib: Add optional height classes to component + make thead
 sticky

---
 src/lib/components/Table.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Table.svelte b/src/lib/components/Table.svelte
index e40521e..52c92a1 100644
--- a/src/lib/components/Table.svelte
+++ b/src/lib/components/Table.svelte
@@ -8,17 +8,20 @@
     /** The columns the table should have. */
     columns: TableColumn[];
 
+    /** Optional height classes */
+    height?: string;
+
     /** An optional function handling clicking on a table row */
     handler?: (event: Event, id: string) => Promise<void>;
   }
 
-  let { data, columns, handler = undefined }: TableProps = $props();
+  let { data, columns, height = "", handler = undefined }: TableProps = $props();
 </script>
 
 {#if data.length > 0}
-  <div class="table-container bg-white shadow">
-    <table class="table table-compact bg-white">
-      <thead>
+  <div class="table-container bg-white shadow {height}">
+    <table class="table table-compact !overflow-scroll bg-white">
+      <thead class="sticky top-0">
         <tr class="bg-surface-500">
           {#each columns as col}
             <th class="!px-3">{col.label}</th>