Initial commit

Author: amanmahajan7

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

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

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

website/routes/CommonFeatures.tsx

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

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