title: material-table Make Row Editable on Click
body: <p>Using the <a href="https://material-table.com/" rel="nofollow noreferrer">material-table</a> 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.</p>
  
  <p><a href="https://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203" rel="nofollow noreferrer">https://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203</a></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import MaterialTable, { MTableBodyRow } from "material-table";
  
  export default function App() {
    return (
      &lt;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" }
          }
        ]}
        components={{
          Row: props =&gt; (
            &lt;MTableBodyRow
              {...props}
              onDoubleClick={() =&gt; {
                alert("Make row editable");
              }}
            /&gt;
          )
        }}
        editable={{
          onRowAdd: newData =&gt;
            new Promise((resolve, reject) =&gt; {
              resolve();
            }),
          onRowUpdate: (newData, oldData) =&gt;
            new Promise((resolve, reject) =&gt; {
              resolve();
            }),
          onRowDelete: oldData =&gt;
            new Promise((resolve, reject) =&gt; {
              resolve();
            })
        }}
        data={[
          { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
        ]}
        title="Demo Title"
      /&gt;
    );
  }
  </code></pre>