use clamp and max css functions

Author: amanmahajan7

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;

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 {

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

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}
     />
   ));

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

website/routes/CommonFeatures.tsx

@@ -117,6 +117,7 @@ function getColumns(
     {
       key: 'country',
       name: 'Country',
+      width: 800,
       maxWidth: 150,
       renderEditCell: (p) => (
         <select