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);
          });
        },
      }}
    />
  );
}

Result

Loading...