Material UI Data Grid: Unexpected behavior from onCellEditCommit

Viewed 795

I'm trying to use Material UI Data Grid (https://mui.com/components/data-grid/) to display and edit tabular data in a Next/TypeScript project. Specifically, what I want to do is to call a callback function every time a cell is edited. The callback function should take the row data, parse it a bit and then send a PUT request to an API (to save the update in the backend). Writing the callback shouldn't be a problem, but I can't figure out how to extract the data from Data Grid properly.

I'm using "onCellEditCommit={myCallBack}" to catch changes to the table. This triggers as expected and the first parameter sent to this function sometimes has the data I want. However, according to it's type definition it shouldn't have this, so TS gets upset when I try to use it.

The documentation says this:

Callback fired when the cell changes are committed.

Signature:
function(
 params: GridCellEditCommitParams, 
 event: MuiEvent<React.SyntheticEvent>, 
 details: GridCallbackDetails
) => void

 params: With all properties from GridCellEditCommitParams.
 event: The event that caused this prop to be called.
 details: Additional details for this callback.> 

The type definition for GridCellEditCommitParams is this:

interface GridCellEditCommitParams {
    id: GridRowId;
    field: string;
    value: GridCellValue;
}

Here's a minimal example demonstrating the odd behavior: https://codesandbox.io/s/datagriddemo-material-demo-forked-9cs49

I've set it up so that the data from the params variable gets printed at the top of the screen.

Steps to reproduce:

  1. Double-click a cell and change the value, then press "enter" to exit "edit mode". This should print just three lines (id, field and value).
  2. Double-click a cell and change the value, then click outside the table to exit "edit mode". This prints a far more complex object with many fields.

I have two issues here:

  1. I want the same behavior in both cases. I don't know if this is a bug or if I'm using the wrong method here (the documentation is poor).
  2. I want to access the "row" field in params, which according to TS doesn't exist.

All I really want is to pass the values from a changed row to a callback function whenever a cell is changed, is there a better way?

0 Answers
Related