diff --git a/.changeset/thirty-mirrors-own.md b/.changeset/thirty-mirrors-own.md
new file mode 100644
index 0000000000..4efbad75e4
--- /dev/null
+++ b/.changeset/thirty-mirrors-own.md
@@ -0,0 +1,21 @@
+---
+'@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
+
+```
+
+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 be24e86bf0..e3a5cef8b4 100644
--- a/docs-ui/src/app/components/table/props-definition.tsx
+++ b/docs-ui/src/app/components/table/props-definition.tsx
@@ -230,8 +230,20 @@ export const tablePropDefs: Record = {
values: ['ReactNode'],
description: 'Content to display when the table has no data.',
},
+ tableLayout: {
+ type: 'enum',
+ values: ['auto', 'fixed'],
+ default: 'fixed',
+ description:
+ 'Set to "auto" to allow column widths to be automatically determined by the content.',
+ },
...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 82069bc469..d2db85a876 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -1700,7 +1700,9 @@ export function Table({
selection,
emptyState,
className,
+ tableLayout,
style,
+ styles,
}: TableProps): JSX_2.Element;
// @public (undocumented)
@@ -1831,6 +1833,10 @@ 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 481487ecac..45049a5a82 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -98,7 +98,9 @@ export function Table({
selection,
emptyState,
className,
+ tableLayout = 'fixed',
style,
+ styles = {},
}: TableProps) {
const liveRegionId = useId();
@@ -137,13 +139,19 @@ export function Table({
data !== undefined,
);
+ const wrapResizable =
+ tableLayout !== 'auto'
+ ? (elem: React.ReactNode) => (
+ {elem}
+ )
+ : (elem: React.ReactNode) => <>{elem}>;
+
return (
{liveRegionLabel}
-
-
+ {wrapResizable(
({
disabledKeys={disabledRows}
stale={isStale}
aria-describedby={liveRegionId}
+ style={{ tableLayout, ...styles.tableRoot }}
>
{column =>
@@ -207,8 +216,8 @@ export function Table({
);
}}
-
-
+ ,
+ )}
{pagination.type === 'page' && (
{
selection?: TableSelection;
emptyState?: ReactNode;
className?: string;
+ tableLayout?: 'auto' | 'fixed';
style?: React.CSSProperties;
+ styles?: Partial>;
}