Add optimisation to the custom table

Fixes #425
statikbe · Feb 12, 2025 · e1f5e9b · e1f5e9b
1 parent 6f0b15f
commit e1f5e9b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/tailoff/css/site/components/table.css b/tailoff/css/site/components/table.css
@@ -1,8 +1,11 @@
+.custom-table .table {
+  @apply w-full;
+}
 .custom-table table {
   @apply block w-full border border-black;
 
   th {
-    @apply px-4 py-2 text-left bg-primary-300;
+    @apply px-4 py-2 text-left align-top bg-primary-300;
   }
 
   tr {
@@ -34,6 +37,10 @@
   }
   tbody {
     display: block;
+
+    th {
+      @apply block w-full text-center;
+    }
   }
 }
 
@@ -43,6 +50,11 @@
     display: block;
   }
 
+  .custom-table table tbody th {
+    display: table-caption;
+    text-align: center;
+  }
+
   .custom-table table tr {
     display: table;
     width: 100%;
@@ -83,6 +95,12 @@
     display: table-row-group;
   }
 
+  .custom-table table tbody th {
+    display: table-cell;
+    text-align: left;
+    width: auto;
+  }
+
   .custom-table table th::before,
   .custom-table table td::before {
     display: none;

diff --git a/tailoff/js/components/table.component.ts b/tailoff/js/components/table.component.ts
@@ -15,9 +15,15 @@ export class TableComponent {
 
     const tableHead = table.querySelector('thead');
     if (tableHead) {
-      const headings = Array.from(tableHead.querySelectorAll('th')).map((th) => th.innerText);
-      Array.from(table.querySelectorAll('td')).forEach((td, index) => {
-        td.setAttribute('data-label', headings[index % headings.length]);
+      const headings = Array.from(tableHead.querySelectorAll('th'))
+        .reverse()
+        .map((th) => th.innerText);
+      Array.from(table.querySelectorAll('tbody tr')).forEach((tr) => {
+        Array.from(tr.querySelectorAll('td'))
+          .reverse()
+          .forEach((td, index) => {
+            td.setAttribute('data-label', headings[index]);
+          });
       });
     }
   }