diff --git a/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx b/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx index 371b0d5b284..ee230c64896 100644 --- a/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx +++ b/frontend/src/lib/components/ResizableTable/VirtualTableHeader.tsx @@ -15,6 +15,7 @@ interface VirtualTableHeaderProps { handleResize: (index: number) => ResizeHandler layoutEffect?: CallableFunction minColumnWidth: number + expandable?: boolean } function ResizableTitle({ @@ -66,13 +67,14 @@ function VirtualTableHeader({ handleResize, layoutEffect, minColumnWidth, + expandable, }: VirtualTableHeaderProps): JSX.Element { const maxColumnWidth = minColumnWidth * 12 const height = 60 useLayoutEffect(() => (typeof layoutEffect === 'function' ? layoutEffect() : undefined)) return (
-
+ {expandable &&
} {columns.map(({ title, width }, index) => ( = any>({ function updateColumnWidth(index: number, width: number): void { const col = scrollWrapperRef.current?.querySelector( // nth-child is 1-indexed. first column is fixed. last column width must be uncontrolled. - `.ant-table-content colgroup col:nth-child(${index + 2}):not(:last-child)` + `.ant-table-content colgroup col:nth-child(${index + 1 + Number(!!props.expandable)}):not(:last-child)` ) col?.setAttribute('style', `width: ${width}px;`) } @@ -141,7 +141,10 @@ export function ResizableTable = any>({ ? column : { ...column, - width: Math.max((columnWidths[index + 1] ?? 0) * resizeRatio, minColumnWidth), + width: Math.max( + (columnWidths[index + Number(!!props.expandable)] ?? 0) * resizeRatio, + minColumnWidth + ), } ) nextColumns.slice(0, lastIndex).forEach((col, index) => { @@ -208,6 +211,7 @@ export function ResizableTable = any>({ handleResize={handleColumnResize} layoutEffect={updateTableWidth} minColumnWidth={minColumnWidth} + expandable={!!props.expandable} /> )} +