Use the ResizableTableContainer only if a column has a width property, and don't set the table-layout CSS property, but leave it to the user

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

.changeset/thirty-mirrors-own.md

@@ -2,6 +2,6 @@
 '@backstage/ui': patch
 ---
 
-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.
+The Table component now wraps the react-aria-components `Table` with a `ResizableTableContainer` only if any column has a width property set. This means that column widths can adapt to the content otherwise (if no width is explicitly set).
 
 Affected components: Table

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

@@ -230,13 +230,6 @@ export const tablePropDefs: Record<string, PropDef> = {
     values: ['ReactNode'],
     description: 'Content to display when the table has no data.',
   },
-  columnSizing: {
-    type: 'enum',
-    values: ['content', 'manual'],
-    default: 'content',
-    description:
-      'Set to "manual" (or define any of the width properties on a column) to manually control column widths.',
-  },
   ...classNamePropDefs,
   ...stylePropDefs,
 };

packages/ui/report.api.md

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

packages/ui/src/components/Table/components/Table.tsx

@@ -29,7 +29,7 @@ import type {
   RowRenderFn,
   TablePaginationType,
 } from '../types';
-import { CSSProperties, useMemo } from 'react';
+import { useMemo } from 'react';
 import { VisuallyHidden } from '../../VisuallyHidden';
 import { Flex } from '../../Flex';
 
@@ -98,7 +98,6 @@ export function Table<T extends TableItem>({
   selection,
   emptyState,
   className,
-  columnSizing,
   style,
 }: TableProps<T>) {
   const liveRegionId = useId();
@@ -138,15 +137,13 @@ export function Table<T extends TableItem>({
     data !== undefined,
   );
 
-  const manualColumnSizing =
-    columnSizing === 'manual' ||
-    columnConfig.some(
-      col =>
-        col.width != null ||
-        col.minWidth != null ||
-        col.maxWidth != null ||
-        col.defaultWidth != null,
-    );
+  const manualColumnSizing = columnConfig.some(
+    col =>
+      col.width != null ||
+      col.minWidth != null ||
+      col.maxWidth != null ||
+      col.defaultWidth != null,
+  );
 
   const wrapResizable = manualColumnSizing
     ? (elem: React.ReactNode) => (
@@ -154,10 +151,6 @@ export function Table<T extends TableItem>({
       )
     : (elem: React.ReactNode) => <>{elem}</>;
 
-  const tableRootStyle: CSSProperties = manualColumnSizing
-    ? {}
-    : { tableLayout: 'auto' };
-
   return (
     <div className={className} style={style}>
       <VisuallyHidden aria-live="polite" id={liveRegionId}>
@@ -174,7 +167,6 @@ export function Table<T extends TableItem>({
           disabledKeys={disabledRows}
           stale={isStale}
           aria-describedby={liveRegionId}
-          style={tableRootStyle}
         >
           <TableHeader columns={visibleColumns}>
             {column =>

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

@@ -134,6 +134,5 @@ export interface TableProps<T extends TableItem> {
   selection?: TableSelection;
   emptyState?: ReactNode;
   className?: string;
-  columnSizing?: 'content' | 'manual';
   style?: React.CSSProperties;
 }