fix(#1530): table bottom align headers

GovAlta · Aug 28, 2024 · 87d9693 · 87d9693
1 parent 8822d39
commit 87d9693
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/libs/web-components/src/assets/css/components.css b/libs/web-components/src/assets/css/components.css
@@ -57,15 +57,11 @@ goa-table[variant="relaxed"] td {
 goa-table thead th {
   background-color: var(--goa-color-greyscale-white);
   color: var(--goa-color-text-secondary);
-  padding: 1rem;
+  padding: var(--goa-space-s) var(--goa-table-header-padding, var(--goa-space-m)) var(--goa-space-xs) var(--goa-table-header-padding, var(--goa-space-m));
   text-align: left;
   border-bottom: 2px solid var(--goa-color-greyscale-600);
   vertical-align: bottom;
-}
-
-goa-table th:has(goa-table-sort-header) {
-  padding: 0;
-}
+  }
 
 .goa-table-number-column {
   font: var(--goa-typography-number-m);
@@ -76,6 +72,10 @@ goa-table th:has(goa-table-sort-header) {
   text-align: right;
 }
 
+.goa-table-number-header:not(:has(goa-table-sort-header)) {
+  padding-bottom: 0.5rem;
+}
+
 goa-table tfoot td {
   background-color: var(--goa-color-greyscale-100);
 }

diff --git a/libs/web-components/src/components/table/TableSortHeader.svelte b/libs/web-components/src/components/table/TableSortHeader.svelte
@@ -14,9 +14,13 @@
     if (_rootEl) {
       // Add styling if an ancestor has a class to style number columns,
       const hostEl = _rootEl.getRootNode().host;
+      const parentThead = hostEl?.closest("th");
+      parentThead?.style.setProperty("--goa-table-header-padding", "0");
+
       const ancestor = hostEl?.closest("th.goa-table-number-header");
       if (ancestor) {
         _rootEl.style.setProperty("--header-text-align", "flex-end");
+        _rootEl.style.setProperty("--header-align", "right");
       }
     }
   });
@@ -55,7 +59,8 @@
     padding: 0 1rem;
     justify-content: var(--header-text-align, flex-start);
     gap: 0.25rem;
-    align-items: center;
+    align-items: flex-end;
+    text-align: var(--header-align, left);
   }
 
   /* User set classes */