import { GridOptions , ICellRendererParams } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { headerName : 'A' , field : 'a' } , { headerName : 'B' , field : 'b.name' } , { headerName : 'C' , valueGetter : "'zz' + data.c.name" } , { headerName : 'D' , field : 'd' , cellRenderer : 'boldRenderer' , getQuickFilterText : function ( params ) { return params . value . name ; } , } , { headerName : 'E' , field : 'e' , cellRenderer : 'boldRenderer' , } , ] , defaultColDef : { flex : 1 , editable : true , } , rowData : getData ( ) , components : { boldRenderer : function ( params ) { return '<b>' + params . value . name + '</b>' ; } , } , } ; function onFilterTextBoxChanged ( ) { gridOptions . api ! . setQuickFilter ( ( document . getElementById ( 'filter-text-box' ) as HTMLInputElement ) . value ) ; } function onPrintQuickFilterTexts ( ) { gridOptions . api ! . forEachNode ( function ( rowNode , index ) { console . log ( 'Row ' + index + ' quick filter text is ' + rowNode . quickFilterAggregateText ) ; } ) ; } function onQuickFilterTypeChanged ( ) { var rbCache = document . querySelector ( '#cbCache' ) as HTMLInputElement ; var cacheActive = rbCache . checked ; console . log ( 'using cache = ' + cacheActive ) ; gridOptions . cacheQuickFilter = cacheActive ; gridOptions . api ! . setRowData ( getData ( ) ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;