Using the material-table library, I am trying to make table rows editable on double click. Clicking the row should have the same effect as clicking the edit button on the leftmost side in the actions column. I have successfully linked into the correct event handler, denoted by the alert box when double clicking a row now.

=/src/App.js:0-1203

import React from "react";
import MaterialTable, { MTableBodyRow } from "material-table";

export default function App() {
  return (
    <MaterialTable
      columns={[
        { title: "Adı", field: "name" },
        { title: "Soyadı", field: "surname" },
        { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
        {
          title: "Doğum Yeri",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
        }
      ]}
      ponents={{
        Row: props => (
          <MTableBodyRow
            {...props}
            onDoubleClick={() => {
              alert("Make row editable");
            }}
          />
        )
      }}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            resolve();
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            resolve();
          }),
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            resolve();
          })
      }}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
      ]}
      title="Demo Title"
    />
  );
}

Using the material-table library, I am trying to make table rows editable on double click. Clicking the row should have the same effect as clicking the edit button on the leftmost side in the actions column. I have successfully linked into the correct event handler, denoted by the alert box when double clicking a row now.

https://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203

import React from "react";
import MaterialTable, { MTableBodyRow } from "material-table";

export default function App() {
  return (
    <MaterialTable
      columns={[
        { title: "Adı", field: "name" },
        { title: "Soyadı", field: "surname" },
        { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
        {
          title: "Doğum Yeri",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
        }
      ]}
      ponents={{
        Row: props => (
          <MTableBodyRow
            {...props}
            onDoubleClick={() => {
              alert("Make row editable");
            }}
          />
        )
      }}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            resolve();
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            resolve();
          }),
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            resolve();
          })
      }}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
      ]}
      title="Demo Title"
    />
  );
}

• javascript
• reactjs
• material-ui
• material-table

1 Answer 1

This is a pure hack, there is no such event that you can trigger,

So I just dig deep into the core object to find the event triggers, and I found it inside props.actions

props.actions contains the array of actions, such add, edit, delete, so by taking the ref of it you can trigger any event from it.

Here is the code snippet for it, have a look :

<MTableBodyRow
    {...props}
    onDoubleClick={(e) => {
        console.log(props.actions) // <---- HERE : Get all the actions
        props.actions[1]().onClick(e,props.data); // <---- trigger edit event
        alert("Make row editable");
    }}
/>

WORKING DEMO :