fix: dynamically added columns ignore minWidth (#4288)

Author: SpyZzey

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<Item>[] = [
+    { 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(
+    <Table columnDefinitions={columns} visibleColumns={['id']} items={defaultItems} resizableColumns={true} />
+  );
+  expect(wrapper.findColumnHeaders().map(column => column.getElement().style.width)).toEqual(['100px']);
+
+  // Dynamically add columns with various width/minWidth configurations
+  rerender(
+    <Table
+      columnDefinitions={columns}
+      visibleColumns={[
+        'id',
+        'small-width',
+        'width-only',
+        'minWidth-larger',
+        'no-width-no-minWidth',
+        'no-width-minWidth-large',
+        'no-width-minWidth-small',
+        'width-larger-than-minWidth',
+      ]}
+      items={defaultItems}
+      resizableColumns={true}
+    />
+  );
+
+  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(() => {

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) {