import { ColDef , GridOptions , ICellRendererComp , ICellRendererParams } from '@ag-grid-community/core' ; const columnDefs = [ { headerName : 'Country Group - No Renderer' , showRowGroup : 'country' , minWidth : 250 , } , { headerName : 'All Groups - No Renderer' , showRowGroup : true , minWidth : 240 } , { headerName : 'Group Renderer A' , showRowGroup : true , cellRenderer : 'agGroupCellRenderer' , minWidth : 220 , } , { headerName : 'Group Renderer B' , field : 'city' , showRowGroup : true , cellRenderer : 'agGroupCellRenderer' , minWidth : 220 , } , { headerName : 'Group Renderer C' , field : 'city' , minWidth : 240 , showRowGroup : true , cellRenderer : 'agGroupCellRenderer' , cellRendererParams : { suppressCount : true , checkbox : true , innerRenderer : 'simpleCellRenderer' , suppressDoubleClickExpand : true , suppressEnterExpand : true , } , } , { headerName : 'Type' , field : 'type' , rowGroup : true } , { headerName : 'Country' , field : 'country' , rowGroup : true } , { headerName : 'City' , field : 'city' } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 120 , resizable : true , } , rowData : getData ( ) , components : { simpleCellRenderer : getSimpleCellRenderer ( ) , } , groupDisplayType : 'custom' , suppressRowClickSelection : true , groupDefaultExpanded : 1 , rowSelection : 'multiple' , groupSelectsChildren : true , animateRows : true , } ; function getSimpleCellRenderer ( ) { class SimpleCellRenderer { eGui : any ; init ( params ) { var tempDiv = document . createElement ( 'div' ) ; if ( params . node . group ) { tempDiv . innerHTML = '<span style="border-bottom: 1px solid grey; border-left: 1px solid grey; padding: 2px;">' + params . value + '</span>' ; } else { tempDiv . innerHTML = '<span><img src="https://flags.fmcdn.net/data/flags/mini/ie.png" style="width: 20px; padding-right: 4px;"/>' + params . value + '</span>' ; } this . eGui = tempDiv . firstChild ! ; } getGui ( ) { return this . eGui ; } } return SimpleCellRenderer ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;