Allow resize widths to be reset also

Author: amanmahajan7

src/DataGrid.tsx

@@ -50,6 +50,7 @@ import type {
   CellSelectArgs,
   Column,
   ColumnOrColumnGroup,
+  ColumnWidths,
   Direction,
   FillEvent,
   Maybe,
@@ -159,6 +160,8 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    * @default 35
    */
   summaryRowHeight?: Maybe<number>;
+  columnWidths?: Maybe<ColumnWidths>;
+  onColumnWidthsChange?: Maybe<(columnWidths: ColumnWidths) => void>;
 
   /**
    * Feature props
@@ -235,9 +238,6 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   direction?: Maybe<Direction>;
   'data-testid'?: Maybe<string>;
   'data-cy'?: Maybe<string>;
-
-  columnWidths?: Maybe<ReadonlyMap<string, number>>;
-  onColumnWidthsChange?: Maybe<(widths: ReadonlyMap<string, number>) => void>;
 }
 
 /**
@@ -261,6 +261,8 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     rowHeight: rawRowHeight,
     headerRowHeight: rawHeaderRowHeight,
     summaryRowHeight: rawSummaryRowHeight,
+    columnWidths,
+    onColumnWidthsChange,
     // Feature props
     selectedRows,
     isRowSelectionDisabled,
@@ -297,10 +299,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     'aria-describedby': ariaDescribedBy,
     'aria-rowcount': rawAriaRowCount,
     'data-testid': testId,
-    'data-cy': dataCy,
-
-    columnWidths,
-    onColumnWidthsChange
+    'data-cy': dataCy
   } = props;
 
   /**
@@ -326,19 +325,29 @@ 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 [resizedColumnWidthsInternal, setResizedColumnWidthsInternal] = useState(
+    (): ReadonlyMap<string, number> => columnWidths?.resized ?? new Map()
   );
   const [measuredColumnWidthsInternal, setMeasuredColumnWidthsInternal] = useState(
-    (): ReadonlyMap<string, number> => columnWidths ?? new Map()
+    (): ReadonlyMap<string, number> => columnWidths?.measured ?? new Map()
   );
   const isColumnWidthsControlled = columnWidths != null && onColumnWidthsChange != null;
   const measuredColumnWidths = isColumnWidthsControlled
-    ? columnWidths
+    ? columnWidths.measured
     : measuredColumnWidthsInternal;
   const setMeasuredColumnWidths = isColumnWidthsControlled
-    ? onColumnWidthsChange
+    ? (measuredColumnWidths: ReadonlyMap<string, number>) => {
+        onColumnWidthsChange({ ...columnWidths, measured: measuredColumnWidths });
+      }
     : setMeasuredColumnWidthsInternal;
+  const resizedColumnWidths = isColumnWidthsControlled
+    ? columnWidths.resized
+    : resizedColumnWidthsInternal;
+  const setResizedColumnWidths = isColumnWidthsControlled
+    ? (resizedColumnWidths: ReadonlyMap<string, number>) => {
+        onColumnWidthsChange({ ...columnWidths, resized: resizedColumnWidths });
+      }
+    : setResizedColumnWidthsInternal;
 
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);

src/hooks/useColumnWidths.ts

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useState } from 'react';
 import { flushSync } from 'react-dom';
 
-import type { CalculatedColumn, ResizedWidth, StateSetter } from '../types';
+import type { CalculatedColumn, ResizedWidth } from '../types';
 import type { DataGridProps } from '../DataGrid';
 
 export function useColumnWidths<R, SR>(
@@ -12,8 +12,8 @@ export function useColumnWidths<R, SR>(
   gridWidth: number,
   resizedColumnWidths: ReadonlyMap<string, number>,
   measuredColumnWidths: ReadonlyMap<string, number>,
-  setResizedColumnWidths: StateSetter<ReadonlyMap<string, number>>,
-  setMeasuredColumnWidths: (columnWidths: ReadonlyMap<string, number>) => void,
+  setResizedColumnWidths: (resizedColumnWidths: ReadonlyMap<string, number>) => void,
+  setMeasuredColumnWidths: (measuredColumnWidths: ReadonlyMap<string, number>) => void,
   onColumnResize: DataGridProps<R, SR>['onColumnResize']
 ) {
   const [columnToAutoResize, setColumnToAutoResize] = useState<{
@@ -77,16 +77,13 @@ export function useColumnWidths<R, SR>(
 
     if (columnToAutoResize !== null) {
       const resizingKey = columnToAutoResize.key;
-      setResizedColumnWidths((resizedColumnWidths) => {
-        const oldWidth = resizedColumnWidths.get(resizingKey);
-        const newWidth = measureColumnWidth(gridRef, resizingKey);
-        if (newWidth !== undefined && oldWidth !== newWidth) {
-          const newResizedColumnWidths = new Map(resizedColumnWidths);
-          newResizedColumnWidths.set(resizingKey, newWidth);
-          return newResizedColumnWidths;
-        }
-        return resizedColumnWidths;
-      });
+      const oldWidth = resizedColumnWidths.get(resizingKey);
+      const newWidth = measureColumnWidth(gridRef, resizingKey);
+      if (newWidth !== undefined && oldWidth !== newWidth) {
+        const newResizedColumnWidths = new Map(resizedColumnWidths);
+        newResizedColumnWidths.set(resizingKey, newWidth);
+        setResizedColumnWidths(newResizedColumnWidths);
+      }
       setColumnToAutoResize(null);
     }
   }

src/types.ts

@@ -329,6 +329,11 @@ export interface Renderers<TRow, TSummaryRow> {
   noRowsFallback?: Maybe<ReactNode>;
 }
 
+export interface ColumnWidths {
+  readonly measured: ReadonlyMap<string, number>;
+  readonly resized: ReadonlyMap<string, number>;
+}
+
 export type Direction = 'ltr' | 'rtl';
 
 export type ResizedWidth = number | 'max-content';

website/routes/CommonFeatures.tsx

@@ -323,9 +323,6 @@ function CommonFeatures() {
   const [isExporting, setIsExporting] = useState(false);
   const gridRef = useRef<DataGridHandle>(null);
   const columns = useMemo(() => getColumns(countries, direction), [direction]);
-  const [columnWidths, setColumnWidths] = useState(
-    (): ReadonlyMap<string, number> => new Map<string, number>()
-  );
 
   const summaryRows = useMemo((): readonly SummaryRow[] => {
     return [
@@ -385,9 +382,6 @@ function CommonFeatures() {
         <button type="button" onClick={handleExportToPdf}>
           Export to PDF
         </button>
-        <button type="button" onClick={() => setColumnWidths(new Map())}>
-          Reset Width
-        </button>
       </div>
       <DataGrid
         ref={gridRef}
@@ -408,8 +402,6 @@ function CommonFeatures() {
         className="fill-grid"
         direction={direction}
         enableVirtualization={!isExporting}
-        columnWidths={columnWidths}
-        onColumnWidthsChange={setColumnWidths}
       />
     </>
   );