Add onColumnResizeEnd props

README.md

@@ -189,6 +189,8 @@ A number defining the height of summary rows.
 
 ###### `onColumnResize?: Maybe<(idx: number, width: number) => void>`
 
+###### `onColumnResizeEnd?: Maybe<(idx: number, width: number) => void>`
+
 ###### `cellNavigationMode?: Maybe<CellNavigationMode>`
 
 ###### `enableVirtualization?: Maybe<boolean>`

src/DataGrid.tsx

@@ -144,6 +144,8 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
   onScroll?: Maybe<(event: React.UIEvent<HTMLDivElement>) => void>;
   /** Called when a column is resized */
   onColumnResize?: Maybe<(idx: number, width: number) => void>;
+  /** Called when a column resizing is ended */
+  onColumnResizeEnd?: Maybe<(idx: number, width: number) => void>;
 
   /**
    * Toggles and modes
@@ -196,6 +198,7 @@ function DataGrid<R, SR, K extends Key>(
     onRowDoubleClick,
     onScroll,
     onColumnResize,
+    onColumnResizeEnd,
     onFill,
     onPaste,
     // Toggles and modes
@@ -388,20 +391,31 @@ function DataGrid<R, SR, K extends Key>(
     selectCell
   }));
 
+  const handleColumnWidh = useCallback((column: CalculatedColumn<R, SR>, width: number) => {
+    setColumnWidths((columnWidths) => {
+      const newColumnWidths = new Map(columnWidths);
+      newColumnWidths.set(column.key, width);
+      return newColumnWidths;
+    });
+  }, []);
+
   /**
    * callbacks
    */
   const handleColumnResize = useCallback(
     (column: CalculatedColumn<R, SR>, width: number) => {
-      setColumnWidths((columnWidths) => {
-        const newColumnWidths = new Map(columnWidths);
-        newColumnWidths.set(column.key, width);
-        return newColumnWidths;
-      });
-
+      handleColumnWidh(column, width);
       onColumnResize?.(column.idx, width);
     },
-    [onColumnResize]
+    [onColumnResize, handleColumnWidh]
+  );
+
+  const handleColumnResizeEnd = useCallback(
+    (column: CalculatedColumn<R, SR>, width: number) => {
+      handleColumnWidh(column, width);
+      onColumnResizeEnd?.(column.idx, width);
+    },
+    [onColumnResizeEnd, handleColumnWidh]
   );
 
   const setDraggedOverRowIdx = useCallback((rowIdx?: number) => {
@@ -1055,6 +1069,7 @@ function DataGrid<R, SR, K extends Key>(
       <HeaderRow
         columns={viewportColumns}
         onColumnResize={handleColumnResize}
+        onColumnResizeEnd={handleColumnResizeEnd}
         allRowsSelected={allRowsSelected}
         onAllRowsSelectionChange={selectAllRowsLatest}
         sortColumns={sortColumns}

src/HeaderCell.tsx

@@ -30,6 +30,7 @@ type SharedHeaderRowProps<R, SR> = Pick<
   | 'onAllRowsSelectionChange'
   | 'selectCell'
   | 'onColumnResize'
+  | 'onColumnResizeEnd'
   | 'shouldFocusGrid'
 >;
 
@@ -44,6 +45,7 @@ export default function HeaderCell<R, SR>({
   colSpan,
   isCellSelected,
   onColumnResize,
+  onColumnResizeEnd,
   allRowsSelected,
   onAllRowsSelectionChange,
   sortColumns,
@@ -85,7 +87,12 @@ export default function HeaderCell<R, SR>({
       }
     }
 
-    function onLostPointerCapture() {
+    function onLostPointerCapture(event: PointerEvent) {
+      const width = event.clientX + offset - currentTarget.getBoundingClientRect().left;
+      if (width > 0) {
+        onColumnResizeEnd(column, width);
+      }
+
       currentTarget.removeEventListener('pointermove', onPointerMove);
       currentTarget.removeEventListener('lostpointercapture', onLostPointerCapture);
     }

src/HeaderRow.tsx

@@ -18,6 +18,7 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   allRowsSelected: boolean;
   onAllRowsSelectionChange: (checked: boolean) => void;
   onColumnResize: (column: CalculatedColumn<R, SR>, width: number) => void;
+  onColumnResizeEnd: (column: CalculatedColumn<R, SR>, width: number) => void;
   selectCell: (columnIdx: number) => void;
   lastFrozenColumnIndex: number;
   selectedCellIdx: number | undefined;
@@ -52,6 +53,7 @@ function HeaderRow<R, SR, K extends React.Key>({
   allRowsSelected,
   onAllRowsSelectionChange,
   onColumnResize,
+  onColumnResizeEnd,
   sortColumns,
   onSortColumnsChange,
   lastFrozenColumnIndex,
@@ -76,6 +78,7 @@ function HeaderRow<R, SR, K extends React.Key>({
         colSpan={colSpan}
         isCellSelected={selectedCellIdx === column.idx}
         onColumnResize={onColumnResize}
+        onColumnResizeEnd={onColumnResizeEnd}
         allRowsSelected={allRowsSelected}
         onAllRowsSelectionChange={onAllRowsSelectionChange}
         onSortColumnsChange={onSortColumnsChange}