Removed inner TableRoot styling and changed automatic column sizing API

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

.changeset/thirty-mirrors-own.md

@@ -2,20 +2,6 @@
 '@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}
-/>
-```
+The Table component now defaults to automatically determine the columns widths based on the content, and the prop `columnSizing` can be set to `manual` to disable this. If this prop is unset and any column has a width property set, it turns to `manual` column sizing mode.
 
 Affected components: Table

docs-ui/src/app/components/table/props-definition.tsx

@@ -230,20 +230,15 @@ export const tablePropDefs: Record<string, PropDef> = {
     values: ['ReactNode'],
     description: 'Content to display when the table has no data.',
   },
-  tableLayout: {
+  columnSizing: {
     type: 'enum',
-    values: ['auto', 'fixed'],
-    default: 'fixed',
+    values: ['content', 'manual'],
+    default: 'content',
     description:
-      'Set to "auto" to allow column widths to be automatically determined by the content.',
+      'Set to "manual" (or define any of the width properties on a column) to manually control column widths.',
   },
   ...classNamePropDefs,
   ...stylePropDefs,
-  styles: {
-    type: 'enum',
-    values: ['{ tableRoot }'],
-    description: 'Custom inline CSS styles for inner TableRoot component.',
-  },
 };
 
 // =============================================================================

packages/ui/report.api.md

@@ -1700,9 +1700,8 @@ export function Table<T extends TableItem>({
   selection,
   emptyState,
   className,
-  tableLayout,
+  columnSizing,
   style,
-  styles,
 }: TableProps<T>): JSX_2.Element;
 
 // @public (undocumented)
@@ -1814,6 +1813,8 @@ export interface TableProps<T extends TableItem> {
   // (undocumented)
   columnConfig: readonly ColumnConfig<T>[];
   // (undocumented)
+  columnSizing?: 'content' | 'manual';
+  // (undocumented)
   data: T[] | undefined;
   // (undocumented)
   emptyState?: ReactNode;
@@ -1833,10 +1834,6 @@ 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

@@ -29,7 +29,7 @@ import type {
   RowRenderFn,
   TablePaginationType,
 } from '../types';
-import { useMemo } from 'react';
+import { CSSProperties, useMemo } from 'react';
 import { VisuallyHidden } from '../../VisuallyHidden';
 import { Flex } from '../../Flex';
 
@@ -98,9 +98,8 @@ export function Table<T extends TableItem>({
   selection,
   emptyState,
   className,
-  tableLayout = 'fixed',
+  columnSizing,
   style,
-  styles = {},
 }: TableProps<T>) {
   const liveRegionId = useId();
 
@@ -139,12 +138,25 @@ export function Table<T extends TableItem>({
     data !== undefined,
   );
 
-  const wrapResizable =
-    tableLayout !== 'auto'
-      ? (elem: React.ReactNode) => (
-          <ResizableTableContainer>{elem}</ResizableTableContainer>
-        )
-      : (elem: React.ReactNode) => <>{elem}</>;
+  const manualColumnSizing =
+    columnSizing === 'manual' ||
+    columnConfig.some(
+      col =>
+        col.width != null ||
+        col.minWidth != null ||
+        col.maxWidth != null ||
+        col.defaultWidth != null,
+    );
+
+  const wrapResizable = manualColumnSizing
+    ? (elem: React.ReactNode) => (
+        <ResizableTableContainer>{elem}</ResizableTableContainer>
+      )
+    : (elem: React.ReactNode) => <>{elem}</>;
+
+  const tableRootStyle: CSSProperties = manualColumnSizing
+    ? {}
+    : { tableLayout: 'auto' };
 
   return (
     <div className={className} style={style}>
@@ -162,7 +174,7 @@ export function Table<T extends TableItem>({
           disabledKeys={disabledRows}
           stale={isStale}
           aria-describedby={liveRegionId}
-          style={{ tableLayout, ...styles.tableRoot }}
+          style={tableRootStyle}
         >
           <TableHeader columns={visibleColumns}>
             {column =>

packages/ui/src/components/Table/types.ts

@@ -134,7 +134,6 @@ export interface TableProps<T extends TableItem> {
   selection?: TableSelection;
   emptyState?: ReactNode;
   className?: string;
-  tableLayout?: 'auto' | 'fixed';
+  columnSizing?: 'content' | 'manual';
   style?: React.CSSProperties;
-  styles?: Partial<Record<'tableRoot', React.CSSProperties>>;
 }