Untitled

  export const Example = () => {

    const [rows, setRows] = useState([    
         { id: "1", name: 'John', age: 28 },
         { id: "2", name: 'Danny', age: 22 },
         { id: "3", name: 'Mick', age: 33 },
        ]);
        
      const columns: GridColDef[] = [
        { field: 'id', headerName: 'Id', width: 150 },
        { field: 'name', headerName: 'Name', width: 150, editable: true,},
        { field: 'age', headerName: 'Age', width: 150 },
               
      ];
    
      const onStopEdit = (params: GridCellEditStopParams, event: MuiEvent) => {
        console.log('onStopEdit params', params)
        console.log('onStopEdit event', event)

        //how to get the edited value here??? 
      }

      const onStarEdit = () => {
        console.log('onStarEdit')        
      }
    
    return (
        <div style={{ height: 300, width: '100%' }}>         
          <DataGrid rows={rows} columns={columns} onCellEditStart={onStarEdit} onCellEditStop={onStopEdit}/>
        </div>
      );
  }