title: reactjs add new row to material-table editable
body: <p>I want to add a new row with editable-table. I need buttons like Save and Cancel when adding a new line. I want to add a new line with the + button on the Toolbar.</p>
  
  <p>that is, when the add button is pressed. new row will be added on the table. I want the Save and Cancel buttons for the new line.</p>
  
  <p><a href="https://i.stack.imgur.com/BLkdI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BLkdI.png" alt="enter image description here"></a></p>
  
  <p>I want to add and save a new record with the + button on the top right. how can I do that ?</p>
  
  <p><a href="https://codesandbox.io/s/gifted-nash-2s5ff" rel="nofollow noreferrer">https://codesandbox.io/s/gifted-nash-2s5ff</a></p>
  
  <p>`</p>
  
  <pre><code> &lt;MaterialTable
    actions={[
      rowData =&gt; ({
        icon: Edit,
        tooltip: "Edit",
        onClick: (event, rowData) =&gt; {
          isRowUpdating(rowData, true);
        }
      }),
      rowData =&gt; ({
        icon: DeleteOutline,
        tooltip: "Delete",
        onClick: (event, row) =&gt; {
          this.bountyModalDeleteForm();
        }
      }),
  
  
      {
        icon: Add,
        onClick: (event, rowData) =&gt; {
          console.log('New record !');
        },
        isFreeAction: true,
        tooltip: 'New record',
      }
    ]}
  
    components={{
      EditRow: props =&gt; {
        const newRowData = {
          ...props.data,
          id:  props.data.id,
          user: props.data.user,
        };
  
        return (
          &lt;MTableEditRow
            {...props}
            data={newRowData}
            onEditingCanceled={(mode, rowData) =&gt; {
              isRowUpdating(rowData, false);
            }}
            onEditingApproved={(mode, newData, oldRowData) =&gt; {
              isRowUpdating(props.data, false);
              this.handleSubmitUpdate(newData);
            }}
          /&gt;
        );
      },
  
      Toolbar: props =&gt; (
        &lt;div style={{background: "blue"}}&gt;
          &lt;StyledMTableToolbar {...props} /&gt;
        &lt;/div&gt;
      ),
  </code></pre>
  
  <p>`</p>