Allow automatic column widths and styling TableRoot

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

.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

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.',
+  },
 };
 
 // =============================================================================

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)

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}

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