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

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added `className` and `style` props to the `Table` component.
+
+Affected components: Table

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)

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>

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;
 }