import { CellValueChangedEvent , ColDef , GridOptions , ValueGetterParams , ValueSetterParams } from '@ag-grid-community/core' ; const columnDefs = [ { headerName : 'Name' , valueGetter : function ( params ) { return params . data . firstName + ' ' + params . data . lastName ; } , valueSetter : function ( params ) { var fullName = params . newValue ; var nameSplit = fullName . split ( ' ' ) ; var newFirstName = nameSplit [ 0 ] ; var newLastName = nameSplit [ 1 ] ; var data = params . data ; if ( data . firstName !== newFirstName || data . lastName !== newLastName ) { data . firstName = newFirstName ; data . lastName = newLastName ; return true ; } else { return false ; } } , } , { headerName : 'A' , field : 'a' , } , { headerName : 'B' , valueGetter : function ( params ) { return params . data . b ; } , valueSetter : function ( params ) { var newValInt = parseInt ( params . newValue ) ; var valueChanged = params . data . b !== newValInt ; if ( valueChanged ) { params . data . b = newValInt ; } return valueChanged ; } , } , { headerName : 'C.X' , valueGetter : function ( params ) { if ( params . data . c ) { return params . data . c . x ; } else { return undefined ; } } , valueSetter : function ( params ) { if ( ! params . data . c ) { params . data . c = { } ; } params . data . c . x = params . newValue ; return true ; } , } , { headerName : 'C.Y' , valueGetter : function ( params ) { if ( params . data . c ) { return params . data . c . y ; } else { return undefined ; } } , valueSetter : function ( params ) { if ( ! params . data . c ) { params . data . c = { } ; } params . data . c . y = params . newValue ; return true ; } , } , ] ; const gridOptions = { defaultColDef : { flex : 1 , resizable : true , editable : true , } , columnDefs : columnDefs , rowData : getData ( ) , onCellValueChanged : onCellValueChanged , } ; function onCellValueChanged ( event ) { console . log ( 'Data after change is' , event . data ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;