From 73a37a89f1ba34d10684d98b053ca36c82eb3a68 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Tue, 24 Feb 2026 12:55:40 +0100 Subject: [PATCH 1/4] fix: dynamically added columns ignore minWidth --- src/table/__tests__/columns-width.test.tsx | 30 ++++++++++++++++++++++ src/table/use-column-widths.tsx | 4 ++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/table/__tests__/columns-width.test.tsx b/src/table/__tests__/columns-width.test.tsx index 2b1b976697..03839ebb3d 100644 --- a/src/table/__tests__/columns-width.test.tsx +++ b/src/table/__tests__/columns-width.test.tsx @@ -137,6 +137,36 @@ 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 }, + ]; + 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', // use minWidth because 150 > 80 + '180px', // sue width (minWidth defaults to width) + '200px', // use minWidth because 200 > 180 + ]); +}); + 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..5afe06ce64 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) || 0; + const minWidth = (column.minWidth as number) || width || DEFAULT_COLUMN_WIDTH; + newColumnWidths.set(column.id, Math.max(width || DEFAULT_COLUMN_WIDTH, minWidth)); } } if (updated) { From 51cc8f014d38f1b5b38a4dc9ecba852ad92f4201 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Tue, 24 Feb 2026 12:56:47 +0100 Subject: [PATCH 2/4] chore: fix typo --- src/table/__tests__/columns-width.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/table/__tests__/columns-width.test.tsx b/src/table/__tests__/columns-width.test.tsx index 03839ebb3d..1969832e5a 100644 --- a/src/table/__tests__/columns-width.test.tsx +++ b/src/table/__tests__/columns-width.test.tsx @@ -162,7 +162,7 @@ test('should respect minWidth when dynamically adding columns via visibleColumns expect(wrapper.findColumnHeaders().map(column => column.getElement().style.width)).toEqual([ '100px', // original column unchanged '150px', // use minWidth because 150 > 80 - '180px', // sue width (minWidth defaults to width) + '180px', // use width (minWidth defaults to width) '200px', // use minWidth because 200 > 180 ]); }); From d5ee2d54ba4136a703372d4dde2e2e6366f0c109 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Mon, 2 Mar 2026 11:19:06 +0100 Subject: [PATCH 3/4] fix: logic in column width --- src/table/use-column-widths.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/table/use-column-widths.tsx b/src/table/use-column-widths.tsx index 5afe06ce64..694972aa12 100644 --- a/src/table/use-column-widths.tsx +++ b/src/table/use-column-widths.tsx @@ -168,9 +168,9 @@ export function ColumnWidthsProvider({ visibleColumns, resizableColumns, contain const column = visibleColumns[index]; if (!columnWidths?.get(column.id) && lastVisible.indexOf(column.id) === -1) { updated = true; - const width = (column.width as number) || 0; - const minWidth = (column.minWidth as number) || width || DEFAULT_COLUMN_WIDTH; - newColumnWidths.set(column.id, Math.max(width || DEFAULT_COLUMN_WIDTH, minWidth)); + 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) { From e7e8f2372455edb4cb65bf27d728c9b6765aee86 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Tue, 3 Mar 2026 16:00:51 +0100 Subject: [PATCH 4/4] test: fix column width tests --- src/table/__tests__/columns-width.test.tsx | 25 ++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/table/__tests__/columns-width.test.tsx b/src/table/__tests__/columns-width.test.tsx index 1969832e5a..3dfb4ab564 100644 --- a/src/table/__tests__/columns-width.test.tsx +++ b/src/table/__tests__/columns-width.test.tsx @@ -143,6 +143,10 @@ test('should respect minWidth when dynamically adding columns via visibleColumns { 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(
@@ -153,7 +157,16 @@ test('should respect minWidth when dynamically adding columns via visibleColumns rerender(
@@ -161,9 +174,13 @@ test('should respect minWidth when dynamically adding columns via visibleColumns expect(wrapper.findColumnHeaders().map(column => column.getElement().style.width)).toEqual([ '100px', // original column unchanged - '150px', // use minWidth because 150 > 80 - '180px', // use width (minWidth defaults to width) - '200px', // use minWidth because 200 > 180 + '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 ]); });