import { GridOptions } from '@ag-grid-community/core' ; function formatNumber ( number ) { return Math . floor ( number ) . toString ( ) . replace ( /(\d)(?=(\d{3})+(?!\d))/g , '$1,' ) ; } const gridOptions = { columnDefs : [ { field : 'a' } , { field : 'b' } , { field : 'c' } , { field : 'd' } , { field : 'e' } , { field : 'f' } , ] , defaultColDef : { flex : 1 , cellClass : 'align-right' , enableCellChangeFlash : true , resizable : true , valueFormatter : function ( params ) { return formatNumber ( params . value ) ; } , } , rowData : createRowData ( ) , cellFlashDelay : 2000 , cellFadeDelay : 500 , } ; function onUpdateSomeValues ( ) { var rowCount = gridOptions . api ! . getDisplayedRowCount ( ) ; for ( var i = 0 ; i < 20 ; i ++ ) { var row = Math . floor ( Math . random ( ) * rowCount ) ; var rowNode = gridOptions . api ! . getDisplayedRowAtIndex ( row ) ! ; var col = [ 'a' , 'b' , 'c' , 'd' , 'e' , 'f' ] [ i % 6 ] ; rowNode . setDataValue ( col , Math . floor ( Math . random ( ) * 10000 ) ) ; } } function onFlashTwoRows ( ) { var rowNode1 = gridOptions . api ! . getDisplayedRowAtIndex ( 4 ) ! ; var rowNode2 = gridOptions . api ! . getDisplayedRowAtIndex ( 5 ) ! ; gridOptions . api ! . flashCells ( { rowNodes : [ rowNode1 , rowNode2 ] , flashDelay : 3000 , fadeDelay : 2000 , } ) ; } function createRowData ( ) { var rowData = [ ] ; for ( var i = 0 ; i < 20 ; i ++ ) { rowData . push ( { a : Math . floor ( ( ( i + 323 ) * 25435 ) % 10000 ) , b : Math . floor ( ( ( i + 323 ) * 23221 ) % 10000 ) , c : Math . floor ( ( ( i + 323 ) * 468276 ) % 10000 ) , d : 0 , e : 0 , f : 0 , } ) ; } return rowData ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;