Removed inner TableRoot styling and changed automatic column sizing API

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

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