Ensure <Table /> component respects header styles in columns[*].headerStyle

Signed-off-by: Boris Bera <bbera@coveo.com>

.changeset/tidy-pumpkins-clean.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix bug where `<Table />` component would not take into account header styles defined in `columns[*].headerStyle`.

packages/core-components/src/components/Table/Table.test.tsx

@@ -17,6 +17,7 @@
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { Table } from './Table';
+import { prettyDOM } from '@testing-library/react';
 
 const column1 = {
   title: 'Column 1',
@@ -142,6 +143,62 @@ describe('<Table />', () => {
     });
   });
 
+  describe('with style headers', () => {
+    describe('with CSS properties object', () => {
+      it('renders styled headers', async () => {
+        const columns = [
+          column1,
+          {
+            ...column2,
+            headerStyle: {
+              backgroundColor: 'pink',
+            },
+          },
+        ];
+
+        const rendered = await renderInTestApp(
+          <Table data={minProps.data} columns={columns} />,
+        );
+
+        expect(rendered.getByText(column1.title).closest('th')).not.toHaveStyle(
+          {
+            backgroundColor: 'pink',
+          },
+        );
+        expect(rendered.getByText(column2.title).closest('th')).toHaveStyle({
+          backgroundColor: 'pink',
+        });
+      });
+
+      it('renders styled headers with highlight', async () => {
+        const columns = [
+          {
+            ...column1,
+            highlight: true,
+          },
+          {
+            ...column2,
+            highlight: true,
+            headerStyle: {
+              backgroundColor: 'pink',
+            },
+          },
+        ];
+
+        const rendered = await renderInTestApp(
+          <Table data={minProps.data} columns={columns} />,
+        );
+
+        const column1Header = rendered.getByText(column1.title).closest('th');
+        expect(column1Header?.style.backgroundColor).toBe('');
+        expect(column1Header?.style.color).toBe('rgb(0, 0, 0)');
+        const column2Header = rendered.getByText(column2.title).closest('th');
+        expect(column2Header?.style.backgroundColor).toBe('pink');
+        expect(column2Header?.style.color).toBe('rgb(0, 0, 0)');
+      });
+    });
+  });
+
   it('renders with subtitle', async () => {
     const rendered = await renderInTestApp(
       <Table subtitle="subtitle" {...minProps} />,

packages/core-components/src/components/Table/Table.tsx

@@ -169,7 +169,7 @@ function convertColumns<T extends object>(
   theme: BackstageTheme,
 ): TableColumn<T>[] {
   return columns.map(column => {
-    const headerStyle: React.CSSProperties = {};
+    const headerStyle: React.CSSProperties = column.headerStyle ?? {};
 
     let cellStyle = column.cellStyle || {};