import { GridOptions , ICellRendererParams , ValueParserParams } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { field : 'city' , type : 'dimension' , cellRenderer : 'cityCellRenderer' } , { field : 'country' , type : 'dimension' , cellRenderer : 'countryCellRenderer' , minWidth : 200 , } , { field : 'state' , type : 'dimension' , cellRenderer : 'stateCellRenderer' , rowGroup : true , } , { field : 'val1' , type : 'numberValue' } , { field : 'val2' , type : 'numberValue' } , ] , defaultColDef : { flex : 1 , minWidth : 150 , resizable : true , } , autoGroupColumnDef : { field : 'city' , minWidth : 200 , } , columnTypes : { numberValue : { enableValue : true , aggFunc : 'sum' , editable : true , valueParser : numberParser , } , dimension : { enableRowGroup : true , enablePivot : true , } , } , components : { cityCellRenderer : cityCellRenderer , countryCellRenderer : countryCellRenderer , stateCellRenderer : stateCellRenderer , } , rowData : getData ( ) , groupDefaultExpanded : - 1 , rowGroupPanelShow : 'always' , animateRows : true , } ; const COUNTRY_CODES = { Ireland : 'ie' , 'United Kingdom' : 'gb' , USA : 'us' , } ; function numberParser ( params ) { return parseInt ( params . newValue ) ; } function countryCellRenderer ( params ) { if ( params . value === undefined || params . value === null ) { return '' ; } else { const flag = '<img border="0" width="15" height="10" src="https://flagcdn.com/h20/' + COUNTRY_CODES [ params . value ] + '.png">' ; return flag + ' ' + params . value ; } } function stateCellRenderer ( params ) { if ( params . value === undefined || params . value === null ) { return '' ; } else { const flag = '<img border="0" width="15" height="10" src="https://www.ag-grid.com/example-assets/gold-star.png">' ; return flag + ' ' + params . value ; } } function cityCellRenderer ( params ) { if ( params . value === undefined || params . value === null ) { return '' ; } else { const flag = '<img border="0" width="15" height="10" src="https://www.ag-grid.com/example-assets/weather/sun.png">' ; return flag + ' ' + params . value ; } } document . addEventListener ( 'DOMContentLoaded' , function ( ) { const gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;