import { ColDef , GridOptions , IServerSideDatasource , IServerSideGetRowsRequest } from '@ag-grid-community/core' ; declare var CustomLoadingCellRenderer ; const columnDefs = [ { field : 'id' } , { field : 'athlete' , width : 150 } , { field : 'age' } , { field : 'country' } , { field : 'year' } , { field : 'sport' } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , ] ; const gridOptions = { defaultColDef : { editable : true , sortable : true , flex : 1 , minWidth : 100 , filter : true , resizable : true , } , components : { customLoadingCellRenderer : CustomLoadingCellRenderer , } , loadingCellRenderer : 'customLoadingCellRenderer' , loadingCellRendererParams : { loadingMessage : 'One moment please...' , } , columnDefs : columnDefs , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , cacheBlockSize : 100 , maxBlocksInCache : 10 , animateRows : true , debug : true , } ; document . addEventListener ( 'DOMContentLoaded' , ( ) => { const gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; fetch ( 'https://www.ag-grid.com/example-assets/olympic-winners.json' ) . then ( response => response . json ( ) ) . then ( data => { let idSequence = 0 ; data . forEach ( ( item ) => { item . id = idSequence ++ ; } ) ; const server = getFakeServer ( data ) ; const datasource = getServerSideDatasource ( server ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ; function getServerSideDatasource ( server ) { return { getRows : params => { setTimeout ( ( ) => { const response = server . getResponse ( params . request ) ; if ( response . success ) { params . successCallback ( response . rows , response . lastRow ) ; } else { params . failCallback ( ) ; } } , 2000 ) ; } , } ; } function getFakeServer ( allData ) { return { getResponse : ( request ) => { console . log ( 'asking for rows: ' + request . startRow + ' to ' + request . endRow ) ; const rowsThisPage = allData . slice ( request . startRow , request . endRow ) ; const lastRow = allData . length <= ( request . endRow || 0 ) ? allData . length : - 1 ; return { success : true , rows : rowsThisPage , lastRow : lastRow , } ; } , } ; }