feat: add headerStyle function (#248)

Co-authored-by: Michel Binder <[email protected]>
statistikZH · Dec 2, 2024 · 385f3ea · 385f3ea
1 parent 298ee5d
commit 385f3ea
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -183,7 +183,11 @@ export class LeuTable extends LeuElement {
             <tr>
               ${this._columns.map(
                 (col) =>
-                  html`<th>
+                  html`<th
+                    style=${col.headerStyle
+                      ? styleMap(col.headerStyle())
+                      : nothing}
+                  >
                     ${col.sort
                       ? html`<button @click=${(_) => this.sortClick(col)}>
                           <span>${col.name}</span>

diff --git a/src/components/table/stories/table.stories.js b/src/components/table/stories/table.stories.js
@@ -26,6 +26,11 @@ function Template({ itemsPerPage }) {
           {
             name: "Name",
             value: (row) => row.name,
+            headerStyle: () => {
+              return {
+                color: "#0076bd",
+              }
+            },
             style: (row) => {
               return {
                 minWidth: "400px",
@@ -38,7 +43,7 @@ function Template({ itemsPerPage }) {
           },
           {
             name: "Menge",
-            value: (row) => row.menge,
+            value: (row) => row.menge + "%",
             style: (row) => {
               return {
                 color:

diff --git a/src/components/table/table.css b/src/components/table/table.css
@@ -71,6 +71,7 @@ button {
   align-items: flex-center;
   font-size: inherit;
   font-family: inherit;
+  color: inherit;
 }
 
 thead leu-icon {