Adds auto-adding of sticky table headers

bulhakovolexii · Feb 7, 2024 · f01be30 · f01be30
1 parent 1a5599c
commit f01be30
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -38,13 +38,21 @@
     {% include components/mermaid.html %}
   {% endif %}
   <script>
-      document.addEventListener('DOMContentLoaded', () => {
-          const tableElements = document.querySelectorAll('.js-table');
-
-          tableElements.forEach(tableElement => {
-              new window.StickyTable(tableElement);
-          })
-      });
-    </script>
+    const tables = document.querySelectorAll("table");
+    const addStickyHeaders = (tables) => {
+      tables.forEach((table) => {
+        if (table.offsetHeight >= 900) {
+          table.classList.add("js-table")
+        }
+      })
+    };
+    addStickyHeaders(tables);
+    document.addEventListener('DOMContentLoaded', () => {
+      const tableElements = document.querySelectorAll('.js-table');
+      tableElements.forEach(tableElement => {
+        new window.StickyTable(tableElement);
+      })
+    });
+  </script>
 </body>
 </html>
diff --git a/docs/_layouts/minimal.html b/docs/_layouts/minimal.html
@@ -31,13 +31,21 @@
     {% include components/mermaid.html %}
   {% endif %}
   <script>
-      document.addEventListener('DOMContentLoaded', () => {
-          const tableElements = document.querySelectorAll('.js-table');
-
-          tableElements.forEach(tableElement => {
-              new window.StickyTable(tableElement);
-          })
-      });
+    const tables = document.querySelectorAll("table");
+    const addStickyHeaders = (tables) => {
+      tables.forEach((table) => {
+        if (table.offsetHeight >= 900) {
+          table.classList.add("js-table")
+        }
+      })
+    };
+    addStickyHeaders(tables);
+    document.addEventListener('DOMContentLoaded', () => {
+      const tableElements = document.querySelectorAll('.js-table');
+      tableElements.forEach(tableElement => {
+        new window.StickyTable(tableElement);
+      })
+    });
   </script>
 </body>
 </html>