Add sticky first row and column to optimization results table

Sticky first column: CSS position:sticky on td:first-child. The column
can use CSS because the horizontal scroll container (overflow-x:auto on
.table_div) does not trap sticky:left anchoring.

Sticky header row: JS fixed-clone overlay. CSS sticky:top cannot be used
because the same overflow-x:auto scroll container also acts as a scroll
boundary for the vertical axis, trapping sticky:top inside it. A
position:fixed clone is used instead, syncing horizontal scroll via
wrapper.scrollLeft.

border-collapse:separate; border-spacing:0 ensures sticky cells retain
their own borders (with collapse, borders are shared between adjacent
cells and lost when a sticky cell creates its own stacking context).

Author: carposio

src/emhass/static/script.js

@@ -8,6 +8,7 @@
 //on page reload get saved data
 window.onload = async function () {
   await loadBasicOrAdvanced();
+  initStickyTables();
 
   //add listener for basic and advanced html switch
   document
@@ -224,6 +225,74 @@ async function getTemplate() {
     TempScript.innerHTML = script.innerHTML;
     script.parentElement.appendChild(TempScript);
   }
+  initStickyTables();
+}
+
+function initStickyTables() {
+  // Remove clones and listeners from any previous call
+  document.querySelectorAll(".sticky-header-wrapper").forEach((el) => el.remove());
+  document.querySelectorAll("table.mystyle").forEach((table) => {
+    if (table._stickyScrollListener)
+      window.removeEventListener("scroll", table._stickyScrollListener);
+    if (table._stickyHScrollListener && table._stickyContainer)
+      table._stickyContainer.removeEventListener("scroll", table._stickyHScrollListener);
+  });
+
+  document.querySelectorAll("table.mystyle").forEach((table) => {
+    const thead = table.querySelector("thead");
+    if (!thead) return;
+    const container = table.closest(".table_div");
+    if (!container) return;
+
+    // Fixed wrapper clips the clone to the container's visible horizontal area
+    const wrapper = document.createElement("div");
+    wrapper.className = "sticky-header-wrapper";
+    document.body.appendChild(wrapper);
+
+    // Clone table containing only the header
+    const cloneTable = document.createElement("table");
+    cloneTable.className = table.className;
+    cloneTable.style.tableLayout = "fixed";
+    cloneTable.appendChild(thead.cloneNode(true));
+    wrapper.appendChild(cloneTable);
+
+    // Sync wrapper position and column widths with the live table
+    const syncGeometry = () => {
+      const r = container.getBoundingClientRect();
+      wrapper.style.left = r.left + "px";
+      wrapper.style.width = container.clientWidth + "px";
+      cloneTable.style.width = table.getBoundingClientRect().width + "px";
+      thead.querySelectorAll("th").forEach((th, i) => {
+        const cloneTh = cloneTable.querySelectorAll("th")[i];
+        if (cloneTh) cloneTh.style.width = th.getBoundingClientRect().width + "px";
+      });
+    };
+    requestAnimationFrame(syncGeometry);
+    window.addEventListener("resize", syncGeometry, { passive: true });
+
+    // Horizontal scroll: sync wrapper.scrollLeft — avoids transform stacking context,
+    // so overflow:hidden clips correctly on both sides
+    const syncHScroll = () => {
+      wrapper.scrollLeft = container.scrollLeft;
+    };
+    container.addEventListener("scroll", syncHScroll, { passive: true });
+    table._stickyHScrollListener = syncHScroll;
+    table._stickyContainer = container;
+
+    // Vertical scroll: toggle visibility only — no per-frame transform update
+    let shown = false;
+    const updateVisibility = () => {
+      const shouldShow =
+        thead.getBoundingClientRect().top <= 0 &&
+        table.getBoundingClientRect().bottom > 0;
+      if (shouldShow !== shown) {
+        shown = shouldShow;
+        wrapper.style.display = shouldShow ? "block" : "none";
+      }
+    };
+    window.addEventListener("scroll", updateVisibility, { passive: true });
+    table._stickyScrollListener = updateVisibility;
+  });
 }
 
 //test localStorage support

src/emhass/static/style.css

@@ -680,10 +680,19 @@ button {
 .main-svg {
   font-size: 11pt;
   font-family: Arial, sans-serif;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   border-style: hidden;
 }
 
+.mystyle td,
+.mystyle th {
+  border-width: 0 1px 1px 0;
+}
+
+.mystyle td:first-child,
+.mystyle thead th:first-child { border-left-width: 1px; }
+
 .mystyle td {
   padding: 5px;
 }
@@ -707,6 +716,32 @@ th {
   cursor: pointer;
 }
 
+/* Fixed clone rendered by JS for sticky header row */
+.sticky-header-wrapper {
+  position: fixed;
+  top: 0;
+  overflow: hidden;
+  z-index: 100;
+  display: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Sticky first column */
+.mystyle td:first-child,
+.mystyle thead th:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+
+/* Opaque background for sticky header row (original table + JS clone) */
+.mystyle thead th {
+  background: #e1e1e1;
+  border-top-width: 1px;
+  z-index: 2;
+}
+
 th:last-child {
   border-top-right-radius: 7px;
 }
@@ -1318,6 +1353,11 @@ p {
     background-color: #3f3f3f;
   }
 
+  .mystyle thead th { background: #282928; }
+
+  .mystyle td,
+  .mystyle th { border-color: #666; }
+
   .modebar-group {
     background-color: #0000 !important;
   }

src/emhass/templates/configuration.html

@@ -5,7 +5,7 @@
 <head>
   <title>EMHASS: Energy Management Optimization for Home Assistant</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" type="text/css" href="static/style.css?version=1">
+  <link rel="stylesheet" type="text/css" href="static/style.css?version=2">
   <link rel="icon" type="image/x-icon" href="static/img/emhass_logo_short.svg">
   <script src="static/configuration_script.js"></script>
 </head>

src/emhass/templates/index.html

@@ -5,7 +5,7 @@
 <head>
     <meta charset="UTF-8"> <title>EMHASS: Energy Management Optimization for Home Assistant</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="static/style.css?version=1">
+    <link rel="stylesheet" type="text/css" href="static/style.css?version=2">
     <link rel="icon" type="image/x-icon" href="static/img/emhass_logo_short.svg">
     <script src="static/script.js"></script>
 </head>