import { GridOptions , IServerSideDatasource , IServerSideGetRowsRequest } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { field : 'id' , maxWidth : 80 } , { field : 'athlete' , minWidth : 220 } , { field : 'country' , minWidth : 200 } , { field : 'year' } , { field : 'sport' , minWidth : 200 } , { field : 'gold' } , { field : 'silver' } , { field : 'bronze' } , ] , defaultColDef : { flex : 1 , minWidth : 100 , resizable : true , } , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , blockLoadDebounceMillis : 1000 , debug : true , } ; document . addEventListener ( 'DOMContentLoaded' , function ( ) { var 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 ( function ( data ) { var idSequence = 0 ; data . forEach ( function ( item ) { item . id = idSequence ++ ; } ) ; var fakeServer = createFakeServer ( data ) ; var datasource = createServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ; function createServerSideDatasource ( server ) { return { getRows : function ( params ) { console . log ( '[Datasource] - rows requested by grid: ' , params . request ) ; var response = server . getData ( params . request ) ; setTimeout ( function ( ) { if ( response . success ) { params . success ( { rowData : response . rows , rowCount : response . lastRow } ) ; } else { params . fail ( ) ; } } , 100 ) ; } , } ; } function createFakeServer ( allData ) { return { getData : function ( request ) { var rowsForBlock = allData . slice ( request . startRow , request . endRow ) ; var lastRow = allData . length ; return { success : true , rows : rowsForBlock , lastRow : lastRow , } ; } , } ; }