title: material-table: how to edit, add and delete multiple rows in one bulk action?
body: <p>According to material-table's <a href="https://material-table.com/#/docs/features/editable" rel="nofollow noreferrer">docs</a>, multiple rows can be edited in bulk and then saved or cancelled to apply or revert the changes. How to also include add and delete actions during bulk editing as well, so that in one bulk action multiple rows can be edited, created or deleted?</p>
  <p>What I've tried so far, I can only add and delete one row at a time:</p>
  <pre><code>const initialData = [
    {
      name: &quot;Alberta&quot;,
      surname: &quot;Abbott&quot;,
      birthYear: 1984,
      birthCity: 63,
    },
    {
      name: &quot;Laura&quot;,
      surname: &quot;Reynolds&quot;,
      birthYear: 1988,
      birthCity: 34,
    },
    {
      name: &quot;Susie&quot;,
      surname: &quot;Hayes&quot;,
      birthYear: 1993,
      birthCity: 34,
    },
  ];
  
  const Table = () =&gt; {
    const [data, setData] = useState(initialData);
  
    const handleBulkUpdate = async (changes) =&gt; {
      setData((data) =&gt; {
        const newData = [...data];
        Object.entries(changes).forEach(([pos, change]) =&gt;
          newData.splice(parseInt(pos), 1, change.newData)
        );
        return newData;
      });
    };
  
    const handleAdd = async (newData) =&gt; {
      setData((data) =&gt; [...data, newData]);
    };
  
    const handleDelete = async (deletedData) =&gt; {
      setData((data) =&gt; {
        const newData = [...data];
        newData.splice(deletedData.tableData.id, 1);
        return newData;
      });
    };
  
    return (
      &lt;MaterialTable
        columns={[
          { title: &quot;Name&quot;, field: &quot;name&quot; },
          { title: &quot;Surname&quot;, field: &quot;surname&quot; },
          { title: &quot;Birth Year&quot;, field: &quot;birthYear&quot;, type: &quot;numeric&quot; },
          {
            title: &quot;Birth City&quot;,
            field: &quot;birthCity&quot;,
            lookup: { 34: &quot;İstanbul&quot;, 63: &quot;Şanlıurfa&quot; },
          },
        ]}
        data={data}
        editable={{
          onBulkUpdate: handleBulkUpdate,
          onRowAdd: handleAdd,
          onRowDelete: handleDelete,
        }}
      /&gt;
    );
  };
  </code></pre>