// Method for deleting orders in batches.
  function DeleteBulkOrders(selectedRows){
    const selectedIDs = new Set(selectedRows);
    const selectedRowUpdate = data.filter((row) =>
    selectedIDs.has(row.id),
  )
    console.log(selectedRowUpdate)
    var deletedData = data.filter(function(id){
      return !selectedRowUpdate.includes(id);
    });
    setData(deletedData);
    handleClose();
  }

I have something along the lines of this for the MUI datagrid pro. Essentially when I selected a row via onSelected it spits me back out the ID of the selected items in an array. I then parse and filter that array of IDs in the original Data and set the new data.

This works, unfortunately, I believe the data that I'm using is failing to update upon cell change / edit. It still shows the old values and doesn't reflect the edited ones. This is all good for the delete batches method since I'm deleting them anyways, however it doesn't work so well for the submit all which needs to reflect the edited sells to send the payload to the API for storing.

  // Deletes individual items within the row, not selected / bulk item delete.
  function DeleteIndividualItem(params){
    console.log(params);
    const newArray = data
    .filter(function(row) {
      return row.id !== params.id;
    });
    setData(newArray);
  }

I also have individual delete, which actually sends in the params and accurately reflects the changes made to the cell and still deletes it.

I'm guessing that this has to do with State, and how I'm not updating my data state upon change. It took my awhile, but I found this built in method apiRef.current.getSelectedRows() ^This actually spits out the mapped array with the updated fields, I'm trying to see if there is a build in method within the MUI datatable that updates the rows by passing in apiRef.current.getSelectedRows().

I thought about destructing the map and then using setData(api.Ref.current.getSelectedRows()) etc. However, I feel like there should be a cleaner way of doing this.

var [data, setData] = useState(apiDataArray);

// Rows is the data array that is populated and fed back into the table.
var apiDataArray = [...Array(25)].map((_, index) => ({
  id: mockData.id(index),
  client: mockData.name.fullName(index),
  email: mockData.email(index),
  lastLogin: mockData.time(index),
  performance: mockData.number.percent(index),
  status: sample(['Accepted', 'Pending', 'Declined']),
}));