Changed the table header to sticky headers.

src/components/Table.js

@@ -243,6 +243,43 @@ function Table({
   useKeyPressEvent('?', () => {
     setIsInfoVisible(!isInfoVisible);
   });
+
+  useEffect(() =>{
+    let table = document.querySelector('.table-container>.table');
+    let headers = document.querySelectorAll('.table-container>.table>.row.heading:first-child>.cell');
+
+    // Set config values, set the special z indices for the header divs
+    const stickBottomLimit = 150;
+    const firstHeaderZ = 140;
+    const otherHeaderZ = 120;
+    headers.forEach((el, index)=>{
+        el.style.zIndex = index==0 ? firstHeaderZ : otherHeaderZ;
+    });
+
+    // Build the handler that makes headers stick
+    const handleScroll = ()=>{
+        const rect = table.getBoundingClientRect();
+        let offset = 0;
+        if (rect.top < 0) {
+            offset = Math.min(-rect.top, rect.height-stickBottomLimit);
+        }
+        headers.forEach((el)=>{
+            el.style.transform = 'translateY('+offset+'px)';
+        });
+    };
+
+    // Build debounced scroll listener
+    let ticking = false;
+    document.addEventListener('scroll', (e)=>{
+        if (!ticking) {
+            window.requestAnimationFrame(()=>{
+                handleScroll();
+                ticking = false;
+            });
+            ticking = true;
+        }
+    });
+  })
 
   return (
     <div className="Table">