Add columnWidths and onColumnWidthsChange props (Comcast#3761)

These new props can be used to reset widths when needed for example 

```
const [columnWidths, setColumnWidths] = useState((): ColumnWidths => new Map());

function addNewRow() {
  setRows(...);
  setColumnWidths(new Map());
}

...
function toggleColumnVisibility(..) {
  setVisibleColumns(...);
  setColumnWidths(new Map());
}

,,
return <DataGrid columnWidths={columnWidths} onColumnWidthsChange={setColumnWidths} ../>
```

If these props are not provided then the grid uses internal state. `onColumnWidthsChange` at the end of the resize operation whereas `onColumnResize` fires as the column is being resized

Author: amanmahajan7

README.md

@@ -65,7 +65,7 @@ yarn add react-data-grid
 
 Additionally, import the default styles in your application:
 
-```jsx
+```tsx
 import 'react-data-grid/lib/styles.css';
 ```
 
@@ -75,7 +75,7 @@ import 'react-data-grid/lib/styles.css';
 
 Here is a basic example of how to use `react-data-grid` in your React application:
 
-```jsx
+```tsx
 import 'react-data-grid/lib/styles.css';
 
 import { DataGrid } from 'react-data-grid';
@@ -182,6 +182,26 @@ Height of the header row in pixels.
 
 Height of each summary row in pixels.
 
+###### `columnWidths?: Maybe<ColumnWidths>`
+
+A map of column widths containing both measured and resized widths. If not provided then an internal state is used.
+
+```tsx
+const [columnWidths, setColumnWidths] = useState((): ColumnWidths => new Map());
+
+function addNewRow() {
+  setRows(...);
+  // reset column widths after adding a new row
+  setColumnWidths(new Map());
+}
+
+return <DataGrid columnWidths={columnWidths} onColumnWidthsChange={setColumnWidths} ../>
+```
+
+###### `onColumnWidthsChange?: Maybe<(columnWidths: ColumnWidths) => void>`
+
+Callback triggered when column widths change. If not provided then an internal state is used.
+
 ###### `selectedRows?: Maybe<ReadonlySet<K>>`
 
 A set of selected row keys. `rowKeyGetter` is required for row selection to work.

src/DataGrid.tsx

@@ -50,6 +50,7 @@ import type {
   CellSelectArgs,
   Column,
   ColumnOrColumnGroup,
+  ColumnWidths,
   Direction,
   FillEvent,
   Maybe,
@@ -159,6 +160,10 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    * @default 35
    */
   summaryRowHeight?: Maybe<number>;
+  /** A map of column widths */
+  columnWidths?: Maybe<ColumnWidths>;
+  /** Callback triggered when column widths change */
+  onColumnWidthsChange?: Maybe<(columnWidths: ColumnWidths) => void>;
 
   /**
    * Feature props
@@ -258,6 +263,8 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     rowHeight: rawRowHeight,
     headerRowHeight: rawHeaderRowHeight,
     summaryRowHeight: rawSummaryRowHeight,
+    columnWidths: columnWidthsRaw,
+    onColumnWidthsChange: onColumnWidthsChangeRaw,
     // Feature props
     selectedRows,
     isRowSelectionDisabled,
@@ -320,25 +327,32 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
    */
   const [scrollTop, setScrollTop] = useState(0);
   const [scrollLeft, setScrollLeft] = useState(0);
-  const [resizedColumnWidths, setResizedColumnWidths] = useState(
-    (): ReadonlyMap<string, number> => new Map()
-  );
-  const [measuredColumnWidths, setMeasuredColumnWidths] = useState(
-    (): ReadonlyMap<string, number> => new Map()
+  const [columnWidthsInternal, setColumnWidthsInternal] = useState(
+    (): ColumnWidths => columnWidthsRaw ?? new Map()
   );
+  const [isColumnResizing, setColumnResizing] = useState(false);
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);
   const [scrollToPosition, setScrollToPosition] = useState<PartialPosition | null>(null);
   const [shouldFocusCell, setShouldFocusCell] = useState(false);
   const [previousRowIdx, setPreviousRowIdx] = useState(-1);
 
+  const isColumnWidthsControlled =
+    columnWidthsRaw != null && onColumnWidthsChangeRaw != null && !isColumnResizing;
+  const columnWidths = isColumnWidthsControlled ? columnWidthsRaw : columnWidthsInternal;
+  const onColumnWidthsChange = isColumnWidthsControlled
+    ? (columnWidths: ColumnWidths) => {
+        // we keep the internal state in sync with the prop but this prevents an extra render
+        setColumnWidthsInternal(columnWidths);
+        onColumnWidthsChangeRaw(columnWidths);
+      }
+    : setColumnWidthsInternal;
+
   const getColumnWidth = useCallback(
     (column: CalculatedColumn<R, SR>) => {
-      return (
-        resizedColumnWidths.get(column.key) ?? measuredColumnWidths.get(column.key) ?? column.width
-      );
+      return columnWidths.get(column.key)?.width ?? column.width;
     },
-    [measuredColumnWidths, resizedColumnWidths]
+    [columnWidths]
   );
 
   const [gridRef, gridWidth, gridHeight, horizontalScrollbarHeight] = useGridDimensions();
@@ -458,11 +472,10 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     templateColumns,
     gridRef,
     gridWidth,
-    resizedColumnWidths,
-    measuredColumnWidths,
-    setResizedColumnWidths,
-    setMeasuredColumnWidths,
-    onColumnResize
+    columnWidths,
+    onColumnWidthsChange,
+    onColumnResize,
+    setColumnResizing
   );
 
   const minColIdx = isTreeGrid ? -1 : 0;
@@ -476,6 +489,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
    * The identity of the wrapper function is stable so it won't break memoization
    */
   const handleColumnResizeLatest = useLatestFunc(handleColumnResize);
+  const handleColumnResizeEndLatest = useLatestFunc(handleColumnResizeEnd);
   const onColumnsReorderLastest = useLatestFunc(onColumnsReorder);
   const onSortColumnsChangeLatest = useLatestFunc(onSortColumnsChange);
   const onCellClickLatest = useLatestFunc(onCellClick);
@@ -714,6 +728,14 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     }
   }
 
+  function handleColumnResizeEnd() {
+    // This check is needed as double click on the resize handle triggers onPointerMove
+    if (isColumnResizing) {
+      onColumnWidthsChangeRaw?.(columnWidths);
+      setColumnResizing(false);
+    }
+  }
+
   /**
    * utils
    */
@@ -1052,6 +1074,11 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     setDraggedOverRowIdx(undefined);
   }
 
+  // Keep the state and prop in sync
+  if (isColumnWidthsControlled && columnWidthsInternal !== columnWidthsRaw) {
+    setColumnWidthsInternal(columnWidthsRaw);
+  }
+
   let templateRows = `repeat(${headerRowsCount}, ${headerRowHeight}px)`;
   if (topSummaryRowsCount > 0) {
     templateRows += ` repeat(${topSummaryRowsCount}, ${summaryRowHeight}px)`;
@@ -1135,6 +1162,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
               rowIdx={headerRowsCount}
               columns={getRowViewportColumns(mainHeaderRowIdx)}
               onColumnResize={handleColumnResizeLatest}
+              onColumnResizeEnd={handleColumnResizeEndLatest}
               onColumnsReorder={onColumnsReorderLastest}
               sortColumns={sortColumns}
               onSortColumnsChange={onSortColumnsChangeLatest}

src/HeaderCell.tsx

@@ -60,6 +60,7 @@ type SharedHeaderRowProps<R, SR> = Pick<
   | 'onSortColumnsChange'
   | 'selectCell'
   | 'onColumnResize'
+  | 'onColumnResizeEnd'
   | 'shouldFocusGrid'
   | 'direction'
   | 'onColumnsReorder'
@@ -79,6 +80,7 @@ export default function HeaderCell<R, SR>({
   rowIdx,
   isCellSelected,
   onColumnResize,
+  onColumnResizeEnd,
   onColumnsReorder,
   sortColumns,
   onSortColumnsChange,
@@ -272,18 +274,28 @@ export default function HeaderCell<R, SR>({
       })}
 
       {resizable && (
-        <ResizeHandle column={column} onColumnResize={onColumnResize} direction={direction} />
+        <ResizeHandle
+          direction={direction}
+          column={column}
+          onColumnResize={onColumnResize}
+          onColumnResizeEnd={onColumnResizeEnd}
+        />
       )}
     </div>
   );
 }
 
 type ResizeHandleProps<R, SR> = Pick<
   HeaderCellProps<R, SR>,
-  'column' | 'onColumnResize' | 'direction'
+  'direction' | 'column' | 'onColumnResize' | 'onColumnResizeEnd'
 >;
 
-function ResizeHandle<R, SR>({ column, onColumnResize, direction }: ResizeHandleProps<R, SR>) {
+function ResizeHandle<R, SR>({
+  direction,
+  column,
+  onColumnResize,
+  onColumnResizeEnd
+}: ResizeHandleProps<R, SR>) {
   const resizingOffsetRef = useRef<number>(undefined);
   const isRtl = direction === 'rtl';
 
@@ -314,6 +326,7 @@ function ResizeHandle<R, SR>({ column, onColumnResize, direction }: ResizeHandle
   }
 
   function onLostPointerCapture() {
+    onColumnResizeEnd();
     resizingOffsetRef.current = undefined;
   }
 

src/HeaderRow.tsx

@@ -18,6 +18,7 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   rowIdx: number;
   columns: readonly CalculatedColumn<R, SR>[];
   onColumnResize: (column: CalculatedColumn<R, SR>, width: ResizedWidth) => void;
+  onColumnResizeEnd: () => void;
   selectCell: (position: Position) => void;
   lastFrozenColumnIndex: number;
   selectedCellIdx: number | undefined;
@@ -51,6 +52,7 @@ function HeaderRow<R, SR, K extends React.Key>({
   rowIdx,
   columns,
   onColumnResize,
+  onColumnResizeEnd,
   onColumnsReorder,
   sortColumns,
   onSortColumnsChange,
@@ -78,6 +80,7 @@ function HeaderRow<R, SR, K extends React.Key>({
         rowIdx={rowIdx}
         isCellSelected={selectedCellIdx === column.idx}
         onColumnResize={onColumnResize}
+        onColumnResizeEnd={onColumnResizeEnd}
         onColumnsReorder={onColumnsReorder}
         onSortColumnsChange={onSortColumnsChange}
         sortColumns={sortColumns}