When trying to access the newly modified value in a cell using the GridCellParams interface, I am faced with the issue that the 'value' property only provides me with the previous value of the cell. This asynchronous behavior is not ideal for my needs. Utilizing processRowUpdate is also not suitable as it returns the entire row instead of just the specific cell that has been modified.
import * as React from 'react';
import { DataGrid, GridCellParams, GridColDef, GridRowsProp } from '@mui/x-data-grid';
const columns: GridColDef[] = [
{ field: 'id', headerName: 'ID', width: 70, editable: true },
{ field: 'firstName', headerName: 'First Name', width: 150, editable: true },
{ field: 'lastName', headerName: 'Last Name', width: 150, editable: true },
{ field: 'age', headerName: 'Age', type: 'number', width: 90, editable: true },
];
const rows: GridRowsProp = [
{ id: 1, firstName: 'John', lastName: 'Doe', age: 25 },
{ id: 2, firstName: 'Jane', lastName: 'Doe', age: 22 },
{ id: 3, firstName: 'Bob', lastName: 'Smith', age: 30 },
];
const MyDataGrid: React.FC = () => {
const handleKeyDown = (params: GridCellParams, event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === 'Enter') {
//This print the last value, not the new one
console.log('Enter key pressed on row:', params.row, ' value: ', params.value);
}
};
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
onCellKeyDown={(params, event) => handleKeyDown(params, event as React.KeyboardEvent<HTMLDivElement>)}
/>
</div>
);
`your text`; // insert your unique text here
};
export default MyDataGrid;