Allow automatic column widths and styling TableRoot

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

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