import { GridOptions , ICellRendererParams } from '@ag-grid-community/core' ; declare var FullWidthCellRenderer ; const gridOptions = { columnDefs : [ { field : 'name' , cellRenderer : countryCellRenderer } , { field : 'continent' } , { field : 'language' } , ] , defaultColDef : { flex : 1 , sortable : true , resizable : true , filter : true , } , components : { fullWidthCellRenderer : FullWidthCellRenderer , } , rowData : getData ( ) , getRowHeight : function ( params ) { if ( isFullWidth ( params . data ) ) { return 100 ; } } , isFullWidthCell : function ( rowNode ) { return isFullWidth ( rowNode . data ) ; } , fullWidthCellRenderer : 'fullWidthCellRenderer' , } ; function countryCellRenderer ( params ) { var flag = '<img border="0" width="15" height="10" src="https://www.ag-grid.com/example-assets/flags/' + params . data . code + '.png">' ; return ( '<span style="cursor: default;">' + flag + ' ' + params . value + '</span>' ) ; } function isFullWidth ( data ) { return [ 'Peru' , 'France' , 'Italy' ] . indexOf ( data . name ) >= 0 ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;