Add formatterProps.onRowChange

src/Cell.tsx

@@ -19,6 +19,7 @@ function Cell<R, SR>({
   onClick,
   onDoubleClick,
   onContextMenu,
+  onRowChange,
   selectCell,
   selectRow,
   ...props
@@ -56,6 +57,10 @@ function Cell<R, SR>({
     selectCellWrapper(true);
   }
 
+  function handleRowChange(newRow: R) {
+    onRowChange(rowIdx, newRow);
+  }
+
   function onRowSelectionChange(checked: boolean, isShiftClick: boolean) {
     selectRow({ rowIdx, checked, isShiftClick });
   }
@@ -85,6 +90,7 @@ function Cell<R, SR>({
             isCellSelected={isCellSelected}
             isRowSelected={isRowSelected}
             onRowSelectionChange={onRowSelectionChange}
+            onRowChange={handleRowChange}
           />
           {dragHandleProps && (
             <div className="rdg-cell-drag-handle" {...dragHandleProps} />

src/DataGrid.tsx

@@ -236,6 +236,7 @@ function DataGrid<R, SR>({
   const selectRowWrapper = useLatestFunc(selectRow);
   const selectCellWrapper = useLatestFunc(selectCell);
   const toggleGroupWrapper = useLatestFunc(toggleGroup);
+  const handleFormatterRowChangeWrapper = useLatestFunc(handleFormatterRowChange);
 
   /**
    * computed values
@@ -580,7 +581,13 @@ function DataGrid<R, SR>({
     onRowsChange(updatedRows);
   }
 
-  function handleRowChange(row: Readonly<R>, commitChanges?: boolean) {
+  function handleFormatterRowChange(rowIdx: number, row: Readonly<R>) {
+    const newRows = [...rawRows];
+    newRows[rowIdx] = row;
+    onRowsChange?.(newRows);
+  }
+
+  function handleEditorRowChange(row: Readonly<R>, commitChanges?: boolean) {
     if (selectedPosition.mode === 'SELECT') return;
     if (commitChanges) {
       const updatedRows = [...rawRows];
@@ -769,7 +776,7 @@ function DataGrid<R, SR>({
           editorPortalTarget,
           rowHeight,
           row: selectedPosition.row,
-          onRowChange: handleRowChange,
+          onRowChange: handleEditorRowChange,
           onClose: handleOnClose
         }
       };
@@ -845,6 +852,7 @@ function DataGrid<R, SR>({
           draggedOverCellIdx={getDraggedOverCellIdx(rowIdx)}
           setDraggedOverRowIdx={isDragging ? setDraggedOverRowIdx : undefined}
           selectedCellProps={getSelectedCellProps(rowIdx)}
+          onRowChange={handleFormatterRowChangeWrapper}
           selectCell={selectCellWrapper}
           selectRow={selectRowWrapper}
         />

src/Row.tsx

@@ -21,6 +21,7 @@ function Row<R, SR = unknown>({
   setDraggedOverRowIdx,
   onMouseEnter,
   top,
+  onRowChange,
   selectCell,
   selectRow,
   'aria-rowindex': ariaRowIndex,
@@ -81,6 +82,7 @@ function Row<R, SR = unknown>({
             onFocus={isCellSelected ? (selectedCellProps as SelectedCellProps).onFocus : undefined}
             onKeyDown={isCellSelected ? selectedCellProps!.onKeyDown : undefined}
             onRowClick={onRowClick}
+            onRowChange={onRowChange}
             selectCell={selectCell}
             selectRow={selectRow}
           />

src/types.ts

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactElement } from 'react';
 import { SortDirection } from './enums';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 
 export interface Column<TRow, TSummaryRow = unknown> {
   /** The name of the column. By default it will be displayed in the header cell */
-  name: string;
+  name: string | ReactElement;
   /** A unique key to distinguish each column */
   key: string;
   /** Column width. If not specified, it will be determined automatically based on grid width and specified widths of other columns */
@@ -78,6 +79,7 @@ export interface FormatterProps<TRow = any, TSummaryRow = any> {
   isCellSelected: boolean;
   isRowSelected: boolean;
   onRowSelectionChange: (checked: boolean, isShiftClick: boolean) => void;
+  onRowChange: (row: Readonly<TRow>) => void;
 }
 
 export interface SummaryFormatterProps<TSummaryRow, TRow = any> {
@@ -145,6 +147,7 @@ export interface CellRendererProps<TRow, TSummaryRow = unknown> extends Omit<Rea
   isCellSelected: boolean;
   isRowSelected: boolean;
   dragHandleProps?: Pick<React.HTMLAttributes<HTMLDivElement>, 'onMouseDown' | 'onDoubleClick'>;
+  onRowChange: (rowIdx: number, newRow: TRow) => void;
   onRowClick?: (rowIdx: number, row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void;
   selectCell: (position: Position, enableEditor?: boolean) => void;
   selectRow: (selectRowEvent: SelectRowEvent) => void;
@@ -160,6 +163,7 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit<Reac
   isRowSelected: boolean;
   top: number;
   selectedCellProps?: EditCellProps<TRow> | SelectedCellProps;
+  onRowChange: (rowIdx: number, row: TRow) => void;
   onRowClick?: (rowIdx: number, row: TRow, column: CalculatedColumn<TRow, TSummaryRow>) => void;
   rowClass?: (row: TRow) => string | undefined;
   setDraggedOverRowIdx?: (overRowIdx: number) => void;

stories/demos/CommonFeatures.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import faker from 'faker';
-import DataGrid, { SelectColumn, Column, SortDirection, TextEditor } from '../../src';
+import DataGrid, { SelectColumn, Column, SortDirection, TextEditor, SelectCellFormatter } from '../../src';
+import { stopPropagation } from '../../src/utils';
 import { SelectEditor } from './components/Editors/SelectEditor';
 
 const dateFormatter = new Intl.DateTimeFormat(navigator.language);
@@ -157,8 +158,18 @@ function getColumns(countries: string[]): readonly Column<Row, SummaryRow>[] {
       key: 'available',
       name: 'Available',
       width: 80,
-      formatter(props) {
-        return <>{props.row.available ? '✔️' : '❌'}</>;
+      formatter({ row, onRowChange, isCellSelected }) {
+        return (
+          <SelectCellFormatter
+            tabIndex={-1}
+            value={row.available}
+            onChange={() => {
+              onRowChange({ ...row, available: !row.available });
+            }}
+            onClick={stopPropagation}
+            isCellSelected={isCellSelected}
+          />
+        );
       },
       summaryFormatter({ row: { yesCount, totalCount } }) {
         return (