feat(table): add align prop for columns and hover effect (#254)

Co-authored-by: Michel Binder <[email protected]>
statistikZH · Jan 8, 2025 · 56d9d4d · 56d9d4d
1 parent b32056a
commit 56d9d4d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 21 deletions.
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -115,7 +115,7 @@ export class LeuTable extends LeuElement {
       this.sortOrderAsc = !this.sortOrderAsc
     } else {
       this.sortIndex = index
-      this.sortOrder = "asc"
+      this.sortOrderAsc = false
     }
   }
 
@@ -125,10 +125,6 @@ export class LeuTable extends LeuElement {
     ></leu-icon>`
   }
 
-  sortArrow(col) {
-    return html` ${this.isSorted(col) ? this.sortArrowIcon() : nothing} `
-  }
-
   get _columns() {
     return this.columns
   }
@@ -172,6 +168,26 @@ export class LeuTable extends LeuElement {
       sticky: this.firstColumnSticky,
     }
 
+    function headerStyle(col) {
+      if (col.headerStyle) {
+        return styleMap({
+          ...col.headerStyle(),
+          textAlign: col.align === "right" ? "right" : undefined,
+        })
+      }
+      return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing
+    }
+
+    function bodyStyle(col, row) {
+      if (col.style) {
+        return styleMap({
+          ...col.style(row),
+          textAlign: col.align === "right" ? "right" : undefined,
+        })
+      }
+      return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing
+    }
+
     return html`
       <div
         class=${classMap(scrollClasses)}
@@ -183,15 +199,19 @@ export class LeuTable extends LeuElement {
             <tr>
               ${this._columns.map(
                 (col) =>
-                  html`<th
-                    style=${col.headerStyle
-                      ? styleMap(col.headerStyle())
-                      : nothing}
-                  >
+                  html`<th style=${headerStyle(col)}>
                     ${col.sort
-                      ? html`<button @click=${(_) => this.sortClick(col)}>
+                      ? html`<button
+                          @click=${(_) => this.sortClick(col)}
+                          class=${this.isSorted(col) ? "active" : nothing}
+                        >
+                          ${col.align === "right"
+                            ? this.sortArrowIcon()
+                            : nothing}
                           <span>${col.name}</span>
-                          ${this.sortArrow(col)}
+                          ${col.align !== "right"
+                            ? this.sortArrowIcon()
+                            : nothing}
                         </button>`
                       : col.name}
                   </th>`
@@ -204,9 +224,7 @@ export class LeuTable extends LeuElement {
                 html`<tr>
                   ${this._columns.map(
                     (col) =>
-                      html`<td
-                        style=${col.style ? styleMap(col.style(row)) : nothing}
-                      >
+                      html`<td style=${bodyStyle(col, row)}>
                         ${col.value(row)}
                       </td>`
                   )}

diff --git a/src/components/table/table.css b/src/components/table/table.css
@@ -66,20 +66,30 @@ button {
   line-height: 1.5;
   padding: 0;
   border: 0;
-  width: 100%;
-  display: flex;
-  align-items: flex-center;
   font-size: inherit;
   font-family: inherit;
   color: inherit;
 }
 
-thead leu-icon {
-  --leu-icon-size: 1.25rem;
+button span {
+  vertical-align: bottom;
+}
 
+button leu-icon {
+  --leu-icon-size: 1.25rem;
   display: inline-block;
-  color: var(--leu-color-accent-blue);
   padding: 0;
+  opacity: 0;
+  vertical-align: bottom;
+}
+
+button:hover leu-icon {
+  opacity: 1;
+}
+
+button.active leu-icon {
+  color: var(--leu-color-accent-blue);
+  opacity: 1;
 }
 
 table.sticky td:first-child,