import { ColDef , GridOptions , ICellRendererParams , IDatasource , IGetRowsParams , RowClassParams , ValueFormatterParams } from '@ag-grid-community/core' ; var valueFormatter = function ( params ) { if ( typeof params . value === 'number' ) { return '£' + params . value . toLocaleString ( ) ; } else { return params . value ; } } ; const columnDefs = [ { headerName : 'Item ID' , field : 'id' , valueGetter : 'node.id' , cellRenderer : 'loadingRenderer' , } , { field : 'make' } , { field : 'model' } , { field : 'price' , valueFormatter : valueFormatter , } , ] ; var datasource = { rowCount : undefined , getRows : function ( params ) { console . log ( 'asking for ' + params . startRow + ' to ' + params . endRow ) ; setTimeout ( function ( ) { var rowsThisPage = allOfTheData . slice ( params . startRow , params . endRow ) ; for ( var i = 0 ; i < rowsThisPage . length ; i ++ ) { var item = rowsThisPage [ i ] ; var itemCopy = JSON . parse ( JSON . stringify ( item ) ) ; rowsThisPage [ i ] = itemCopy ; } var lastRow = - 1 ; if ( allOfTheData . length <= params . endRow ) { lastRow = allOfTheData . length ; } params . successCallback ( rowsThisPage , lastRow ) ; } , 500 ) ; } , } ; const gridOptions = { components : { loadingRenderer : function ( params ) { if ( params . value !== undefined ) { return params . value ; } else { return '<img src="https://www.ag-grid.com/example-assets/loading.gif">' ; } } , } , defaultColDef : { resizable : true , } , rowSelection : 'multiple' , columnDefs : columnDefs , rowModelType : 'infinite' , datasource : datasource , maxBlocksInCache : 2 , infiniteInitialRowCount : 500 , maxConcurrentDatasourceRequests : 2 , getRowNodeId : function ( item ) { return item . id . toString ( ) ; } , onGridReady : function ( params ) { sequenceId = 1 ; allOfTheData = [ ] ; for ( var i = 0 ; i < 1000 ; i ++ ) { allOfTheData . push ( createRowData ( sequenceId ++ ) ) ; } } , onFirstDataRendered : function ( params ) { params . api . sizeColumnsToFit ( ) ; } , getRowStyle : function ( params ) { if ( params . data && params . data . make === 'Honda' ) { return { fontWeight : 'bold' , } ; } else { return undefined ; } } , } ; var sequenceId = 0 ; var allOfTheData = [ ] ; function createRowData ( id ) { var makes = [ 'Toyota' , 'Ford' , 'Porsche' , 'Chevy' , 'Honda' , 'Nissan' ] ; var models = [ 'Cruze' , 'Celica' , 'Mondeo' , 'Boxter' , 'Genesis' , 'Accord' , 'Taurus' , ] ; return { id : id , make : makes [ id % makes . length ] , model : models [ id % models . length ] , price : 72000 , } ; } function insertItemsAt2AndRefresh ( count ) { insertItemsAt2 ( count ) ; var maxRowFound = gridOptions . api ! . isLastRowIndexKnown ( ) ; if ( maxRowFound ) { var rowCount = gridOptions . api ! . getInfiniteRowCount ( ) || 0 ; gridOptions . api ! . setRowCount ( rowCount + count ) ; } gridOptions . api ! . refreshInfiniteCache ( ) ; } function insertItemsAt2 ( count ) { var newDataItems = [ ] ; for ( var i = 0 ; i < count ; i ++ ) { var newItem = createRowData ( sequenceId ++ ) ; allOfTheData . splice ( 2 , 0 , newItem ) ; newDataItems . push ( newItem ) ; } return newDataItems ; } function removeItem ( start , limit ) { allOfTheData . splice ( start , limit ) ; gridOptions . api ! . refreshInfiniteCache ( ) ; } function refreshCache ( ) { gridOptions . api ! . refreshInfiniteCache ( ) ; } function purgeCache ( ) { gridOptions . api ! . purgeInfiniteCache ( ) ; } function setRowCountTo200 ( ) { gridOptions . api ! . setRowCount ( 200 , false ) ; } function rowsAndMaxFound ( ) { console . log ( 'getInfiniteRowCount() => ' + gridOptions . api ! . getInfiniteRowCount ( ) ) ; console . log ( 'isLastRowIndexKnown() => ' + gridOptions . api ! . isLastRowIndexKnown ( ) ) ; } function setPricesHigh ( ) { allOfTheData . forEach ( function ( dataItem ) { dataItem . price = Math . round ( 55500 + 400 * ( 0.5 + Math . random ( ) ) ) ; } ) ; } function setPricesLow ( ) { allOfTheData . forEach ( function ( dataItem ) { dataItem . price = Math . round ( 1000 + 100 * ( 0.5 + Math . random ( ) ) ) ; } ) ; } function printCacheState ( ) { console . log ( '*** Cache State ***' ) ; console . log ( gridOptions . api ! . getCacheBlockState ( ) ) ; } function jumpTo500 ( ) { if ( ( gridOptions . api ! . getInfiniteRowCount ( ) || 0 ) < 501 ) { gridOptions . api ! . setRowCount ( 501 , false ) ; } gridOptions . api ! . ensureIndexVisible ( 500 ) ; } document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ;