Enable editing upon row click

__tests__/demo/demo-components/index.js

@@ -290,29 +290,48 @@ export function BulkEditWithDetailPanel() {
 }
 
 export function EditableRow(props) {
-  const [isEditing, setIsEditing] = useState(false);
+  const [canEdit, setCanEdit] = useState(true);
+  const [clickRowToEdit, setClickRowToEdit] = useState(false);
 
   return (
     <div>
-      <p>I am the parent</p>
-      <button onClick={(e) => setIsEditing(!isEditing)}>
-        {isEditing ? 'Disable' : 'Enable'} Editing
-      </button>
+      <fieldset>
+        <div>
+          <input
+            type="checkbox"
+            id="rowEditing"
+            name="rowEditing"
+            checked={clickRowToEdit}
+            onChange={(event) => setClickRowToEdit(event.target.checked)}
+          />
+          <label htmlFor="rowEditing">Click row to edit</label>
+        </div>
+        <div>
+          <input
+            type="checkbox"
+            id="canEdit"
+            name="canEdit"
+            checked={canEdit}
+            onChange={(event) => setCanEdit(event.target.checked)}
+          />
+          <label htmlFor="canEdit">Enable editing</label>
+        </div>
+      </fieldset>
+
       <MaterialTable
-        components={{
-          Row: (props) => {
-            if (isEditing) {
-              return <MTableEditRow {...props} mode={'update'} />;
-            } else {
-              return <MTableBodyRow {...props} />;
-            }
-          }
-        }}
+        key={`table_${canEdit}`}
+        onRowClick={
+          clickRowToEdit
+            ? (_event, _data, actions) => actions.enableEditMode()
+            : undefined
+        }
         editable={{
-          onRowUpdate: (newData, oldData) => {
-            console.log({ newData, oldData });
-            return new Promise((reject, resolve) => resolve());
-          }
+          onRowUpdate: canEdit
+            ? (newData, oldData) => {
+                console.log({ newData, oldData });
+                return new Promise((reject, resolve) => resolve());
+              }
+            : undefined
         }}
         data={[
           { name: 'jack', id: 1 },

__tests__/detailPanel.test.js

@@ -69,7 +69,7 @@ describe('Detailpanel render', () => {
     screen.getByRole('cell', {
       name: /one/i
     });
-    const toggleButton = screen.getByRole('button', {
+    const toggleButton = await screen.findByRole('button', {
       name: /detail panel visibility toggle/i
     });
 

__tests__/editRow.test.js

@@ -259,6 +259,32 @@ describe('Edit Row Row Update', () => {
     expect(onRowUpdateCancelled.mock.calls.length).toBe(1);
   });
 
+  test('clicking a row to start the edit mode', () => {
+    const onRowUpdate = jest.fn();
+    const onRowUpdateCancelled = jest.fn();
+    render(
+      <MaterialTable
+        data={data}
+        columns={columns}
+        onRowClick={(event, data, actions) => actions.enableEditMode()}
+        editable={{
+          onRowUpdate,
+          onRowUpdateCancelled
+        }}
+      />
+    );
+    fireEvent.click(screen.getByText(data[0].id.toString()));
+
+    screen.getByTestId('check');
+    const cancelButton = screen.getByRole('button', {
+      name: /cancel/i
+    });
+    fireEvent.click(cancelButton);
+
+    expect(onRowUpdate.mock.calls.length).toBe(0);
+    expect(onRowUpdateCancelled.mock.calls.length).toBe(1);
+  });
+
   test('edit a row', async () => {
     const onRowUpdate = jest.fn(async () => {});
     render(

src/components/MTableBodyRow/index.js

@@ -27,6 +27,7 @@ function MTableBodyRow({ forwardedRef, ...props }) {
     getFieldValue,
     isTreeData,
     onRowSelected,
+    onRowEditStarted,
     onTreeExpandChanged,
     onToggleDetailPanel,
     onEditingCanceled,
@@ -49,16 +50,19 @@ function MTableBodyRow({ forwardedRef, ...props }) {
   const columns = propColumns.filter((columnDef) => !columnDef.hidden);
 
   const onClick = (event, callback) =>
-    callback(event, data, (panelIndex) => {
-      let panel = detailPanel;
-      if (Array.isArray(panel)) {
-        panel = panel[panelIndex || 0];
-        if (typeof panel === 'function') {
-          panel = panel(data);
+    callback(event, data, {
+      toggleDetailPanel: (panelIndex) => {
+        let panel = detailPanel;
+        if (Array.isArray(panel)) {
+          panel = panel[panelIndex || 0];
+          if (typeof panel === 'function') {
+            panel = panel(data);
+          }
+          panel = panel.render;
         }
-        panel = panel.render;
-      }
-      onToggleDetailPanel(path, panel);
+        onToggleDetailPanel(path, panel);
+      },
+      enableEditMode: () => onRowEditStarted(data)
     });
 
   const handleOnRowClick = useDoubleClick(

src/components/m-table-body.js

@@ -123,6 +123,7 @@ function MTableBody(props) {
             cellEditable={props.cellEditable}
             onCellEditStarted={props.onCellEditStarted}
             onCellEditFinished={props.onCellEditFinished}
+            onRowEditStarted={props.onRowEditStarted}
             scrollWidth={props.scrollWidth}
           />
         );

src/material-table.js

@@ -338,11 +338,7 @@ export default class MaterialTable extends React.Component {
             calculatedProps.editable.isEditHidden &&
             calculatedProps.editable.isEditHidden(rowData),
           onClick: (e, rowData) => {
-            this.dataManager.changeRowEditing(rowData, 'update');
-            this.setState({
-              ...this.dataManager.getRenderState(),
-              showAddRow: false
-            });
+            this.onRowEditStarted(rowData);
           }
         }));
       }
@@ -1046,6 +1042,7 @@ export default class MaterialTable extends React.Component {
         cellEditable={props.cellEditable}
         onCellEditStarted={this.onCellEditStarted}
         onCellEditFinished={this.onCellEditFinished}
+        onRowEditStarted={this.onRowEditStarted}
         bulkEditOpen={this.dataManager.bulkEditOpen}
         bulkEditChangedRows={this.dataManager.bulkEditChangedRows}
         onBulkEditRowChanged={this.dataManager.onBulkEditRowChanged}
@@ -1054,6 +1051,17 @@ export default class MaterialTable extends React.Component {
     </Table>
   );
 
+  onRowEditStarted = (rowData) => {
+    if (!this.props.editable?.onRowUpdate) {
+      return;
+    }
+    this.dataManager.changeRowEditing(rowData, 'update');
+    this.setState({
+      ...this.dataManager.getRenderState(),
+      showAddRow: false
+    });
+  };
+
   getColumnsWidth = (props, count) => {
     const result = [];
 

types/index.d.ts

@@ -79,7 +79,7 @@ export interface MaterialTableProps<RowData extends object> {
   onRowClick?: (
     event?: React.MouseEvent,
     rowData?: RowData,
-    toggleDetailPanel?: (panelIndex?: number) => void
+    action?: RowAction
   ) => void;
   onRowDoubleClick?: (
     event?: React.MouseEvent,
@@ -117,6 +117,11 @@ export interface MaterialTableProps<RowData extends object> {
   totalCount?: number;
 }
 
+export interface RowAction {
+  toggleDetailPanel: (panelIndex?: number) => void;
+  enableEditMode: () => void;
+}
+
 export interface Filter<RowData extends object> {
   column: Column<RowData>;
   operator: '=';