From fb2c8722e411589dc84196ab8555c88f7f0a8908 Mon Sep 17 00:00:00 2001
From: Keny Shah <kenyjign@usc.edu>
Date: Mon, 2 Dec 2024 13:40:25 -0800
Subject: [PATCH] Make table header sticky using css

---
 src/assets/scss/_recordset-table.scss        | 6 +++++-
 src/components/recordset/recordset-table.tsx | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/assets/scss/_recordset-table.scss b/src/assets/scss/_recordset-table.scss
index 9276a2a76..9ccee3041 100644
--- a/src/assets/scss/_recordset-table.scss
+++ b/src/assets/scss/_recordset-table.scss
@@ -2,7 +2,8 @@
 @use 'variables';
 
 .recordset-table {
-  overflow-y: hidden;
+  // overflow-y: hidden;
+  max-height: 500px;
 }
 
 .chaise-table.table {
@@ -44,6 +45,9 @@
   .table-heading {
     background-color: map.get(variables.$color-map, 'table-header-background');
     color: map.get(variables.$color-map, 'black');
+    position: sticky;
+    top:0;
+    z-index: 2;
 
     .actions-header {
       width: 100px;
diff --git a/src/components/recordset/recordset-table.tsx b/src/components/recordset/recordset-table.tsx
index 9f5174904..b4ea18b27 100644
--- a/src/components/recordset/recordset-table.tsx
+++ b/src/components/recordset/recordset-table.tsx
@@ -388,7 +388,7 @@ const RecordsetTable = ({
       return (
         <th
           key={index}
-          className={'c_' + makeSafeIdAttr(col.column.name) + (canSort ? ' clickable' : '')}
+          className={'c_' + makeSafeIdAttr(col.column.name) + (canSort ? ' clickable' : '') +' sticky_header'}
           {...(canSort && { onClick: () => changeSort(col) })}
         >
           {col.column.comment ?