MUI DataGrid onCellEditStop returns old value

Question

I am trying to use an editing API from "@mui/x-data-grid" and simply have editing on the cell and retrieve the new value.

When I use

onCellEditStop={(params: GridCellEditStopParams, event: MuiEvent) => {
  console.log(params);
  if (params.reason === GridCellEditStopReasons.cellFocusOut) {
    event.defaultMuiPrevented = true;
  }
}}

Console log prints out the old parameters which include the old value of the cell instead of the new one to which it was changed.

How do I retrieve a new value after editing the cell?

Answer 1

The callback that you need is onCellEditCommit:

onCellEditCommit={(params: GridCellEditCommitParams, event: MuiEvent) => {
  console.log(params);
  if (params.reason === GridCellEditStopReasons.cellFocusOut) {
    event.defaultMuiPrevented = true;
  }
}}

Demo: https://codesandbox.io/s/datagriddemo-material-demo-forked-i9iz3f?file=/demo.tsx:1661-1677

The property that will have the new value is value, formatted value will show the previous value if available.