Make table header sticky using css

informatics-isi-edu · Dec 2, 2024 · fb2c872 · fb2c872
1 parent 78f26cd
commit fb2c872
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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 ?