Fixes bug with Table shifting on column resize (#2138)

.changeset/healthy-clocks-knock.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed issue with `Table` column resizing where passing in a `width` value to a column that was less than iTwinUI's default `minWidth` would cause a shift in the `Table` component when the column was resized.

packages/itwinui-react/src/core/Table/Table.tsx

@@ -997,11 +997,19 @@ export const Table = <
                           (c) => c.id !== SELECTION_CELL_ID, // first non-selection column is the expander column
                         );
 
-                    // override "undefined" or zero min-width with default value
                     if ([undefined, 0].includes(column.minWidth)) {
+                      // override "undefined" or zero min-width with default value
                       column.minWidth = columnHasExpanders
                         ? COLUMN_MIN_WIDTHS.withExpander
                         : COLUMN_MIN_WIDTHS.default;
+
+                      // set the minWidth to the user provided width instead if the width is less than the default minWidth
+                      if (
+                        typeof column.width === 'number' &&
+                        column.minWidth > column.width
+                      ) {
+                        column.minWidth = column.width;
+                      }
                     }
 
                     const columnProps = column.getHeaderProps({

testing/e2e/app/routes/Table/spec.ts

@@ -153,6 +153,26 @@ test.describe('Table resizing', () => {
     }
   });
 
+  test('should resize correctly when column width is set lower than default min width', async ({
+    page,
+  }) => {
+    await page.goto('/Table?subRows=true');
+
+    // resize first column
+    {
+      const initialWidths = await getColumnWidths(page);
+
+      const delta = +50;
+      await resizeColumn({ index: 0, delta, page });
+
+      const newWidths = await getColumnWidths(page);
+      expect(newWidths[0]).toBe(initialWidths[0] + delta);
+      expect(newWidths[1]).toBe(initialWidths[1] - delta);
+      expect(newWidths[2]).toBe(initialWidths[2]); // should not change
+      expect(newWidths[3]).toBe(initialWidths[3]); // should not change
+    }
+  });
+
   // #region Helpers for column resizing tests
   const resizeColumn = async (options: {
     index: number;