Editable

More info

mbrn/material-table reference : https://material-table.com/#/docs/features/editable

Usage

import MaterialTable from "@material-table/core";

<MaterialTable

// ...

editable={{

onBulkUpdate: (changes) => {

return new Promise((resolve, reject) => {

// Must return a Promise

});

},

onRowAddCancelled: (rowData) => {

return new Promise((resolve, reject) => {

// Must return a Promise

});

},

onRowUpdateCancelled: (rowData) => {

return new Promise((resolve, reject) => {

// Must return a Promise

});

},

onRowAdd: (newData) => {

return new Promise((resolve, reject) => {

// Must return a Promise

});

},

onRowUpdate: (newData, oldData) => {

return new Promise((resolve, reject) => {

// Must return a Promise

});

},

onRowDelete: (oldData) => {

return new Promise((resolve, reject) => {

// Must return a Promise

});

},

}}

// ...

/>;

Live Demo

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function BasicEditPanelDemo() { const [data, setData] = useState(EDITABLE_DATA); // Helper function function getNewDataBulkEdit(changes, copyData) { // key matches the column data id const keys = Object.keys(changes); for (let i = 0; i < keys.length; i++) { if (changes[keys[i]] && changes[keys[i]].newData) { // Find the data item with the same key in copyData[] let targetData = copyData.find((el) => el.id === keys[i]); if (targetData) { let newTargetDataIndex = copyData.indexOf(targetData); copyData[newTargetDataIndex] = changes[keys[i]].newData; } } } return copyData; } return ( <MaterialTable data={data} columns={EDITABLE_COLUMNS} editable={{ onBulkUpdate: (changes) => { return new Promise((resolve, reject) => { setTimeout(() => { let copyData = [...data]; setData(getNewDataBulkEdit(changes, copyData)); resolve(); }, 1000); }); }, onRowAddCancelled: (rowData) => console.log("Row adding cancelled"), onRowUpdateCancelled: (rowData) => console.log("Row editing cancelled"), onRowAdd: (newData) => { return new Promise((resolve, reject) => { setTimeout(() => { newData.id = "uuid-" + Math.random() * 10000000; setData([...data, newData]); resolve(); }, 1000); }); }, onRowUpdate: (newData, oldData) => { return new Promise((resolve, reject) => { setTimeout(() => { const dataUpdate = [...data]; // In dataUpdate, find target const target = dataUpdate.find((el) => el.id === oldData.id); const index = dataUpdate.indexOf(target); dataUpdate[index] = newData; setData(dataUpdate); resolve(); }, 1000); }); }, onRowDelete: (oldData) => { return new Promise((resolve, reject) => { setTimeout(() => { const dataDelete = data.filter((el) => el.id !== oldData.id); setData(dataDelete); resolve(); }, 1000); }); }, }} /> ); }

function BasicEditPanelDemo() {
  const [data, setData] = useState(EDITABLE_DATA);

  // Helper function
  function getNewDataBulkEdit(changes, copyData) {
    // key matches the column data id
    const keys = Object.keys(changes);
    for (let i = 0; i < keys.length; i++) {
      if (changes[keys[i]] && changes[keys[i]].newData) {
        // Find the data item with the same key in copyData[]
        let targetData = copyData.find((el) => el.id === keys[i]);
        if (targetData) {
          let newTargetDataIndex = copyData.indexOf(targetData);
          copyData[newTargetDataIndex] = changes[keys[i]].newData;
        }
      }
    }
    return copyData;
  }

  return (
    <MaterialTable
      data={data}
      columns={EDITABLE_COLUMNS}
      editable={{
        onBulkUpdate: (changes) => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              let copyData = [...data];
              setData(getNewDataBulkEdit(changes, copyData));
              resolve();
            }, 1000);
          });
        },
        onRowAddCancelled: (rowData) => console.log("Row adding cancelled"),
        onRowUpdateCancelled: (rowData) => console.log("Row editing cancelled"),
        onRowAdd: (newData) => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              newData.id = "uuid-" + Math.random() * 10000000;
              setData([...data, newData]);
              resolve();
            }, 1000);
          });
        },
        onRowUpdate: (newData, oldData) => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataUpdate = [...data];
              // In dataUpdate, find target
              const target = dataUpdate.find((el) => el.id === oldData.id);
              const index = dataUpdate.indexOf(target);
              dataUpdate[index] = newData;
              setData(dataUpdate);
              resolve();
            }, 1000);
          });
        },
        onRowDelete: (oldData) => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataDelete = data.filter((el) => el.id !== oldData.id);
              setData(dataDelete);
              resolve();
            }, 1000);
          });
        },
      }}
    />
  );
}

Result