diff --git a/.changeset/tidy-pumpkins-clean.md b/.changeset/tidy-pumpkins-clean.md
new file mode 100644
index 0000000000..c5a067a98c
--- /dev/null
+++ b/.changeset/tidy-pumpkins-clean.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix bug where `
` component would not take into account header styles defined in `columns[*].headerStyle`.
diff --git a/packages/core-components/src/components/Table/Table.test.tsx b/packages/core-components/src/components/Table/Table.test.tsx
index ff17409502..ffdca26d98 100644
--- a/packages/core-components/src/components/Table/Table.test.tsx
+++ b/packages/core-components/src/components/Table/Table.test.tsx
@@ -142,6 +142,62 @@ describe('', () => {
});
});
+ 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(
+ ,
+ );
+
+ 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(
+ ,
+ );
+
+ 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(
,
diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx
index 89a1d69b96..c43345c9d2 100644
--- a/packages/core-components/src/components/Table/Table.tsx
+++ b/packages/core-components/src/components/Table/Table.tsx
@@ -169,7 +169,7 @@ function convertColumns(
theme: BackstageTheme,
): TableColumn[] {
return columns.map(column => {
- const headerStyle: React.CSSProperties = {};
+ const headerStyle: React.CSSProperties = column.headerStyle ?? {};
let cellStyle = column.cellStyle || {};