import { GridApi , GridOptions , RefreshCellsParams , RowNode } from '@ag-grid-community/core' ; var data = [ ] ; var topRowData = [ ] ; var bottomRowData = [ ] ; const gridOptions = { columnDefs : [ { field : 'a' , suppressCellFlash : true } , { field : 'b' } , { field : 'c' } , { field : 'd' } , { field : 'e' } , { field : 'f' } , ] , defaultColDef : { flex : 1 , } , rowData : [ ] , pinnedTopRowData : [ ] , pinnedBottomRowData : [ ] , enableCellChangeFlash : true , onGridReady : function ( params ) { data = createData ( 14 ) ; topRowData = createData ( 2 ) ; bottomRowData = createData ( 2 ) ; params . api . setRowData ( data ) ; params . api . setPinnedTopRowData ( topRowData ) ; params . api . setPinnedBottomRowData ( bottomRowData ) ; } , } ; function createData ( count ) { var result = [ ] ; for ( var i = 1 ; i <= count ; i ++ ) { result . push ( { a : ( i * 863 ) % 100 , b : ( i * 811 ) % 100 , c : ( i * 743 ) % 100 , d : ( i * 677 ) % 100 , e : ( i * 619 ) % 100 , f : ( i * 571 ) % 100 , } ) ; } return result ; } function isForceRefreshSelected ( ) { return ( document . querySelector ( '#forceRefresh' ) as HTMLInputElement ) . checked ; } function isSuppressFlashSelected ( ) { return ( document . querySelector ( '#suppressFlash' ) as HTMLInputElement ) . checked ; } function scrambleAndRefreshAll ( ) { scramble ( ) ; var params = { force : isForceRefreshSelected ( ) , suppressFlash : isSuppressFlashSelected ( ) , } ; gridOptions . api ! . refreshCells ( params ) ; } function scrambleAndRefreshLeftToRight ( ) { scramble ( ) ; var api = gridOptions . api ! ; [ 'a' , 'b' , 'c' , 'd' , 'e' , 'f' ] . forEach ( function ( col , index ) { var millis = index * 100 ; var params = { force : isForceRefreshSelected ( ) , suppressFlash : isSuppressFlashSelected ( ) , columns : [ col ] , } ; callRefreshAfterMillis ( params , millis , api ) ; } ) ; } function scrambleAndRefreshTopToBottom ( ) { scramble ( ) ; var frame = 0 ; var i ; var rowNode ; var api = gridOptions . api ! ; for ( i = 0 ; i < api . getPinnedTopRowCount ( ) ; i ++ ) { rowNode = api . getPinnedTopRow ( i ) ! ; refreshRow ( rowNode , api ) ; } for ( i = 0 ; i < gridOptions . api ! . getDisplayedRowCount ( ) ; i ++ ) { rowNode = gridOptions . api ! . getDisplayedRowAtIndex ( i ) ! ; refreshRow ( rowNode , api ) ; } for ( i = 0 ; i < gridOptions . api ! . getPinnedBottomRowCount ( ) ; i ++ ) { rowNode = gridOptions . api ! . getPinnedBottomRow ( i ) ! ; refreshRow ( rowNode , api ) ; } function refreshRow ( rowNode , api ) { var millis = frame ++ * 100 ; var rowNodes = [ rowNode ] ; var params = { force : isForceRefreshSelected ( ) , suppressFlash : isSuppressFlashSelected ( ) , rowNodes : rowNodes , } ; callRefreshAfterMillis ( params , millis , api ) ; } } function callRefreshAfterMillis ( params , millis , gridApi ) { setTimeout ( function ( ) { gridApi . refreshCells ( params ) ; } , millis ) ; } function scramble ( ) { data . forEach ( scrambleItem ) ; topRowData . forEach ( scrambleItem ) ; bottomRowData . forEach ( scrambleItem ) ; } function scrambleItem ( item ) { ; [ 'a' , 'b' , 'c' , 'd' , 'e' , 'f' ] . forEach ( function ( colId ) { if ( Math . random ( ) > 0.5 ) { return ; } item [ colId ] = Math . floor ( Math . random ( ) * 100 ) ; } ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;