diff --git a/.changeset/thirty-mirrors-own.md b/.changeset/thirty-mirrors-own.md
index 4efbad75e4..99b7b64e80 100644
--- a/.changeset/thirty-mirrors-own.md
+++ b/.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
-
-```
+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
diff --git a/docs-ui/src/app/components/table/props-definition.tsx b/docs-ui/src/app/components/table/props-definition.tsx
index e3a5cef8b4..c97bbad6d0 100644
--- a/docs-ui/src/app/components/table/props-definition.tsx
+++ b/docs-ui/src/app/components/table/props-definition.tsx
@@ -230,20 +230,15 @@ export const tablePropDefs: Record = {
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.',
- },
};
// =============================================================================
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index d2db85a876..a9f7ede252 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -1700,9 +1700,8 @@ export function Table({
selection,
emptyState,
className,
- tableLayout,
+ columnSizing,
style,
- styles,
}: TableProps): JSX_2.Element;
// @public (undocumented)
@@ -1814,6 +1813,8 @@ export interface TableProps {
// (undocumented)
columnConfig: readonly ColumnConfig[];
// (undocumented)
+ columnSizing?: 'content' | 'manual';
+ // (undocumented)
data: T[] | undefined;
// (undocumented)
emptyState?: ReactNode;
@@ -1833,10 +1834,6 @@ export interface TableProps {
sort?: SortState;
// (undocumented)
style?: React.CSSProperties;
- // (undocumented)
- styles?: Partial>;
- // (undocumented)
- tableLayout?: 'auto' | 'fixed';
}
// @public (undocumented)
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index 45049a5a82..02a9022fd8 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/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({
selection,
emptyState,
className,
- tableLayout = 'fixed',
+ columnSizing,
style,
- styles = {},
}: TableProps) {
const liveRegionId = useId();
@@ -139,12 +138,25 @@ export function Table({
data !== undefined,
);
- const wrapResizable =
- tableLayout !== 'auto'
- ? (elem: React.ReactNode) => (
- {elem}
- )
- : (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) => (
+ {elem}
+ )
+ : (elem: React.ReactNode) => <>{elem}>;
+
+ const tableRootStyle: CSSProperties = manualColumnSizing
+ ? {}
+ : { tableLayout: 'auto' };
return (
@@ -162,7 +174,7 @@ export function Table
({
disabledKeys={disabledRows}
stale={isStale}
aria-describedby={liveRegionId}
- style={{ tableLayout, ...styles.tableRoot }}
+ style={tableRootStyle}
>
{column =>
diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts
index f5ed86dcf4..cdef0a232c 100644
--- a/packages/ui/src/components/Table/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -134,7 +134,6 @@ export interface TableProps {
selection?: TableSelection;
emptyState?: ReactNode;
className?: string;
- tableLayout?: 'auto' | 'fixed';
+ columnSizing?: 'content' | 'manual';
style?: React.CSSProperties;
- styles?: Partial>;
}