material-table این قابلیت را فراهم کرده که سطرهای یک جدول را حذف ویرایش و یا سطر جدید اضافه کنیم.برای اینکار باید در تگ MaterialTable ویژگی editable را اضافه کنیم که در  آن اعمال حذف و ویرایش و اضافه را قرار می دهیم.

function Editable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Lastname', field: 'lastname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    
  ]);

  const [data, setData] = useState([
    { name: 'Sara', lastname: 'Jam', birthYear: 1987 },
    { name: 'Soha', lastname: 'Rad', birthYear: 2017},
  ]);

  return (
    <MaterialTable
      title="Names"
      columns={columns}
      data={data}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              setData([...data, newData]);
              
              resolve();
            }, 1000)
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataUpdate = [...data];
              const index = oldData.tableData.id;
              dataUpdate[index] = newData;
              setData([...dataUpdate]);

              resolve();
            }, 1000)
          }),
        onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              const dataDelete = [...data];
              const index = oldData.tableData.id;
              dataDelete.splice(index, 1);
              setData([...dataDelete]);
              
              resolve()
            }, 1000)
          }),
      }}
    />
  )
}

درصورتیکه بخواهیم یک ستون یکی از قابلیتها و یا در کل قابلیت ویرایش نداشته باشد باید در  هنگام تعریف آن ستون  آن را قید کنیم

{ title: 'Name', field: 'name', editable: 'onUpdate' },
    { title: 'LastName', field: 'lastName', editable: 'never' },

درصورتیکه نخواهیم دکمه حذف و اضافه داشته باشیم بلکه  با کلیک بر روی هر ستون بتوانیم آن را تغییر دهیم می توانیم از ویژگی cellEditable  و متد onCellEditApproved  استفاده کنیم.

function CellEditable() {
  const { useState } = React;

  const [columns, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'lastname', field: 'lastname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
   
  ]);

  const [data, setData] = useState([
    { name: 'Sara', surname: 'Baran', birthYear: 1987},
    { name: 'Sam', surname: 'Baran', birthYear: 2017 },
  ]);

  return (
    <MaterialTable
      title="Cell Editable Preview"
      columns={columns}
      data={data}
      cellEditable={{
        onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
          return new Promise((resolve, reject) => {
            setTimeout(resolve, 1000);
          });
        }
      }}
    />
  )
}