diff --git a/CHANGELOG.md b/CHANGELOG.md index 450a33ae..c15fc6c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- `CustomTable` column layout now supports flexible (`grow`) columns alongside fixed-width ones: + - Column definitions accept a `grow` property (boolean or number) to opt into flex layout. A numeric value sets the flex-grow weight, allowing relative sizing between grow columns (e.g. `grow: 2` gives a column twice the share of spare space as `grow: 1`). + - `maxSize` is now respected on grow columns, capping how wide they expand via `maxWidth`. + - The wrapper's `minWidth` calculation now uses `minSize` (not TanStack's 150px default) for grow columns, preventing the table from overflowing its container when columns would otherwise be sized larger than available space. - Dependency updates: - `requests` 2.32.5 → 2.33.0 (security patch; see Security section) - `celery` 5.6.2 → 5.6.3 diff --git a/frontend/src/components/tables/CustomTable/CustomTable.jsx b/frontend/src/components/tables/CustomTable/CustomTable.jsx index e14209d2..f1f081dd 100644 --- a/frontend/src/components/tables/CustomTable/CustomTable.jsx +++ b/frontend/src/components/tables/CustomTable/CustomTable.jsx @@ -6,17 +6,22 @@ import CustomTableBody from './CustomTableBody'; const CustomTable = ({ table }) => { const tableSize = table?.tableSize ?? 'default'; - // Get column sizing state for dependency tracking + // columnSizing is read here so the memo below re-runs when columns are resized. const columnSizing = table.getState().columnSizing; - // Calculate minimum table width reactively based on column sizes + // Calculate minimum table width reactively based on column sizes. + // Grow columns contribute only their minSize (not TanStack's default 150px) + // so the wrapper doesn't force the table wider than its container. const minTableWidth = useMemo(() => { + void columnSizing; // reactive trigger: recalculate when column sizes change const headerGroups = table.getHeaderGroups(); if (!headerGroups || headerGroups.length === 0) return 0; const width = headerGroups[0]?.headers.reduce((total, header) => { - return total + header.getSize(); + const colDef = header.column.columnDef; + const size = colDef.grow ? colDef.minSize || 0 : header.getSize(); + return total + size; }, 0) || 0; return width; diff --git a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx index d579a41a..c8178eeb 100644 --- a/frontend/src/components/tables/CustomTable/CustomTableBody.jsx +++ b/frontend/src/components/tables/CustomTable/CustomTableBody.jsx @@ -126,9 +126,6 @@ const CustomTableBody = ({ }} > {row.getVisibleCells().map((cell) => { - const hasFixedSize = cell.column.columnDef.size; - const isFlexible = !hasFixedSize; - return (