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:
- 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).
- 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:
- 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).
- 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?