diff --git a/src/table/__tests__/columns-width.test.tsx b/src/table/__tests__/columns-width.test.tsx index 2b1b976697..3dfb4ab564 100644 --- a/src/table/__tests__/columns-width.test.tsx +++ b/src/table/__tests__/columns-width.test.tsx @@ -137,6 +137,53 @@ test('should use the fallback value for columns without explicit width', () => { ]); }); +test('should respect minWidth when dynamically adding columns via visibleColumns', () => { + const columns: TableProps.ColumnDefinition[] = [ + { id: 'id', header: '', cell: item => item.id, width: 100 }, + { id: 'small-width', header: '', cell: () => '-', width: 80, minWidth: 150 }, + { id: 'width-only', header: '', cell: () => '-', width: 180 }, + { id: 'minWidth-larger', header: '', cell: () => '-', width: 180, minWidth: 200 }, + { id: 'no-width-no-minWidth', header: '', cell: () => '-' }, + { id: 'no-width-minWidth-large', header: '', cell: () => '-', minWidth: 200 }, + { id: 'no-width-minWidth-small', header: '', cell: () => '-', minWidth: 80 }, + { id: 'width-larger-than-minWidth', header: '', cell: () => '-', width: 200, minWidth: 100 }, + ]; + const { wrapper, rerender } = renderTable( + + ); + expect(wrapper.findColumnHeaders().map(column => column.getElement().style.width)).toEqual(['100px']); + + // Dynamically add columns with various width/minWidth configurations + rerender( +
+ ); + + expect(wrapper.findColumnHeaders().map(column => column.getElement().style.width)).toEqual([ + '100px', // original column unchanged + '150px', // width=80, minWidth=150 -> use minWidth because 150 > 80 + '180px', // width=180, no minWidth -> minWidth defaults to width, use 180 + '200px', // width=180, minWidth=200 -> use minWidth because 200 > 180 + '120px', // no width, no minWidth -> width defaults to DEFAULT (120), minWidth defaults to width + '200px', // no width, minWidth=200 -> width defaults to DEFAULT (120), minWidth=200 -> use 200 + '120px', // no width, minWidth=80 -> width defaults to DEFAULT (120), minWidth=80 -> use 120 + '200px', // width=200, minWidth=100 -> use width because 200 > 100 + ]); +}); + describe('reading widths from the DOM', () => { const originalBoundingClientRect = HTMLElement.prototype.getBoundingClientRect; beforeEach(() => { diff --git a/src/table/use-column-widths.tsx b/src/table/use-column-widths.tsx index db41a79c8c..694972aa12 100644 --- a/src/table/use-column-widths.tsx +++ b/src/table/use-column-widths.tsx @@ -168,7 +168,9 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain const column = visibleColumns[index]; if (!columnWidths?.get(column.id) && lastVisible.indexOf(column.id) === -1) { updated = true; - newColumnWidths.set(column.id, (column.width as number) || DEFAULT_COLUMN_WIDTH); + const width = (column.width as number) || DEFAULT_COLUMN_WIDTH; + const minWidth = (column.minWidth as number) || width; + newColumnWidths.set(column.id, Math.max(width, minWidth)); } } if (updated) {