From 2532d2a6da63d064ff924d35591c921f6b1a8ea6 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Thu, 15 Jan 2026 17:45:20 +0100
Subject: [PATCH] feat(ui): add className and style props to Table component

Allow consumers to pass className and style props to the Table
component for custom styling and layout positioning.

The props are applied consistently across all render states
(normal, loading, and error).

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/thin-insects-cough.md                 |  7 +++++++
 packages/ui/report.api.md                        |  6 ++++++
 .../ui/src/components/Table/components/Table.tsx | 16 +++++++++++++---
 packages/ui/src/components/Table/types.ts        |  2 ++
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/thin-insects-cough.md

diff --git a/.changeset/thin-insects-cough.md b/.changeset/thin-insects-cough.md
new file mode 100644
index 0000000000..db24462503
--- /dev/null
+++ b/.changeset/thin-insects-cough.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added `className` and `style` props to the `Table` component.
+
+Affected components: Table
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 7643469bdc..ca9d2bcff1 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -1532,6 +1532,8 @@ export function Table<T extends TableItem>({
   rowConfig,
   selection,
   emptyState,
+  className,
+  style,
 }: TableProps<T>): JSX_2.Element;
 
 // @public (undocumented)
@@ -1638,6 +1640,8 @@ export type TablePaginationType = NoPagination | PagePagination;
 
 // @public (undocumented)
 export interface TableProps<T extends TableItem> {
+  // (undocumented)
+  className?: string;
   // (undocumented)
   columnConfig: readonly ColumnConfig<T>[];
   // (undocumented)
@@ -1658,6 +1662,8 @@ export interface TableProps<T extends TableItem> {
   selection?: TableSelection;
   // (undocumented)
   sort?: SortState;
+  // (undocumented)
+  style?: React.CSSProperties;
 }
 
 // @public (undocumented)
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index 103a1aece9..fd6e595eba 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -96,6 +96,8 @@ export function Table<T extends TableItem>({
   rowConfig,
   selection,
   emptyState,
+  className,
+  style,
 }: TableProps<T>) {
   const liveRegionId = useId();
 
@@ -113,11 +115,19 @@ export function Table<T extends TableItem>({
   } = selection || {};
 
   if (loading && !data) {
-    return <div>Loading...</div>;
+    return (
+      <div className={className} style={style}>
+        Loading...
+      </div>
+    );
   }
 
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return (
+      <div className={className} style={style}>
+        Error: {error.message}
+      </div>
+    );
   }
 
   const liveRegionLabel = useLiveRegionLabel(
@@ -127,7 +137,7 @@ export function Table<T extends TableItem>({
   );
 
   return (
-    <div>
+    <div className={className} style={style}>
       <VisuallyHidden aria-live="polite" id={liveRegionId}>
         {liveRegionLabel}
       </VisuallyHidden>
diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts
index 380be8817c..6ba44b6697 100644
--- a/packages/ui/src/components/Table/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -133,4 +133,6 @@ export interface TableProps<T extends TableItem> {
   rowConfig?: RowConfig<T> | RowRenderFn<T>;
   selection?: TableSelection;
   emptyState?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
 }