React Material Table: edit all rows at once

Question

I have been using https://material-table.com/#/. It works nicely, but for tables where lots of edits are required, it is rather cumbersome to use the row-by-row edit functionality.

What I would like, would be a table-level action that turns the entire table into "edit mode", and a general submit action / cancel action.

This question links to Material-table editable: Making all rows editable at once but no satisfactory answer has been provided. I am hoping for better luck.

I do not really know where to start with this, so any help is welcome.

You can submit a feature request to the collaborators here https://github.com/mbrn/material-table/issues — 95faf8e76605e973, Jul 22 '20 at 10:15

score 1 · Accepted Answer · answered Oct 24 '20 at 12:43

1

Material-table has a bulk update feature that you can use. Below is a sample code from their websites

<MaterialTable
  editable={{
    onBulkUpdate: (changes) =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          // write your logic here
          /* setData([...data, newData]); */
          resolve();
        }, 1000);
      }),
  }}
/>;

answered Oct 24 '20 at 12:43

Morlo Mbakop

3,518
20
21

I found out later on (or maybe it was added in the mean time, it's quite recent, 1.68.0). But I had to revert to an older version because the latest versions cause various blocking problems – Cedric Druck Oct 26 '20 at 13:56

score 0 · Answer 2 · answered Jul 22 '20 at 10:20

The EditRow functionality given in Material-Table is based on the rowData and not on Table data, similarly yo can override the EditRow, but it limits to rowData and not Table data. As far as I know, material-table doesn't support this feature yet. I suggest you to raise a issue/feature request in their repo.

However, a possible workaround I can think of is, if the editing column (field) is only one for which you need to edit across the table, then you can override EditRow and provide your own editRow function, in which you need to pass the tableData along with rowData, and onChange you can update the required property for all rows in the tableData.

React Material Table: edit all rows at once

2 Answers2