diff --git a/.changeset/thirty-mirrors-own.md b/.changeset/thirty-mirrors-own.md index 99b7b64e80..629936d8a7 100644 --- a/.changeset/thirty-mirrors-own.md +++ b/.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 diff --git a/docs-ui/src/app/components/table/props-definition.tsx b/docs-ui/src/app/components/table/props-definition.tsx index c97bbad6d0..be24e86bf0 100644 --- a/docs-ui/src/app/components/table/props-definition.tsx +++ b/docs-ui/src/app/components/table/props-definition.tsx @@ -230,13 +230,6 @@ export const tablePropDefs: Record = { 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, }; diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index a9f7ede252..82069bc469 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -1700,7 +1700,6 @@ export function Table({ selection, emptyState, className, - columnSizing, style, }: TableProps): JSX_2.Element; @@ -1813,8 +1812,6 @@ export interface TableProps { // (undocumented) columnConfig: readonly ColumnConfig[]; // (undocumented) - columnSizing?: 'content' | 'manual'; - // (undocumented) data: T[] | undefined; // (undocumented) emptyState?: ReactNode; diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx index 02a9022fd8..523e5bd6c3 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 { CSSProperties, useMemo } from 'react'; +import { useMemo } from 'react'; import { VisuallyHidden } from '../../VisuallyHidden'; import { Flex } from '../../Flex'; @@ -98,7 +98,6 @@ export function Table({ selection, emptyState, className, - columnSizing, style, }: TableProps) { const liveRegionId = useId(); @@ -138,15 +137,13 @@ export function Table({ 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({ ) : (elem: React.ReactNode) => <>{elem}; - const tableRootStyle: CSSProperties = manualColumnSizing - ? {} - : { tableLayout: 'auto' }; - return (
@@ -174,7 +167,6 @@ export function Table({ disabledKeys={disabledRows} stale={isStale} aria-describedby={liveRegionId} - style={tableRootStyle} > {column => diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts index cdef0a232c..6d94d58fe6 100644 --- a/packages/ui/src/components/Table/types.ts +++ b/packages/ui/src/components/Table/types.ts @@ -134,6 +134,5 @@ export interface TableProps { selection?: TableSelection; emptyState?: ReactNode; className?: string; - columnSizing?: 'content' | 'manual'; style?: React.CSSProperties; }