From 005c9f22d5c3e92209d2e71e7b4c432f08f970ab Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Wed, 19 Mar 2025 16:58:57 -0500
Subject: [PATCH 01/39] Use state to handle column auto resize

---
 src/hooks/useColumnWidths.ts | 60 +++++++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index 2f70109a15..b6e5160c47 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -1,5 +1,4 @@
-import { useLayoutEffect, useRef } from 'react';
-import { flushSync } from 'react-dom';
+import { useLayoutEffect, useRef, useState } from 'react';
 
 import type { CalculatedColumn, StateSetter } from '../types';
 import type { DataGridProps } from '../DataGrid';
@@ -16,6 +15,7 @@ export function useColumnWidths<R, SR>(
   setMeasuredColumnWidths: StateSetter<ReadonlyMap<string, number>>,
   onColumnResize: DataGridProps<R, SR>['onColumnResize']
 ) {
+  const [columnToAutoresize, setColumnToAutoResize] = useState<string | null>(null);
   const prevGridWidthRef = useRef(gridWidth);
   const columnsCanFlex: boolean = columns.length === viewportColumns.length;
   // Allow columns to flex again when...
@@ -26,7 +26,10 @@ export function useColumnWidths<R, SR>(
   const columnsToMeasure: string[] = [];
 
   for (const { key, idx, width } of viewportColumns) {
-    if (
+    if (key === columnToAutoresize) {
+      newTemplateColumns[idx] = 'max-content';
+      columnsToMeasure.push(key);
+    } else if (
       typeof width === 'string' &&
       (ignorePreviouslyMeasuredColumns || !measuredColumnWidths.has(key)) &&
       !resizedColumnWidths.has(key)
@@ -62,40 +65,53 @@ export function useColumnWidths<R, SR>(
 
       return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
     });
+
+    if (columnToAutoresize !== null) {
+      setColumnToAutoResize(null);
+      setResizedColumnWidths((resizedColumnWidths) => {
+        const newResizedColumnWidths = new Map(resizedColumnWidths);
+        newResizedColumnWidths.set(
+          columnToAutoresize,
+          measureColumnWidth(gridRef, columnToAutoresize)!
+        );
+        return newResizedColumnWidths;
+      });
+    }
   }
 
   function handleColumnResize(column: CalculatedColumn<R, SR>, nextWidth: number | 'max-content') {
     const { key: resizingKey } = column;
-    const newTemplateColumns = [...templateColumns];
     const columnsToMeasure: string[] = [];
 
-    for (const { key, idx, width } of viewportColumns) {
-      if (resizingKey === key) {
-        const width = typeof nextWidth === 'number' ? `${nextWidth}px` : nextWidth;
-        newTemplateColumns[idx] = width;
-      } else if (columnsCanFlex && typeof width === 'string' && !resizedColumnWidths.has(key)) {
-        newTemplateColumns[idx] = width;
+    for (const { key, width } of viewportColumns) {
+      if (
+        resizingKey !== key &&
+        columnsCanFlex &&
+        typeof width === 'string' &&
+        !resizedColumnWidths.has(key)
+      ) {
         columnsToMeasure.push(key);
       }
     }
 
-    gridRef.current!.style.gridTemplateColumns = newTemplateColumns.join(' ');
-    const measuredWidth =
-      typeof nextWidth === 'number' ? nextWidth : measureColumnWidth(gridRef, resizingKey)!;
+    setMeasuredColumnWidths((measuredColumnWidths) => {
+      const newMeasuredColumnWidths = new Map(measuredColumnWidths);
+      for (const columnKey of columnsToMeasure) {
+        newMeasuredColumnWidths.delete(columnKey);
+      }
+      return newMeasuredColumnWidths;
+    });
 
-    // TODO: remove
-    // need flushSync to keep frozen column offsets in sync
-    // we may be able to use `startTransition` or even `requestIdleCallback` instead
-    flushSync(() => {
+    if (typeof nextWidth === 'number') {
       setResizedColumnWidths((resizedColumnWidths) => {
         const newResizedColumnWidths = new Map(resizedColumnWidths);
-        newResizedColumnWidths.set(resizingKey, measuredWidth);
+        newResizedColumnWidths.set(resizingKey, nextWidth);
         return newResizedColumnWidths;
       });
-      updateMeasuredWidths(columnsToMeasure);
-    });
-
-    onColumnResize?.(column, measuredWidth);
+      onColumnResize?.(column, nextWidth);
+    } else {
+      setColumnToAutoResize(resizingKey);
+    }
   }
 
   return {

From b66f3bd6204903486f676414dc27bcc65c2c5524 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Wed, 19 Mar 2025 18:07:22 -0500
Subject: [PATCH 02/39] Optimize

---
 src/hooks/useColumnWidths.ts | 69 +++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index b6e5160c47..9775535620 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -15,7 +15,7 @@ export function useColumnWidths<R, SR>(
   setMeasuredColumnWidths: StateSetter<ReadonlyMap<string, number>>,
   onColumnResize: DataGridProps<R, SR>['onColumnResize']
 ) {
-  const [columnToAutoresize, setColumnToAutoResize] = useState<string | null>(null);
+  const [columnToAutoResize, setColumnToAutoResize] = useState<string | null>(null);
   const prevGridWidthRef = useRef(gridWidth);
   const columnsCanFlex: boolean = columns.length === viewportColumns.length;
   // Allow columns to flex again when...
@@ -26,7 +26,7 @@ export function useColumnWidths<R, SR>(
   const columnsToMeasure: string[] = [];
 
   for (const { key, idx, width } of viewportColumns) {
-    if (key === columnToAutoresize) {
+    if (key === columnToAutoResize) {
       newTemplateColumns[idx] = 'max-content';
       columnsToMeasure.push(key);
     } else if (
@@ -47,34 +47,37 @@ export function useColumnWidths<R, SR>(
   });
 
   function updateMeasuredWidths(columnsToMeasure: readonly string[]) {
-    if (columnsToMeasure.length === 0) return;
-
-    setMeasuredColumnWidths((measuredColumnWidths) => {
-      const newMeasuredColumnWidths = new Map(measuredColumnWidths);
-      let hasChanges = false;
-
-      for (const key of columnsToMeasure) {
-        const measuredWidth = measureColumnWidth(gridRef, key);
-        hasChanges ||= measuredWidth !== measuredColumnWidths.get(key);
-        if (measuredWidth === undefined) {
-          newMeasuredColumnWidths.delete(key);
-        } else {
-          newMeasuredColumnWidths.set(key, measuredWidth);
+    if (columnsToMeasure.length > 0) {
+      setMeasuredColumnWidths((measuredColumnWidths) => {
+        const newMeasuredColumnWidths = new Map(measuredColumnWidths);
+        let hasChanges = false;
+
+        for (const key of columnsToMeasure) {
+          const measuredWidth = measureColumnWidth(gridRef, key);
+          hasChanges ||= measuredWidth !== measuredColumnWidths.get(key);
+          if (measuredWidth === undefined) {
+            newMeasuredColumnWidths.delete(key);
+          } else {
+            newMeasuredColumnWidths.set(key, measuredWidth);
+          }
         }
-      }
 
-      return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
-    });
+        return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
+      });
+    }
 
-    if (columnToAutoresize !== null) {
+    if (columnToAutoResize !== null) {
       setColumnToAutoResize(null);
       setResizedColumnWidths((resizedColumnWidths) => {
-        const newResizedColumnWidths = new Map(resizedColumnWidths);
-        newResizedColumnWidths.set(
-          columnToAutoresize,
-          measureColumnWidth(gridRef, columnToAutoresize)!
-        );
-        return newResizedColumnWidths;
+        const oldWidth = resizedColumnWidths.get(columnToAutoResize);
+        const newWidth = measureColumnWidth(gridRef, columnToAutoResize);
+        if (newWidth !== undefined && oldWidth !== newWidth) {
+          const newResizedColumnWidths = new Map(resizedColumnWidths);
+          newResizedColumnWidths.set(columnToAutoResize, newWidth);
+          onColumnResize?.(viewportColumns.find((c) => c.key === columnToAutoResize)!, newWidth);
+          return newResizedColumnWidths;
+        }
+        return resizedColumnWidths;
       });
     }
   }
@@ -94,13 +97,15 @@ export function useColumnWidths<R, SR>(
       }
     }
 
-    setMeasuredColumnWidths((measuredColumnWidths) => {
-      const newMeasuredColumnWidths = new Map(measuredColumnWidths);
-      for (const columnKey of columnsToMeasure) {
-        newMeasuredColumnWidths.delete(columnKey);
-      }
-      return newMeasuredColumnWidths;
-    });
+    if (columnsToMeasure.length > 0) {
+      setMeasuredColumnWidths((measuredColumnWidths) => {
+        const newMeasuredColumnWidths = new Map(measuredColumnWidths);
+        for (const columnKey of columnsToMeasure) {
+          newMeasuredColumnWidths.delete(columnKey);
+        }
+        return newMeasuredColumnWidths;
+      });
+    }
 
     if (typeof nextWidth === 'number') {
       setResizedColumnWidths((resizedColumnWidths) => {

From 51c2bdd209fd0abc3a13ee9adfdec3af1bd9a6e5 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 08:32:50 -0500
Subject: [PATCH 03/39] Cleanup

---
 src/hooks/useColumnWidths.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index 9775535620..a558c8d4ed 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -43,10 +43,10 @@ export function useColumnWidths<R, SR>(
 
   useLayoutEffect(() => {
     prevGridWidthRef.current = gridWidth;
-    updateMeasuredWidths(columnsToMeasure);
+    updateMeasuredWidths();
   });
 
-  function updateMeasuredWidths(columnsToMeasure: readonly string[]) {
+  function updateMeasuredWidths() {
     if (columnsToMeasure.length > 0) {
       setMeasuredColumnWidths((measuredColumnWidths) => {
         const newMeasuredColumnWidths = new Map(measuredColumnWidths);

From d4afa2ba342de86b77346e418e98a5c8584b1e7c Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 08:52:18 -0500
Subject: [PATCH 04/39] Test

---
 src/hooks/useColumnWidths.ts           | 1 +
 test/browser/column/resizable.test.tsx | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index a558c8d4ed..e61a48dd19 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -86,6 +86,7 @@ export function useColumnWidths<R, SR>(
     const { key: resizingKey } = column;
     const columnsToMeasure: string[] = [];
 
+    // remeasure all columns that can flex and are not resized by the user
     for (const { key, width } of viewportColumns) {
       if (
         resizingKey !== key &&
diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index afd227bf25..e5bbb9aef9 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -94,6 +94,7 @@ test('should use the minWidth if specified', async () => {
 });
 
 test('should auto resize column when resize handle is double clicked', async () => {
+  const onColumnResize = vi.fn();
   setup<Row, unknown>({
     columns,
     rows: [
@@ -101,13 +102,15 @@ test('should auto resize column when resize handle is double clicked', async ()
         col1: 1,
         col2: 'a'.repeat(50)
       }
-    ]
+    ],
+    onColumnResize
   });
   const [, col2] = getHeaderCells();
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
   await autoResize(col2);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 327.703px' });
+  expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(col2), 327.703);
 });
 
 test('should use the maxWidth if specified on auto resize', async () => {

From ccaa4376e3d0193227f9fc2e3ff9e1281e2545cc Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 09:30:49 -0500
Subject: [PATCH 05/39] Fix tests

---
 test/browser/column/resizable.test.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index e5bbb9aef9..8a2dca8e6f 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -110,7 +110,8 @@ test('should auto resize column when resize handle is double clicked', async ()
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
   await autoResize(col2);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 327.703px' });
-  expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(col2), 327.703);
+  // This is called twice in strict mode
+  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 327.703125);
 });
 
 test('should use the maxWidth if specified on auto resize', async () => {

From 69c46a221de67a58f662291d8cd01be8eb43bef1 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 09:56:41 -0500
Subject: [PATCH 06/39] Add flex columns test, make tests more robust

---
 test/browser/column/resizable.test.tsx | 53 +++++++++++++++++++++++---
 1 file changed, 47 insertions(+), 6 deletions(-)

diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index 8a2dca8e6f..0860456933 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -66,10 +66,10 @@ test('cannot not resize or auto resize column when resizable is not specified',
 test('should resize column when dragging the handle', async () => {
   const onColumnResize = vi.fn();
   setup<Row, unknown>({ columns, rows: [], onColumnResize });
-  const [, col2] = getHeaderCells();
   const grid = getGrid();
   expect(onColumnResize).not.toHaveBeenCalled();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  const [, col2] = getHeaderCells();
   await resize({ column: col2, resizeBy: -50 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 150px' });
   expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(columns[1]), 150);
@@ -77,18 +77,18 @@ test('should resize column when dragging the handle', async () => {
 
 test('should use the maxWidth if specified', async () => {
   setup<Row, unknown>({ columns, rows: [] });
-  const [, col2] = getHeaderCells();
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px ' });
+  const [, col2] = getHeaderCells();
   await resize({ column: col2, resizeBy: 1000 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' });
 });
 
 test('should use the minWidth if specified', async () => {
   setup<Row, unknown>({ columns, rows: [] });
-  const [, col2] = getHeaderCells();
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  const [, col2] = getHeaderCells();
   await resize({ column: col2, resizeBy: -150 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 100px' });
 });
@@ -105,9 +105,9 @@ test('should auto resize column when resize handle is double clicked', async ()
     ],
     onColumnResize
   });
-  const [, col2] = getHeaderCells();
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  const [, col2] = getHeaderCells();
   await autoResize(col2);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 327.703px' });
   // This is called twice in strict mode
@@ -124,9 +124,9 @@ test('should use the maxWidth if specified on auto resize', async () => {
       }
     ]
   });
-  const [, col2] = getHeaderCells();
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  const [, col2] = getHeaderCells();
   await autoResize(col2);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' });
 });
@@ -141,9 +141,50 @@ test('should use the minWidth if specified on auto resize', async () => {
       }
     ]
   });
-  const [, col2] = getHeaderCells();
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
+  const [, col2] = getHeaderCells();
   await autoResize(col2);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 100px' });
 });
+
+test('should remeasure flex columns when resizing a column', async () => {
+  setup<
+    {
+      readonly col1: string;
+      readonly col2: string;
+      readonly col3: string;
+    },
+    unknown
+  >({
+    columns: [
+      {
+        key: 'col1',
+        name: 'col1',
+        resizable: true
+      },
+      {
+        key: 'col2',
+        name: 'col2',
+        resizable: true
+      },
+      {
+        key: 'col3',
+        name: 'col3',
+        resizable: true
+      }
+    ],
+    rows: [
+      {
+        col1: 'a'.repeat(10),
+        col2: 'a'.repeat(10),
+        col3: 'a'.repeat(10)
+      }
+    ]
+  });
+  const grid = getGrid();
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '639.328px 639.328px 639.344px' });
+  const [col1] = getHeaderCells();
+  await autoResize(col1);
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
+});

From f60e759e6ea2caf9ce48490f20e5650e5701be1d Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 10:03:07 -0500
Subject: [PATCH 07/39] Improve coverage

---
 test/browser/column/resizable.test.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index 0860456933..ea622b5fc9 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -187,4 +187,6 @@ test('should remeasure flex columns when resizing a column', async () => {
   const [col1] = getHeaderCells();
   await autoResize(col1);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
+  await autoResize(col1);
+  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
 });

From f736a3b0a73251e7b0fd14f99240d29b5cdaf805 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 10:14:04 -0500
Subject: [PATCH 08/39] test `onColumnResize`

---
 test/browser/column/resizable.test.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index ea622b5fc9..7f2fd8c1fd 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -149,6 +149,7 @@ test('should use the minWidth if specified on auto resize', async () => {
 });
 
 test('should remeasure flex columns when resizing a column', async () => {
+  const onColumnResize = vi.fn();
   setup<
     {
       readonly col1: string;
@@ -180,13 +181,18 @@ test('should remeasure flex columns when resizing a column', async () => {
         col2: 'a'.repeat(10),
         col3: 'a'.repeat(10)
       }
-    ]
+    ],
+    onColumnResize
   });
   const grid = getGrid();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '639.328px 639.328px 639.344px' });
   const [col1] = getHeaderCells();
   await autoResize(col1);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
+  expect(onColumnResize).toHaveBeenCalled();
+  onColumnResize.mockClear();
+  // if the width is the same, don't call onColumnResize
   await autoResize(col1);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
+  expect(onColumnResize).not.toHaveBeenCalled();
 });

From 0e909061eb7bf3cdf69297d920ecd9f59de1a629 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 10:18:13 -0500
Subject: [PATCH 09/39] Tweak

---
 src/hooks/useColumnWidths.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index e61a48dd19..a103aa101f 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -89,8 +89,8 @@ export function useColumnWidths<R, SR>(
     // remeasure all columns that can flex and are not resized by the user
     for (const { key, width } of viewportColumns) {
       if (
-        resizingKey !== key &&
         columnsCanFlex &&
+        resizingKey !== key &&
         typeof width === 'string' &&
         !resizedColumnWidths.has(key)
       ) {

From 523ec5a827ca931b899fb3f70dc892ff3daeb8ae Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 10:27:44 -0500
Subject: [PATCH 10/39] Rename helper

---
 src/hooks/useColumnWidths.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index a103aa101f..de095357d9 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -43,10 +43,10 @@ export function useColumnWidths<R, SR>(
 
   useLayoutEffect(() => {
     prevGridWidthRef.current = gridWidth;
-    updateMeasuredWidths();
+    updateMeasuredAndResizedWidths();
   });
 
-  function updateMeasuredWidths() {
+  function updateMeasuredAndResizedWidths() {
     if (columnsToMeasure.length > 0) {
       setMeasuredColumnWidths((measuredColumnWidths) => {
         const newMeasuredColumnWidths = new Map(measuredColumnWidths);

From 8a6bb2873ccf76cd340cd6139b0278d4426c1924 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 20 Mar 2025 11:09:22 -0500
Subject: [PATCH 11/39] Tweak comment

---
 test/browser/column/resizable.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index 7f2fd8c1fd..5a9e8189c8 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -191,7 +191,7 @@ test('should remeasure flex columns when resizing a column', async () => {
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
   expect(onColumnResize).toHaveBeenCalled();
   onColumnResize.mockClear();
-  // if the width is the same, don't call onColumnResize
+  // onColumnResize is not called if width is not changed
   await autoResize(col1);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
   expect(onColumnResize).not.toHaveBeenCalled();

From 38e8d2f2756e28191c8d7d2de0e368dc201080d8 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 11:54:25 -0500
Subject: [PATCH 12/39] Initial commit

---
 src/HeaderCell.tsx                |  4 +---
 src/hooks/useColumnWidths.ts      | 14 +++++++++-----
 src/utils/index.ts                | 20 +++++++++++++++++++-
 website/routes/CommonFeatures.tsx |  1 +
 website/routes/ContextMenu.tsx    | 18 ++++++++++++++----
 5 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx
index eeb00441b4..0246918dc8 100644
--- a/src/HeaderCell.tsx
+++ b/src/HeaderCell.tsx
@@ -3,7 +3,6 @@ import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
 import {
-  clampColumnWidth,
   getCellClassname,
   getCellStyle,
   getHeaderCellRowSpan,
@@ -124,8 +123,7 @@ export default function HeaderCell<R, SR>({
 
     function onPointerMove(event: PointerEvent) {
       const { width, right, left } = headerCell.getBoundingClientRect();
-      let newWidth = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
-      newWidth = clampColumnWidth(newWidth, column);
+      const newWidth = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
       if (width > 0 && newWidth !== width) {
         onColumnResize(column, newWidth);
       }
diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index de095357d9..e97f5c3935 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -1,5 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 
+import { clampColumnWidth, getColumnWidthForMeasurement } from '../utils';
 import type { CalculatedColumn, StateSetter } from '../types';
 import type { DataGridProps } from '../DataGrid';
 
@@ -25,16 +26,18 @@ export function useColumnWidths<R, SR>(
   const newTemplateColumns = [...templateColumns];
   const columnsToMeasure: string[] = [];
 
-  for (const { key, idx, width } of viewportColumns) {
+  for (const column of viewportColumns) {
+    const { key, idx, width } = column;
     if (key === columnToAutoResize) {
-      newTemplateColumns[idx] = 'max-content';
+      newTemplateColumns[idx] = getColumnWidthForMeasurement('max-content', column);
       columnsToMeasure.push(key);
     } else if (
       typeof width === 'string' &&
       (ignorePreviouslyMeasuredColumns || !measuredColumnWidths.has(key)) &&
+      // If the column is resized by the user, we don't want to measure it again
       !resizedColumnWidths.has(key)
     ) {
-      newTemplateColumns[idx] = width;
+      newTemplateColumns[idx] = getColumnWidthForMeasurement(width, column);
       columnsToMeasure.push(key);
     }
   }
@@ -109,12 +112,13 @@ export function useColumnWidths<R, SR>(
     }
 
     if (typeof nextWidth === 'number') {
+      const clampedNextWidth = clampColumnWidth(nextWidth, column);
       setResizedColumnWidths((resizedColumnWidths) => {
         const newResizedColumnWidths = new Map(resizedColumnWidths);
-        newResizedColumnWidths.set(resizingKey, nextWidth);
+        newResizedColumnWidths.set(resizingKey, clampedNextWidth);
         return newResizedColumnWidths;
       });
-      onColumnResize?.(column, nextWidth);
+      onColumnResize?.(column, clampedNextWidth);
     } else {
       setColumnToAutoResize(resizingKey);
     }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f6bd990888..0f58f3b71c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -21,7 +21,7 @@ export function assertIsValidKeyGetter<R, K extends React.Key>(
 export function clampColumnWidth<R, SR>(
   width: number,
   { minWidth, maxWidth }: CalculatedColumn<R, SR>
-): number {
+) {
   width = max(width, minWidth);
 
   // ignore maxWidth if it less than minWidth
@@ -32,6 +32,24 @@ export function clampColumnWidth<R, SR>(
   return width;
 }
 
+export function getColumnWidthForMeasurement<R, SR>(
+  width: string,
+  { minWidth, maxWidth }: CalculatedColumn<R, SR>
+) {
+  if (
+    maxWidth != null &&
+    // ignore maxWidth if it less than minWidth
+    maxWidth >= minWidth
+  ) {
+    // fit-content = min(max-width, max(auto, ${maxWidth}px))
+    return width === 'max-content'
+      ? `fit-content(${maxWidth}px)`
+      : `minmax(${width}, ${maxWidth}px)`;
+  }
+
+  return width;
+}
+
 export function getHeaderCellRowSpan<R, SR>(
   column: CalculatedColumnOrColumnGroup<R, SR>,
   rowIdx: number
diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx
index b938773043..86d47de39d 100644
--- a/website/routes/CommonFeatures.tsx
+++ b/website/routes/CommonFeatures.tsx
@@ -117,6 +117,7 @@ function getColumns(
     {
       key: 'country',
       name: 'Country',
+      maxWidth: 150,
       renderEditCell: (p) => (
         <select
           autoFocus
diff --git a/website/routes/ContextMenu.tsx b/website/routes/ContextMenu.tsx
index d964ad8a4c..c14bc4ecee 100644
--- a/website/routes/ContextMenu.tsx
+++ b/website/routes/ContextMenu.tsx
@@ -36,6 +36,7 @@ function createRows(): Row[] {
   for (let i = 1; i < 1000; i++) {
     rows.push({
       id: i,
+      col2: '111111111111111111111111111111111111ssssssssssssssssssssssssssssssssssssssss1',
       product: faker.commerce.productName(),
       price: faker.commerce.price()
     });
@@ -45,11 +46,20 @@ function createRows(): Row[] {
 }
 
 const columns: readonly Column<Row>[] = [
-  { key: 'id', name: 'ID' },
-  { key: 'product', name: 'Product' },
-  { key: 'price', name: 'Price' }
+  {
+    key: 'col1',
+    name: 'col1',
+    width: 100
+  },
+  {
+    key: 'col2',
+    name: 'col2',
+    minWidth: 100,
+    width: 200,
+    maxWidth: 400,
+    resizable: true
+  }
 ];
-
 function rowKeyGetter(row: Row) {
   return row.id;
 }

From 6ced075f30be28ad18348817d47c76fbdcb28086 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 11:56:42 -0500
Subject: [PATCH 13/39] Revert example

---
 website/routes/ContextMenu.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/website/routes/ContextMenu.tsx b/website/routes/ContextMenu.tsx
index c14bc4ecee..d964ad8a4c 100644
--- a/website/routes/ContextMenu.tsx
+++ b/website/routes/ContextMenu.tsx
@@ -36,7 +36,6 @@ function createRows(): Row[] {
   for (let i = 1; i < 1000; i++) {
     rows.push({
       id: i,
-      col2: '111111111111111111111111111111111111ssssssssssssssssssssssssssssssssssssssss1',
       product: faker.commerce.productName(),
       price: faker.commerce.price()
     });
@@ -46,20 +45,11 @@ function createRows(): Row[] {
 }
 
 const columns: readonly Column<Row>[] = [
-  {
-    key: 'col1',
-    name: 'col1',
-    width: 100
-  },
-  {
-    key: 'col2',
-    name: 'col2',
-    minWidth: 100,
-    width: 200,
-    maxWidth: 400,
-    resizable: true
-  }
+  { key: 'id', name: 'ID' },
+  { key: 'product', name: 'Product' },
+  { key: 'price', name: 'Price' }
 ];
+
 function rowKeyGetter(row: Row) {
   return row.id;
 }

From db17e4964e1f05a7374fbe4a39f577c4af832bbf Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 11:58:59 -0500
Subject: [PATCH 14/39] fix comment

---
 src/utils/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0f58f3b71c..88093fa9aa 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -41,9 +41,8 @@ export function getColumnWidthForMeasurement<R, SR>(
     // ignore maxWidth if it less than minWidth
     maxWidth >= minWidth
   ) {
-    // fit-content = min(max-width, max(auto, ${maxWidth}px))
     return width === 'max-content'
-      ? `fit-content(${maxWidth}px)`
+      ? `fit-content(${maxWidth}px)` // fit-content = min(max-content, max(auto, ${maxWidth}px))
       : `minmax(${width}, ${maxWidth}px)`;
   }
 

From f4e0cf233a6b68c063b68c245ff13293caa1b50e Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 12:00:19 -0500
Subject: [PATCH 15/39] Add return type

---
 src/utils/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 88093fa9aa..45a1cd1468 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -21,7 +21,7 @@ export function assertIsValidKeyGetter<R, K extends React.Key>(
 export function clampColumnWidth<R, SR>(
   width: number,
   { minWidth, maxWidth }: CalculatedColumn<R, SR>
-) {
+): number {
   width = max(width, minWidth);
 
   // ignore maxWidth if it less than minWidth
@@ -35,7 +35,7 @@ export function clampColumnWidth<R, SR>(
 export function getColumnWidthForMeasurement<R, SR>(
   width: string,
   { minWidth, maxWidth }: CalculatedColumn<R, SR>
-) {
+): string {
   if (
     maxWidth != null &&
     // ignore maxWidth if it less than minWidth

From d4dfc55baa7966d4d4d41e55c8b2f84c163e0592 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 12:02:13 -0500
Subject: [PATCH 16/39] comment

---
 src/utils/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 45a1cd1468..04bdd1afb9 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -41,8 +41,9 @@ export function getColumnWidthForMeasurement<R, SR>(
     // ignore maxWidth if it less than minWidth
     maxWidth >= minWidth
   ) {
+    // TODO: how to handle minWidth? can we use `clamp` with grid columns?
     return width === 'max-content'
-      ? `fit-content(${maxWidth}px)` // fit-content = min(max-content, max(auto, ${maxWidth}px))
+      ? `fit-content(${maxWidth}px)` // fit-content = min(max-content, max(auto, maxWidth))
       : `minmax(${width}, ${maxWidth}px)`;
   }
 

From 6ca4dd53e18420616e2114dbd1b5a4686c4046b3 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 12:50:15 -0500
Subject: [PATCH 17/39] tweak

---
 src/utils/index.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 04bdd1afb9..8aed3e5ee0 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -42,9 +42,13 @@ export function getColumnWidthForMeasurement<R, SR>(
     maxWidth >= minWidth
   ) {
     // TODO: how to handle minWidth? can we use `clamp` with grid columns?
-    return width === 'max-content'
-      ? `fit-content(${maxWidth}px)` // fit-content = min(max-content, max(auto, maxWidth))
-      : `minmax(${width}, ${maxWidth}px)`;
+    if (width === 'max-content') {
+      return `fit-content(${maxWidth}px)`; // fit-content = min(max-content, max(auto, maxWidth))
+    }
+
+    if (!width.includes('minmax') && !width.includes('fit-content')) {
+      return `minmax(${width}, ${maxWidth}px)`;
+    }
   }
 
   return width;

From 389c01e1b3ba0a1182db19687296ef519756a57c Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 12:54:09 -0500
Subject: [PATCH 18/39] Add a comment

---
 src/hooks/useCalculatedColumns.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/useCalculatedColumns.ts b/src/hooks/useCalculatedColumns.ts
index 2ba770396d..55308be81e 100644
--- a/src/hooks/useCalculatedColumns.ts
+++ b/src/hooks/useCalculatedColumns.ts
@@ -178,6 +178,7 @@ export function useCalculatedColumns<R, SR>({
       let width = getColumnWidth(column);
 
       if (typeof width === 'number') {
+        // if width is a number then we do not measure it so it needs to be clamped manually
         width = clampColumnWidth(width, column);
       } else {
         // This is a placeholder width so we can continue to use virtualization.

From 2650ccb79ceba41ac1e51fe1cdfca260a00f26f9 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 14:19:37 -0500
Subject: [PATCH 19/39] use `state` instead of `ref`

---
 src/hooks/useColumnWidths.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index e97f5c3935..c12eb35913 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 import { clampColumnWidth, getColumnWidthForMeasurement } from '../utils';
 import type { CalculatedColumn, StateSetter } from '../types';
@@ -17,12 +17,12 @@ export function useColumnWidths<R, SR>(
   onColumnResize: DataGridProps<R, SR>['onColumnResize']
 ) {
   const [columnToAutoResize, setColumnToAutoResize] = useState<string | null>(null);
-  const prevGridWidthRef = useRef(gridWidth);
+  const [prevGridWidth, setPreviousGridWidth] = useState(gridWidth);
   const columnsCanFlex: boolean = columns.length === viewportColumns.length;
   // Allow columns to flex again when...
   const ignorePreviouslyMeasuredColumns: boolean =
     // there is enough space for columns to flex and the grid was resized
-    columnsCanFlex && gridWidth !== prevGridWidthRef.current;
+    columnsCanFlex && gridWidth !== prevGridWidth;
   const newTemplateColumns = [...templateColumns];
   const columnsToMeasure: string[] = [];
 
@@ -44,12 +44,11 @@ export function useColumnWidths<R, SR>(
 
   const gridTemplateColumns = newTemplateColumns.join(' ');
 
-  useLayoutEffect(() => {
-    prevGridWidthRef.current = gridWidth;
-    updateMeasuredAndResizedWidths();
-  });
+  useLayoutEffect(updateMeasuredAndResizedWidths);
 
   function updateMeasuredAndResizedWidths() {
+    setPreviousGridWidth(gridWidth);
+
     if (columnsToMeasure.length > 0) {
       setMeasuredColumnWidths((measuredColumnWidths) => {
         const newMeasuredColumnWidths = new Map(measuredColumnWidths);

From 2b338b08d3420359619e152ea1b297905a93c413 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 16:36:28 -0500
Subject: [PATCH 20/39] use `clamp` and `max` css functions

---
 src/hooks/useCalculatedColumns.ts      |  7 ++---
 src/hooks/useColumnWidths.ts           | 36 ++++++++++++--------------
 src/utils/index.ts                     | 24 ++++++-----------
 src/utils/renderMeasuringCells.tsx     |  4 +--
 test/browser/column/resizable.test.tsx |  7 +++--
 website/routes/CommonFeatures.tsx      |  1 +
 6 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/src/hooks/useCalculatedColumns.ts b/src/hooks/useCalculatedColumns.ts
index 55308be81e..1cde7c7f59 100644
--- a/src/hooks/useCalculatedColumns.ts
+++ b/src/hooks/useCalculatedColumns.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { clampColumnWidth, max, min } from '../utils';
+import { max, min } from '../utils';
 import type { CalculatedColumn, CalculatedColumnParent, ColumnOrColumnGroup, Omit } from '../types';
 import { renderValue } from '../cellRenderers';
 import { SELECT_COLUMN_KEY } from '../Columns';
@@ -177,10 +177,7 @@ export function useCalculatedColumns<R, SR>({
     for (const column of columns) {
       let width = getColumnWidth(column);
 
-      if (typeof width === 'number') {
-        // if width is a number then we do not measure it so it needs to be clamped manually
-        width = clampColumnWidth(width, column);
-      } else {
+      if (typeof width === 'string') {
         // This is a placeholder width so we can continue to use virtualization.
         // The actual value is set after the column is rendered
         width = column.minWidth;
diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index c12eb35913..51e2a35e8f 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -1,6 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
 
-import { clampColumnWidth, getColumnWidthForMeasurement } from '../utils';
+import { getColumnWidthForMeasurement } from '../utils';
 import type { CalculatedColumn, StateSetter } from '../types';
 import type { DataGridProps } from '../DataGrid';
 
@@ -16,7 +16,10 @@ export function useColumnWidths<R, SR>(
   setMeasuredColumnWidths: StateSetter<ReadonlyMap<string, number>>,
   onColumnResize: DataGridProps<R, SR>['onColumnResize']
 ) {
-  const [columnToAutoResize, setColumnToAutoResize] = useState<string | null>(null);
+  const [columnToAutoResize, setColumnToAutoResize] = useState<{
+    readonly key: string;
+    readonly width: number | 'max-content';
+  } | null>(null);
   const [prevGridWidth, setPreviousGridWidth] = useState(gridWidth);
   const columnsCanFlex: boolean = columns.length === viewportColumns.length;
   // Allow columns to flex again when...
@@ -28,11 +31,10 @@ export function useColumnWidths<R, SR>(
 
   for (const column of viewportColumns) {
     const { key, idx, width } = column;
-    if (key === columnToAutoResize) {
-      newTemplateColumns[idx] = getColumnWidthForMeasurement('max-content', column);
+    if (key === columnToAutoResize?.key) {
+      newTemplateColumns[idx] = getColumnWidthForMeasurement(columnToAutoResize.width, column);
       columnsToMeasure.push(key);
     } else if (
-      typeof width === 'string' &&
       (ignorePreviouslyMeasuredColumns || !measuredColumnWidths.has(key)) &&
       // If the column is resized by the user, we don't want to measure it again
       !resizedColumnWidths.has(key)
@@ -71,12 +73,13 @@ export function useColumnWidths<R, SR>(
     if (columnToAutoResize !== null) {
       setColumnToAutoResize(null);
       setResizedColumnWidths((resizedColumnWidths) => {
-        const oldWidth = resizedColumnWidths.get(columnToAutoResize);
-        const newWidth = measureColumnWidth(gridRef, columnToAutoResize);
+        const resizingKey = columnToAutoResize.key;
+        const oldWidth = resizedColumnWidths.get(resizingKey);
+        const newWidth = measureColumnWidth(gridRef, resizingKey);
         if (newWidth !== undefined && oldWidth !== newWidth) {
           const newResizedColumnWidths = new Map(resizedColumnWidths);
-          newResizedColumnWidths.set(columnToAutoResize, newWidth);
-          onColumnResize?.(viewportColumns.find((c) => c.key === columnToAutoResize)!, newWidth);
+          newResizedColumnWidths.set(resizingKey, newWidth);
+          onColumnResize?.(viewportColumns.find((c) => c.key === resizingKey)!, newWidth);
           return newResizedColumnWidths;
         }
         return resizedColumnWidths;
@@ -110,17 +113,10 @@ export function useColumnWidths<R, SR>(
       });
     }
 
-    if (typeof nextWidth === 'number') {
-      const clampedNextWidth = clampColumnWidth(nextWidth, column);
-      setResizedColumnWidths((resizedColumnWidths) => {
-        const newResizedColumnWidths = new Map(resizedColumnWidths);
-        newResizedColumnWidths.set(resizingKey, clampedNextWidth);
-        return newResizedColumnWidths;
-      });
-      onColumnResize?.(column, clampedNextWidth);
-    } else {
-      setColumnToAutoResize(resizingKey);
-    }
+    setColumnToAutoResize({
+      key: resizingKey,
+      width: nextWidth
+    });
   }
 
   return {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 8aed3e5ee0..fdedc9b17e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -17,25 +17,17 @@ export function assertIsValidKeyGetter<R, K extends React.Key>(
     throw new Error('Please specify the rowKeyGetter prop to use selection');
   }
 }
-
-export function clampColumnWidth<R, SR>(
-  width: number,
-  { minWidth, maxWidth }: CalculatedColumn<R, SR>
-): number {
-  width = max(width, minWidth);
-
-  // ignore maxWidth if it less than minWidth
-  if (typeof maxWidth === 'number' && maxWidth >= minWidth) {
-    return min(width, maxWidth);
-  }
-
-  return width;
-}
-
 export function getColumnWidthForMeasurement<R, SR>(
-  width: string,
+  width: number | string,
   { minWidth, maxWidth }: CalculatedColumn<R, SR>
 ): string {
+  if (typeof width === 'number') {
+    if (maxWidth != null) {
+      return `clamp(${minWidth}px, ${width}px, ${maxWidth}px)`;
+    }
+    return `max(${minWidth}px, ${width}px)`;
+  }
+
   if (
     maxWidth != null &&
     // ignore maxWidth if it less than minWidth
diff --git a/src/utils/renderMeasuringCells.tsx b/src/utils/renderMeasuringCells.tsx
index ff2b88b86a..0c323bdd71 100644
--- a/src/utils/renderMeasuringCells.tsx
+++ b/src/utils/renderMeasuringCells.tsx
@@ -11,11 +11,11 @@ const measuringCellClassname = css`
 `;
 
 export function renderMeasuringCells<R, SR>(viewportColumns: readonly CalculatedColumn<R, SR>[]) {
-  return viewportColumns.map(({ key, idx, minWidth, maxWidth }) => (
+  return viewportColumns.map(({ key, idx, minWidth }) => (
     <div
       key={key}
       className={measuringCellClassname}
-      style={{ gridColumnStart: idx + 1, minWidth, maxWidth }}
+      style={{ gridColumnStart: idx + 1, minWidth }}
       data-measuring-cell-key={key}
     />
   ));
diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index 5a9e8189c8..672b7945c4 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -72,16 +72,19 @@ test('should resize column when dragging the handle', async () => {
   const [, col2] = getHeaderCells();
   await resize({ column: col2, resizeBy: -50 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 150px' });
-  expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(columns[1]), 150);
+  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 150);
 });
 
 test('should use the maxWidth if specified', async () => {
-  setup<Row, unknown>({ columns, rows: [] });
+  const onColumnResize = vi.fn();
+  setup<Row, unknown>({ columns, rows: [], onColumnResize });
   const grid = getGrid();
+  expect(onColumnResize).not.toHaveBeenCalled();
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px ' });
   const [, col2] = getHeaderCells();
   await resize({ column: col2, resizeBy: 1000 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' });
+  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 400);
 });
 
 test('should use the minWidth if specified', async () => {
diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx
index 86d47de39d..453fb06e9e 100644
--- a/website/routes/CommonFeatures.tsx
+++ b/website/routes/CommonFeatures.tsx
@@ -117,6 +117,7 @@ function getColumns(
     {
       key: 'country',
       name: 'Country',
+      width: 800,
       maxWidth: 150,
       renderEditCell: (p) => (
         <select

From 20dd703f2f649349c635705d257b39ad59bd65df Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 16:37:09 -0500
Subject: [PATCH 21/39] Remove width

---
 website/routes/CommonFeatures.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx
index 453fb06e9e..86d47de39d 100644
--- a/website/routes/CommonFeatures.tsx
+++ b/website/routes/CommonFeatures.tsx
@@ -117,7 +117,6 @@ function getColumns(
     {
       key: 'country',
       name: 'Country',
-      width: 800,
       maxWidth: 150,
       renderEditCell: (p) => (
         <select

From 106842e51b838513ac34c666f5897ede5e15064d Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 16:41:08 -0500
Subject: [PATCH 22/39] is `flushSync` needed

---
 src/hooks/useGridDimensions.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts
index ddd2ac67e3..4f0422385c 100644
--- a/src/hooks/useGridDimensions.ts
+++ b/src/hooks/useGridDimensions.ts
@@ -1,5 +1,4 @@
 import { useLayoutEffect, useRef, useState } from 'react';
-import { flushSync } from 'react-dom';
 
 export function useGridDimensions() {
   const gridRef = useRef<HTMLDivElement>(null);
@@ -28,12 +27,9 @@ export function useGridDimensions() {
       const size = entries[0].contentBoxSize[0];
       const { clientHeight, offsetHeight } = gridRef.current!;
 
-      // we use flushSync here to avoid flashing scrollbars
-      flushSync(() => {
-        setInlineSize(size.inlineSize);
-        setBlockSize(size.blockSize);
-        setHorizontalScrollbarHeight(offsetHeight - clientHeight);
-      });
+      setInlineSize(size.inlineSize);
+      setBlockSize(size.blockSize);
+      setHorizontalScrollbarHeight(offsetHeight - clientHeight);
     });
     resizeObserver.observe(gridRef.current!);
 

From 52b923724b449c82e2f24dba06d1b42bf874e7bc Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 16:46:22 -0500
Subject: [PATCH 23/39] Add back max-width

---
 src/utils/renderMeasuringCells.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/renderMeasuringCells.tsx b/src/utils/renderMeasuringCells.tsx
index 0c323bdd71..ff2b88b86a 100644
--- a/src/utils/renderMeasuringCells.tsx
+++ b/src/utils/renderMeasuringCells.tsx
@@ -11,11 +11,11 @@ const measuringCellClassname = css`
 `;
 
 export function renderMeasuringCells<R, SR>(viewportColumns: readonly CalculatedColumn<R, SR>[]) {
-  return viewportColumns.map(({ key, idx, minWidth }) => (
+  return viewportColumns.map(({ key, idx, minWidth, maxWidth }) => (
     <div
       key={key}
       className={measuringCellClassname}
-      style={{ gridColumnStart: idx + 1, minWidth }}
+      style={{ gridColumnStart: idx + 1, minWidth, maxWidth }}
       data-measuring-cell-key={key}
     />
   ));

From a56574cb5ee82dc40a7376b3a983ebb4afc69531 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 16:54:11 -0500
Subject: [PATCH 24/39] `fit-content` does not do what I think it does

---
 src/utils/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index fdedc9b17e..63b5a05973 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -33,9 +33,9 @@ export function getColumnWidthForMeasurement<R, SR>(
     // ignore maxWidth if it less than minWidth
     maxWidth >= minWidth
   ) {
-    // TODO: how to handle minWidth? can we use `clamp` with grid columns?
+    // TODO: how to clamp width in CSS grid?
     if (width === 'max-content') {
-      return `fit-content(${maxWidth}px)`; // fit-content = min(max-content, max(auto, maxWidth))
+      return width;
     }
 
     if (!width.includes('minmax') && !width.includes('fit-content')) {

From c90685c854991173c26f646806d043ae80efd1a2 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Fri, 21 Mar 2025 17:31:09 -0500
Subject: [PATCH 25/39] handle `minWidth`

---
 src/utils/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 63b5a05973..f064b27067 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -28,6 +28,8 @@ export function getColumnWidthForMeasurement<R, SR>(
     return `max(${minWidth}px, ${width}px)`;
   }
 
+  const useMinMax = !width.includes('minmax') && !width.includes('fit-content');
+
   if (
     maxWidth != null &&
     // ignore maxWidth if it less than minWidth
@@ -38,11 +40,15 @@ export function getColumnWidthForMeasurement<R, SR>(
       return width;
     }
 
-    if (!width.includes('minmax') && !width.includes('fit-content')) {
+    if (useMinMax) {
       return `minmax(${width}, ${maxWidth}px)`;
     }
   }
 
+  if (useMinMax) {
+    return `minmax(${minWidth}px, ${width})`;
+  }
+
   return width;
 }
 

From 478982138eb12d003a52827d39337cb202eaf506 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Sun, 23 Mar 2025 15:36:18 -0500
Subject: [PATCH 26/39] Use `CSS.supports`

---
 src/utils/index.ts | 45 +++++++++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index f064b27067..497f37c302 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -20,36 +20,37 @@ export function assertIsValidKeyGetter<R, K extends React.Key>(
 export function getColumnWidthForMeasurement<R, SR>(
   width: number | string,
   { minWidth, maxWidth }: CalculatedColumn<R, SR>
-): string {
-  if (typeof width === 'number') {
-    if (maxWidth != null) {
-      return `clamp(${minWidth}px, ${width}px, ${maxWidth}px)`;
-    }
-    return `max(${minWidth}px, ${width}px)`;
+) {
+  if (width === 'max-content' || width === 'min-content') {
+    // TODO: how to handle minWidth and maxWidth?
+    return width;
   }
 
-  const useMinMax = !width.includes('minmax') && !width.includes('fit-content');
+  const widthWithUnit = typeof width === 'number' ? `${width}px` : width;
+  const hasMaxWidth = maxWidth != null;
+  const clampedWidth = hasMaxWidth
+    ? `clamp(${minWidth}px, ${widthWithUnit}, ${maxWidth}px)`
+    : `max(${minWidth}px, ${widthWithUnit})`;
+
+  // clamp() and max() do not handle all the css grid column width values
+  if (isValidCSSGridColumnWidth(clampedWidth)) {
+    return clampedWidth;
+  }
 
   if (
-    maxWidth != null &&
+    hasMaxWidth &&
     // ignore maxWidth if it less than minWidth
     maxWidth >= minWidth
   ) {
-    // TODO: how to clamp width in CSS grid?
-    if (width === 'max-content') {
-      return width;
-    }
-
-    if (useMinMax) {
-      return `minmax(${width}, ${maxWidth}px)`;
+    // We are setting maxWidth on the measuring cell but the browser only applies
+    // it after all the widths are calculated. This results in left over space in some cases.
+    const minMaxWidth = `minmax(${widthWithUnit}, ${maxWidth}px)`;
+    if (isValidCSSGridColumnWidth(minMaxWidth)) {
+      return minMaxWidth;
     }
   }
 
-  if (useMinMax) {
-    return `minmax(${minWidth}px, ${width})`;
-  }
-
-  return width;
+  return isValidCSSGridColumnWidth(widthWithUnit) ? widthWithUnit : 'auto';
 }
 
 export function getHeaderCellRowSpan<R, SR>(
@@ -58,3 +59,7 @@ export function getHeaderCellRowSpan<R, SR>(
 ) {
   return column.parent === undefined ? rowIdx : column.level - column.parent.level;
 }
+
+function isValidCSSGridColumnWidth(width: string) {
+  return CSS.supports('grid-template-columns', width);
+}

From d9063f6d5714ca72b3d399ba3b49459d6a2437c7 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Mon, 24 Mar 2025 07:58:07 -0500
Subject: [PATCH 27/39] Fix tests

---
 src/utils/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 497f37c302..bde2969a14 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -27,6 +27,13 @@ export function getColumnWidthForMeasurement<R, SR>(
   }
 
   const widthWithUnit = typeof width === 'number' ? `${width}px` : width;
+
+  // don't break in Node.js (SSR) and jsdom
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (CSS == null) {
+    return widthWithUnit;
+  }
+
   const hasMaxWidth = maxWidth != null;
   const clampedWidth = hasMaxWidth
     ? `clamp(${minWidth}px, ${widthWithUnit}, ${maxWidth}px)`

From fe0d6963aab0580cf8a4a53d5cc9eebd06e29266 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Mon, 24 Mar 2025 08:07:52 -0500
Subject: [PATCH 28/39] Fix node test

---
 src/utils/index.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index bde2969a14..d827f0d673 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -29,8 +29,7 @@ export function getColumnWidthForMeasurement<R, SR>(
   const widthWithUnit = typeof width === 'number' ? `${width}px` : width;
 
   // don't break in Node.js (SSR) and jsdom
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (CSS == null) {
+  if (typeof CSS === 'undefined') {
     return widthWithUnit;
   }
 

From d3b412dbdd8bc348052957ba160bb0c1a2e74825 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Mon, 24 Mar 2025 09:39:48 -0500
Subject: [PATCH 29/39] Tweak logic

---
 src/utils/index.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index d827f0d673..b0b23f9bc5 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -21,11 +21,6 @@ export function getColumnWidthForMeasurement<R, SR>(
   width: number | string,
   { minWidth, maxWidth }: CalculatedColumn<R, SR>
 ) {
-  if (width === 'max-content' || width === 'min-content') {
-    // TODO: how to handle minWidth and maxWidth?
-    return width;
-  }
-
   const widthWithUnit = typeof width === 'number' ? `${width}px` : width;
 
   // don't break in Node.js (SSR) and jsdom
@@ -46,7 +41,10 @@ export function getColumnWidthForMeasurement<R, SR>(
   if (
     hasMaxWidth &&
     // ignore maxWidth if it less than minWidth
-    maxWidth >= minWidth
+    maxWidth >= minWidth &&
+    // we do not want to use minmax with max-content as it
+    // can result in width being larger than max-content
+    widthWithUnit !== 'max-content'
   ) {
     // We are setting maxWidth on the measuring cell but the browser only applies
     // it after all the widths are calculated. This results in left over space in some cases.

From e6bb3822da5f12416fe604a0f70dfd52a7a62a40 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Mon, 24 Mar 2025 09:48:37 -0500
Subject: [PATCH 30/39] Add `ResizedWidth` type

---
 src/HeaderRow.tsx            | 4 ++--
 src/hooks/useColumnWidths.ts | 6 +++---
 src/types.ts                 | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
index 7b4c7cb755..d6667a477b 100644
--- a/src/HeaderRow.tsx
+++ b/src/HeaderRow.tsx
@@ -3,7 +3,7 @@ import { css } from '@linaria/core';
 import clsx from 'clsx';
 
 import { getColSpan } from './utils';
-import type { CalculatedColumn, Direction, Position } from './types';
+import type { CalculatedColumn, Direction, Position, ResizedWidth } from './types';
 import type { DataGridProps } from './DataGrid';
 import HeaderCell from './HeaderCell';
 import { cell, cellFrozen } from './style/cell';
@@ -17,7 +17,7 @@ type SharedDataGridProps<R, SR, K extends React.Key> = Pick<
 export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGridProps<R, SR, K> {
   rowIdx: number;
   columns: readonly CalculatedColumn<R, SR>[];
-  onColumnResize: (column: CalculatedColumn<R, SR>, width: number | 'max-content') => void;
+  onColumnResize: (column: CalculatedColumn<R, SR>, width: ResizedWidth) => void;
   selectCell: (position: Position) => void;
   lastFrozenColumnIndex: number;
   selectedCellIdx: number | undefined;
diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index 51e2a35e8f..5ee041e4cf 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -1,7 +1,7 @@
 import { useLayoutEffect, useState } from 'react';
 
 import { getColumnWidthForMeasurement } from '../utils';
-import type { CalculatedColumn, StateSetter } from '../types';
+import type { CalculatedColumn, ResizedWidth, StateSetter } from '../types';
 import type { DataGridProps } from '../DataGrid';
 
 export function useColumnWidths<R, SR>(
@@ -18,7 +18,7 @@ export function useColumnWidths<R, SR>(
 ) {
   const [columnToAutoResize, setColumnToAutoResize] = useState<{
     readonly key: string;
-    readonly width: number | 'max-content';
+    readonly width: ResizedWidth;
   } | null>(null);
   const [prevGridWidth, setPreviousGridWidth] = useState(gridWidth);
   const columnsCanFlex: boolean = columns.length === viewportColumns.length;
@@ -87,7 +87,7 @@ export function useColumnWidths<R, SR>(
     }
   }
 
-  function handleColumnResize(column: CalculatedColumn<R, SR>, nextWidth: number | 'max-content') {
+  function handleColumnResize(column: CalculatedColumn<R, SR>, nextWidth: ResizedWidth) {
     const { key: resizingKey } = column;
     const columnsToMeasure: string[] = [];
 
diff --git a/src/types.ts b/src/types.ts
index ae4246793e..192421625d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -322,3 +322,5 @@ export interface Renderers<TRow, TSummaryRow> {
 }
 
 export type Direction = 'ltr' | 'rtl';
+
+export type ResizedWidth = number | 'max-content';

From 03d9f6159177d653dc34251caefc8b3863dcc418 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Mon, 24 Mar 2025 23:02:44 -0500
Subject: [PATCH 31/39] Add back `flushSync`

---
 src/hooks/useGridDimensions.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts
index 4f0422385c..ddd2ac67e3 100644
--- a/src/hooks/useGridDimensions.ts
+++ b/src/hooks/useGridDimensions.ts
@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 
 export function useGridDimensions() {
   const gridRef = useRef<HTMLDivElement>(null);
@@ -27,9 +28,12 @@ export function useGridDimensions() {
       const size = entries[0].contentBoxSize[0];
       const { clientHeight, offsetHeight } = gridRef.current!;
 
-      setInlineSize(size.inlineSize);
-      setBlockSize(size.blockSize);
-      setHorizontalScrollbarHeight(offsetHeight - clientHeight);
+      // we use flushSync here to avoid flashing scrollbars
+      flushSync(() => {
+        setInlineSize(size.inlineSize);
+        setBlockSize(size.blockSize);
+        setHorizontalScrollbarHeight(offsetHeight - clientHeight);
+      });
     });
     resizeObserver.observe(gridRef.current!);
 

From 833b52de5bbe71ed3b9636f46554a5408020f61b Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Tue, 1 Apr 2025 11:21:38 -0500
Subject: [PATCH 32/39] Move function

---
 src/hooks/useColumnWidths.ts | 45 +++++++++++++++++++++++++++++++++++-
 src/utils/index.ts           | 45 +-----------------------------------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index 5ee041e4cf..81440f996c 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -1,6 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
 
-import { getColumnWidthForMeasurement } from '../utils';
 import type { CalculatedColumn, ResizedWidth, StateSetter } from '../types';
 import type { DataGridProps } from '../DataGrid';
 
@@ -130,3 +129,47 @@ function measureColumnWidth(gridRef: React.RefObject<HTMLDivElement | null>, key
   const measuringCell = gridRef.current?.querySelector(selector);
   return measuringCell?.getBoundingClientRect().width;
 }
+
+function getColumnWidthForMeasurement<R, SR>(
+  width: number | string,
+  { minWidth, maxWidth }: CalculatedColumn<R, SR>
+) {
+  const widthWithUnit = typeof width === 'number' ? `${width}px` : width;
+
+  // don't break in Node.js (SSR) and jsdom
+  if (typeof CSS === 'undefined') {
+    return widthWithUnit;
+  }
+
+  const hasMaxWidth = maxWidth != null;
+  const clampedWidth = hasMaxWidth
+    ? `clamp(${minWidth}px, ${widthWithUnit}, ${maxWidth}px)`
+    : `max(${minWidth}px, ${widthWithUnit})`;
+
+  // clamp() and max() do not handle all the css grid column width values
+  if (isValidCSSGridColumnWidth(clampedWidth)) {
+    return clampedWidth;
+  }
+
+  if (
+    hasMaxWidth &&
+    // ignore maxWidth if it less than minWidth
+    maxWidth >= minWidth &&
+    // we do not want to use minmax with max-content as it
+    // can result in width being larger than max-content
+    widthWithUnit !== 'max-content'
+  ) {
+    // We are setting maxWidth on the measuring cell but the browser only applies
+    // it after all the widths are calculated. This results in left over space in some cases.
+    const minMaxWidth = `minmax(${widthWithUnit}, ${maxWidth}px)`;
+    if (isValidCSSGridColumnWidth(minMaxWidth)) {
+      return minMaxWidth;
+    }
+  }
+
+  return isValidCSSGridColumnWidth(widthWithUnit) ? widthWithUnit : 'auto';
+}
+
+function isValidCSSGridColumnWidth(width: string) {
+  return CSS.supports('grid-template-columns', width);
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b0b23f9bc5..d8178d4b3d 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import type { CalculatedColumn, CalculatedColumnOrColumnGroup, Maybe } from '../types';
+import type { CalculatedColumnOrColumnGroup, Maybe } from '../types';
 
 export * from './colSpanUtils';
 export * from './domUtils';
@@ -17,45 +17,6 @@ export function assertIsValidKeyGetter<R, K extends React.Key>(
     throw new Error('Please specify the rowKeyGetter prop to use selection');
   }
 }
-export function getColumnWidthForMeasurement<R, SR>(
-  width: number | string,
-  { minWidth, maxWidth }: CalculatedColumn<R, SR>
-) {
-  const widthWithUnit = typeof width === 'number' ? `${width}px` : width;
-
-  // don't break in Node.js (SSR) and jsdom
-  if (typeof CSS === 'undefined') {
-    return widthWithUnit;
-  }
-
-  const hasMaxWidth = maxWidth != null;
-  const clampedWidth = hasMaxWidth
-    ? `clamp(${minWidth}px, ${widthWithUnit}, ${maxWidth}px)`
-    : `max(${minWidth}px, ${widthWithUnit})`;
-
-  // clamp() and max() do not handle all the css grid column width values
-  if (isValidCSSGridColumnWidth(clampedWidth)) {
-    return clampedWidth;
-  }
-
-  if (
-    hasMaxWidth &&
-    // ignore maxWidth if it less than minWidth
-    maxWidth >= minWidth &&
-    // we do not want to use minmax with max-content as it
-    // can result in width being larger than max-content
-    widthWithUnit !== 'max-content'
-  ) {
-    // We are setting maxWidth on the measuring cell but the browser only applies
-    // it after all the widths are calculated. This results in left over space in some cases.
-    const minMaxWidth = `minmax(${widthWithUnit}, ${maxWidth}px)`;
-    if (isValidCSSGridColumnWidth(minMaxWidth)) {
-      return minMaxWidth;
-    }
-  }
-
-  return isValidCSSGridColumnWidth(widthWithUnit) ? widthWithUnit : 'auto';
-}
 
 export function getHeaderCellRowSpan<R, SR>(
   column: CalculatedColumnOrColumnGroup<R, SR>,
@@ -63,7 +24,3 @@ export function getHeaderCellRowSpan<R, SR>(
 ) {
   return column.parent === undefined ? rowIdx : column.level - column.parent.level;
 }
-
-function isValidCSSGridColumnWidth(width: string) {
-  return CSS.supports('grid-template-columns', width);
-}

From b497648d513b0878b627f14dbfc2c16648269ac5 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 3 Apr 2025 09:41:08 -0500
Subject: [PATCH 33/39] -1 loop

---
 src/hooks/useColumnWidths.ts | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index 81440f996c..3fe77a3c0d 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -88,29 +88,20 @@ export function useColumnWidths<R, SR>(
 
   function handleColumnResize(column: CalculatedColumn<R, SR>, nextWidth: ResizedWidth) {
     const { key: resizingKey } = column;
-    const columnsToMeasure: string[] = [];
-
-    // remeasure all columns that can flex and are not resized by the user
-    for (const { key, width } of viewportColumns) {
-      if (
-        columnsCanFlex &&
-        resizingKey !== key &&
-        typeof width === 'string' &&
-        !resizedColumnWidths.has(key)
-      ) {
-        columnsToMeasure.push(key);
-      }
-    }
 
-    if (columnsToMeasure.length > 0) {
-      setMeasuredColumnWidths((measuredColumnWidths) => {
+    setMeasuredColumnWidths((measuredColumnWidths) => {
+      if (columnsCanFlex) {
         const newMeasuredColumnWidths = new Map(measuredColumnWidths);
-        for (const columnKey of columnsToMeasure) {
-          newMeasuredColumnWidths.delete(columnKey);
+        for (const { key, width } of viewportColumns) {
+          if (resizingKey !== key && typeof width === 'string' && !resizedColumnWidths.has(key)) {
+            newMeasuredColumnWidths.delete(key);
+          }
         }
         return newMeasuredColumnWidths;
-      });
-    }
+      }
+
+      return measuredColumnWidths;
+    });
 
     setColumnToAutoResize({
       key: resizingKey,

From 42acc94a97cd2dfdf495b5d58d800fd91582891f Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 3 Apr 2025 09:54:05 -0500
Subject: [PATCH 34/39] Tweak

---
 src/hooks/useColumnWidths.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index 3fe77a3c0d..e7ab7b4237 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -89,8 +89,9 @@ export function useColumnWidths<R, SR>(
   function handleColumnResize(column: CalculatedColumn<R, SR>, nextWidth: ResizedWidth) {
     const { key: resizingKey } = column;
 
-    setMeasuredColumnWidths((measuredColumnWidths) => {
-      if (columnsCanFlex) {
+    if (columnsCanFlex) {
+      // delete measured column widths for all other flex columns so they can be recalculated
+      setMeasuredColumnWidths((measuredColumnWidths) => {
         const newMeasuredColumnWidths = new Map(measuredColumnWidths);
         for (const { key, width } of viewportColumns) {
           if (resizingKey !== key && typeof width === 'string' && !resizedColumnWidths.has(key)) {
@@ -98,10 +99,8 @@ export function useColumnWidths<R, SR>(
           }
         }
         return newMeasuredColumnWidths;
-      }
-
-      return measuredColumnWidths;
-    });
+      });
+    }
 
     setColumnToAutoResize({
       key: resizingKey,

From ea69faca044a396ffc777c756897038e2397cdd2 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Tue, 8 Apr 2025 17:53:00 -0500
Subject: [PATCH 35/39] Revert changes

---
 website/routes/CommonFeatures.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx
index c62ea8baaf..86d47de39d 100644
--- a/website/routes/CommonFeatures.tsx
+++ b/website/routes/CommonFeatures.tsx
@@ -96,7 +96,6 @@ function getColumns(
     {
       key: 'title',
       name: 'Task',
-      maxWidth: 500,
       frozen: true,
       renderEditCell: textEditor,
       renderSummaryCell({ row }) {
@@ -118,7 +117,7 @@ function getColumns(
     {
       key: 'country',
       name: 'Country',
-      maxWidth: 100,
+      maxWidth: 150,
       renderEditCell: (p) => (
         <select
           autoFocus

From a4672d64d06266486c516e1817ab4e7e74711f78 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Wed, 9 Apr 2025 09:24:22 -0500
Subject: [PATCH 36/39] Fix tests

---
 website/routes/CommonFeatures.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx
index 86d47de39d..f27c945f26 100644
--- a/website/routes/CommonFeatures.tsx
+++ b/website/routes/CommonFeatures.tsx
@@ -96,6 +96,7 @@ function getColumns(
     {
       key: 'title',
       name: 'Task',
+      maxWidth: 200,
       frozen: true,
       renderEditCell: textEditor,
       renderSummaryCell({ row }) {

From 852a7b516fb09375f08d4c939fb6d5428d974732 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Wed, 9 Apr 2025 09:24:40 -0500
Subject: [PATCH 37/39] Fix tests

---
 src/hooks/useColumnWidths.ts           | 3 +--
 test/browser/column/resizable.test.tsx | 2 +-
 website/routes/CommonFeatures.tsx      | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index a4402913b7..a000d73859 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -110,8 +110,7 @@ export function useColumnWidths<R, SR>(
 
     if (onColumnResize) {
       const previousWidth = resizedColumnWidths.get(resizingKey);
-      const newWidth =
-        typeof nextWidth === 'number' ? nextWidth : measureColumnWidth(gridRef, resizingKey);
+      const newWidth = measureColumnWidth(gridRef, resizingKey);
       if (newWidth !== undefined && newWidth !== previousWidth) {
         onColumnResize(column, newWidth);
       }
diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index 08c0cbe6ac..074de1742e 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -72,7 +72,7 @@ test('should resize column when dragging the handle', async () => {
   const [, col2] = getHeaderCells();
   await resize({ column: col2, resizeBy: -50 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 150px' });
-  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 150);
+  expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(columns[1]), 150);
 });
 
 test('should use the maxWidth if specified', async () => {
diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx
index f27c945f26..86d47de39d 100644
--- a/website/routes/CommonFeatures.tsx
+++ b/website/routes/CommonFeatures.tsx
@@ -96,7 +96,6 @@ function getColumns(
     {
       key: 'title',
       name: 'Task',
-      maxWidth: 200,
       frozen: true,
       renderEditCell: textEditor,
       renderSummaryCell({ row }) {

From b79becf883bbb73f90726c7121286dba1d4dcd3c Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Thu, 10 Apr 2025 11:39:49 -0500
Subject: [PATCH 38/39] Update test/browser/column/resizable.test.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 test/browser/column/resizable.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/browser/column/resizable.test.tsx b/test/browser/column/resizable.test.tsx
index 074de1742e..10b0104c12 100644
--- a/test/browser/column/resizable.test.tsx
+++ b/test/browser/column/resizable.test.tsx
@@ -84,7 +84,7 @@ test('should use the maxWidth if specified', async () => {
   const [, col2] = getHeaderCells();
   await resize({ column: col2, resizeBy: 1000 });
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 400px' });
-  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 400);
+  expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(expect.objectContaining(columns[1]), 400);
 });
 
 test('should use the minWidth if specified', async () => {

From 96887bb1bc52117499c14567f7604c07498ebffe Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@freewheel.tv>
Date: Thu, 10 Apr 2025 17:22:42 -0500
Subject: [PATCH 39/39] Rename

---
 src/hooks/useColumnWidths.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index a000d73859..0e12b56c50 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -146,7 +146,7 @@ function getColumnWidthForMeasurement<R, SR>(
     : `max(${minWidth}px, ${widthWithUnit})`;
 
   // clamp() and max() do not handle all the css grid column width values
-  if (isValidCSSGridColumnWidth(clampedWidth)) {
+  if (isValidCSSGridColumn(clampedWidth)) {
     return clampedWidth;
   }
 
@@ -161,14 +161,14 @@ function getColumnWidthForMeasurement<R, SR>(
     // We are setting maxWidth on the measuring cell but the browser only applies
     // it after all the widths are calculated. This results in left over space in some cases.
     const minMaxWidth = `minmax(${widthWithUnit}, ${maxWidth}px)`;
-    if (isValidCSSGridColumnWidth(minMaxWidth)) {
+    if (isValidCSSGridColumn(minMaxWidth)) {
       return minMaxWidth;
     }
   }
 
-  return isValidCSSGridColumnWidth(widthWithUnit) ? widthWithUnit : 'auto';
+  return isValidCSSGridColumn(widthWithUnit) ? widthWithUnit : 'auto';
 }
 
-function isValidCSSGridColumnWidth(width: string) {
+function isValidCSSGridColumn(width: string) {
   return CSS.supports('grid-template-columns', width);
 }