import { ColDef , GridOptions , IAggFuncParams } from '@ag-grid-community/core' ; const columnDefs = [ { field : 'country' , rowGroup : true , hide : true } , { field : 'year' , rowGroup : true , hide : true } , { headerName : 'minMax(age)' , field : 'age' , aggFunc : minAndMaxAggFunction } , { headerName : 'avg(age)' , field : 'age' , aggFunc : avgAggFunction , enableValue : true , minWidth : 200 , } , { headerName : 'roundedAvg(age)' , field : 'age' , aggFunc : roundedAvgAggFunction , enableValue : true , minWidth : 200 , } , { headerName : 'sum(gold)' , field : 'gold' , aggFunc : 'sum' , enableValue : true , } , { headerName : 'abc(silver)' , field : 'silver' , aggFunc : '123' , enableValue : true , } , { headerName : 'xyz(bronze)' , field : 'bronze' , aggFunc : 'xyz' , enableValue : true , } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 150 , filter : true , sortable : true , resizable : true , } , autoGroupColumnDef : { headerName : 'Athlete' , field : 'athlete' , minWidth : 250 , } , enableRangeSelection : true , suppressAggFuncInHeader : true , aggFuncs : { sum : sumFunction , '123' : oneTwoThreeFunc , xyz : xyzFunc , } , sideBar : true , onGridReady : params => { params . api . addAggFunc ( 'xyz' , xyzFunc ) ; } , } ; function oneTwoThreeFunc ( params ) { return 123 ; } function xyzFunc ( params ) { return 'xyz' ; } function sumFunction ( params ) { let result = 0 ; params . values . forEach ( value => { if ( typeof value === 'number' ) { result += value ; } } ) ; return result ; } function minAndMaxAggFunction ( params ) { const result = { min : null , max : null , toString : function ( ) { return '(' + this . min + '..' + this . max + ')' ; } , } ; params . values . forEach ( value => { const groupNode = value !== null && value !== undefined && typeof value === 'object' ; const minValue = groupNode ? value . min : value ; const maxValue = groupNode ? value . max : value ; result . min = min ( minValue , result . min ) ; result . max = max ( maxValue , result . max ) ; } ) ; return result ; } function avgAggFunction ( params ) { let sum = 0 ; let count = 0 ; params . values . forEach ( value => { const groupNode = value !== null && value !== undefined && typeof value === 'object' ; if ( groupNode ) { sum += value . avg * value . count ; count += value . count ; } else { if ( typeof value === 'number' ) { sum += value ; count ++ ; } } } ) ; let avg = null ; if ( count !== 0 ) { avg = sum / count ; } const result = { count : count , avg : avg , toString : function ( ) { return this . avg ; } , } ; return result ; } function roundedAvgAggFunction ( params ) { const result = avgAggFunction ( params ) ; if ( result . avg ) { result . avg = Math . round ( result . avg * 100 ) / 100 ; } return result ; } function min ( a , b ) { const aMissing = typeof a !== 'number' ; const bMissing = typeof b !== 'number' ; if ( aMissing && bMissing ) { return null ; } else if ( aMissing ) { return b ; } else if ( bMissing ) { return a ; } else if ( a > b ) { return b ; } else { return a ; } } function max ( a , b ) { const aMissing = typeof a !== 'number' ; const bMissing = typeof b !== 'number' ; if ( aMissing && bMissing ) { return null ; } else if ( aMissing ) { return b ; } else if ( bMissing ) { return a ; } else if ( a < b ) { return b ; } else { return a ; } } document . addEventListener ( 'DOMContentLoaded' , ( ) => { const gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/olympic-winners.json' ) . then ( response => response . json ( ) ) . then ( data => gridOptions . api ! . setRowData ( data ) ) ; } ) ;