From 385f3ea003735216e1c0227d7dfd64e7c33e67b7 Mon Sep 17 00:00:00 2001
From: Michel Binder <37824907+cubmic@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:22:23 +0100
Subject: [PATCH] feat: add headerStyle function (#248)

Co-authored-by: Michel Binder <michel.binder@statistik.ji.zh.ch>
---
 src/components/table/Table.js                 | 6 +++++-
 src/components/table/stories/table.stories.js | 7 ++++++-
 src/components/table/table.css                | 1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index b034648d..db8c75c4 100644
--- 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
index cb3b00c9..a84999bf 100644
--- 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
index 9c7d3b9b..fa107b34 100644
--- 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 {