import { ColDef , GridOptions , ValueFormatterParams , ValueGetterParams } from '@ag-grid-community/core' ; var callCount = 1 ; var totalValueGetter = function ( params ) { var q1 = params . getValue ( 'q1' ) ; var q2 = params . getValue ( 'q2' ) ; var q3 = params . getValue ( 'q3' ) ; var q4 = params . getValue ( 'q4' ) ; var result = q1 + q2 + q3 + q4 ; console . log ( `Total Value Getter (${ callCount }, ${ params . column . getId ( ) }): ${ [ q1 , q2 , q3 , q4 ] . join ( ', ' ) } = ${ result }` ) ; callCount ++ ; return result ; } ; var total10ValueGetter = function ( params ) { var total = params . getValue ( 'total' ) ; return total * 10 ; } ; const columnDefs = [ { field : 'q1' , type : 'quarterFigure' } , { field : 'q2' , type : 'quarterFigure' } , { field : 'q3' , type : 'quarterFigure' } , { field : 'q4' , type : 'quarterFigure' } , { field : 'year' , rowGroup : true , hide : true } , { headerName : 'Total' , colId : 'total' , cellClass : 'number-cell total-col' , aggFunc : 'sum' , valueFormatter : formatNumber , valueGetter : totalValueGetter , } , { headerName : 'Total x 10' , cellClass : 'number-cell total-col' , aggFunc : 'sum' , minWidth : 120 , valueFormatter : formatNumber , valueGetter : total10ValueGetter , } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , resizable : true , } , autoGroupColumnDef : { minWidth : 130 , } , columnTypes : { quarterFigure : { editable : true , cellClass : 'number-cell' , aggFunc : 'sum' , valueFormatter : formatNumber , valueParser : function numberParser ( params ) { return Number ( params . newValue ) ; } , } , } , rowData : getData ( ) , suppressAggFuncInHeader : true , enableCellChangeFlash : true , enableRangeSelection : true , groupDefaultExpanded : 1 , valueCache : true , getRowNodeId : function ( data ) { return data . id ; } , onCellValueChanged : function ( ) { console . log ( 'onCellValueChanged' ) ; } , } ; function formatNumber ( params ) { var number = params . value ; return Math . floor ( number ) . toString ( ) . replace ( /(\d)(?=(\d{3})+(?!\d))/g , '$1,' ) ; } function onExpireValueCache ( ) { console . log ( 'onInvalidateValueCache -> start' ) ; gridOptions . api ! . expireValueCache ( ) ; console . log ( 'onInvalidateValueCache -> end' ) ; } function onRefreshCells ( ) { console . log ( 'onRefreshCells -> start' ) ; gridOptions . api ! . refreshCells ( ) ; console . log ( 'onRefreshCells -> end' ) ; } function onUpdateOneValue ( ) { var randomId = Math . floor ( Math . random ( ) * 10 ) + '' ; var rowNode = gridOptions . api ! . getRowNode ( randomId ) ; if ( rowNode ) { var randomCol = [ 'q1' , 'q2' , 'q3' , 'q4' ] [ Math . floor ( Math . random ( ) * 4 ) ] ; var newValue = Math . floor ( Math . random ( ) * 1000 ) ; console . log ( 'onUpdateOneValue -> start' ) ; rowNode . setDataValue ( randomCol , newValue ) ; console . log ( 'onUpdateOneValue -> end' ) ; } } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;