From 8c3941214d6d1a10b9ab37a7b649e481f48d7d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gustaf=20R=C3=A4ntil=C3=A4?= <g.rantila@gmail.com>
Date: Wed, 4 Feb 2026 23:22:54 +0100
Subject: [PATCH] Allow automatic column widths and styling TableRoot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
---
 .changeset/thirty-mirrors-own.md              | 21 +++++++++++++++++++
 .../app/components/table/props-definition.tsx | 12 +++++++++++
 packages/ui/report.api.md                     |  6 ++++++
 .../src/components/Table/components/Table.tsx | 17 +++++++++++----
 packages/ui/src/components/Table/types.ts     |  2 ++
 5 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/thirty-mirrors-own.md

diff --git a/.changeset/thirty-mirrors-own.md b/.changeset/thirty-mirrors-own.md
new file mode 100644
index 0000000000..4efbad75e4
--- /dev/null
+++ b/.changeset/thirty-mirrors-own.md
@@ -0,0 +1,21 @@
+---
+'@backstage/ui': patch
+---
+
+Add option to automatically determine the columns widths based on the content, and CSS styling of the inner TableRoot component.
+
+Example: A Table can now be in a container and grow wider for horizontal scrolling, and adapt column widths automatically:
+
+```tsx
+<Table
+  style={{ width: '100%', overflowX: 'auto' }}
+  columnConfig={tableColumns}
+  tableLayout="auto"
+  styles={{
+    tableRoot: { width: 'auto', minWidth: '100%' },
+  }}
+  {...tableProps}
+/>
+```
+
+Affected components: Table
diff --git a/docs-ui/src/app/components/table/props-definition.tsx b/docs-ui/src/app/components/table/props-definition.tsx
index be24e86bf0..e3a5cef8b4 100644
--- a/docs-ui/src/app/components/table/props-definition.tsx
+++ b/docs-ui/src/app/components/table/props-definition.tsx
@@ -230,8 +230,20 @@ export const tablePropDefs: Record<string, PropDef> = {
     values: ['ReactNode'],
     description: 'Content to display when the table has no data.',
   },
+  tableLayout: {
+    type: 'enum',
+    values: ['auto', 'fixed'],
+    default: 'fixed',
+    description:
+      'Set to "auto" to allow column widths to be automatically determined by the content.',
+  },
   ...classNamePropDefs,
   ...stylePropDefs,
+  styles: {
+    type: 'enum',
+    values: ['{ tableRoot }'],
+    description: 'Custom inline CSS styles for inner TableRoot component.',
+  },
 };
 
 // =============================================================================
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 82069bc469..d2db85a876 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -1700,7 +1700,9 @@ export function Table<T extends TableItem>({
   selection,
   emptyState,
   className,
+  tableLayout,
   style,
+  styles,
 }: TableProps<T>): JSX_2.Element;
 
 // @public (undocumented)
@@ -1831,6 +1833,10 @@ export interface TableProps<T extends TableItem> {
   sort?: SortState;
   // (undocumented)
   style?: React.CSSProperties;
+  // (undocumented)
+  styles?: Partial<Record<'tableRoot', React.CSSProperties>>;
+  // (undocumented)
+  tableLayout?: 'auto' | 'fixed';
 }
 
 // @public (undocumented)
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index 481487ecac..45049a5a82 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -98,7 +98,9 @@ export function Table<T extends TableItem>({
   selection,
   emptyState,
   className,
+  tableLayout = 'fixed',
   style,
+  styles = {},
 }: TableProps<T>) {
   const liveRegionId = useId();
 
@@ -137,13 +139,19 @@ export function Table<T extends TableItem>({
     data !== undefined,
   );
 
+  const wrapResizable =
+    tableLayout !== 'auto'
+      ? (elem: React.ReactNode) => (
+          <ResizableTableContainer>{elem}</ResizableTableContainer>
+        )
+      : (elem: React.ReactNode) => <>{elem}</>;
+
   return (
     <div className={className} style={style}>
       <VisuallyHidden aria-live="polite" id={liveRegionId}>
         {liveRegionLabel}
       </VisuallyHidden>
-
-      <ResizableTableContainer>
+      {wrapResizable(
         <TableRoot
           selectionMode={selectionMode}
           selectionBehavior={selectionBehavior}
@@ -154,6 +162,7 @@ export function Table<T extends TableItem>({
           disabledKeys={disabledRows}
           stale={isStale}
           aria-describedby={liveRegionId}
+          style={{ tableLayout, ...styles.tableRoot }}
         >
           <TableHeader columns={visibleColumns}>
             {column =>
@@ -207,8 +216,8 @@ export function Table<T extends TableItem>({
               );
             }}
           </TableBody>
-        </TableRoot>
-      </ResizableTableContainer>
+        </TableRoot>,
+      )}
       {pagination.type === 'page' && (
         <TablePagination
           pageSize={pagination.pageSize}
diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts
index 6d94d58fe6..f5ed86dcf4 100644
--- a/packages/ui/src/components/Table/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -134,5 +134,7 @@ export interface TableProps<T extends TableItem> {
   selection?: TableSelection;
   emptyState?: ReactNode;
   className?: string;
+  tableLayout?: 'auto' | 'fixed';
   style?: React.CSSProperties;
+  styles?: Partial<Record<'tableRoot', React.CSSProperties>>;
 }