import { ColDef , GridOptions , ICellRendererParams , IDatasource , IGetRowsParams , SortModelItem } from '@ag-grid-community/core' ; declare function countries ( ) ; var filterParams = { values : countries ( ) } ; const columnDefs = [ { headerName : 'ID' , maxWidth : 100 , valueGetter : 'node.id' , cellRenderer : 'loadingRenderer' , sortable : false , suppressMenu : true , } , { headerName : 'Athlete' , field : 'athlete' , width : 150 , suppressMenu : true } , { field : 'age' , filter : 'agNumberColumnFilter' , filterParams : { filterOptions : [ 'equals' , 'lessThan' , 'greaterThan' ] , } , } , { field : 'country' , filter : 'agSetColumnFilter' , filterParams : filterParams , } , { field : 'year' , filter : 'agSetColumnFilter' , filterParams : { values : [ '2000' , '2004' , '2008' , '2012' ] } , } , { field : 'date' } , { field : 'sport' , suppressMenu : true } , { field : 'gold' , suppressMenu : true } , { field : 'silver' , suppressMenu : true } , { field : 'bronze' , suppressMenu : true } , { field : 'total' , suppressMenu : true } , ] ; const gridOptions = { defaultColDef : { flex : 1 , minWidth : 150 , sortable : true , resizable : true , floatingFilter : true , } , components : { loadingRenderer : function ( params ) { if ( params . value !== undefined ) { return params . value ; } else { return '<img src="https://www.ag-grid.com/example-assets/loading.gif">' ; } } , } , rowSelection : 'multiple' , columnDefs : columnDefs , rowModelType : 'infinite' , cacheOverflowSize : 2 , maxConcurrentDatasourceRequests : 2 , infiniteInitialRowCount : 1 , maxBlocksInCache : 2 , pagination : true , cacheBlockSize : 10 , getRowNodeId : function ( item ) { return item . id ; } , } ; function sortAndFilter ( allOfTheData , sortModel , filterModel ) { return sortData ( sortModel , filterData ( filterModel , allOfTheData ) ) ; } function sortData ( sortModel , data ) { var sortPresent = sortModel && sortModel . length > 0 ; if ( ! sortPresent ) { return data ; } var resultOfSort = data . slice ( ) ; resultOfSort . sort ( function ( a , b ) { for ( var k = 0 ; k < sortModel . length ; k ++ ) { var sortColModel = sortModel [ k ] ; var valueA = a [ sortColModel . colId ] ; var valueB = b [ sortColModel . colId ] ; if ( valueA == valueB ) { continue ; } var sortDirection = sortColModel . sort === 'asc' ? 1 : - 1 ; if ( valueA > valueB ) { return sortDirection ; } else { return sortDirection * - 1 ; } } return 0 ; } ) ; return resultOfSort ; } function filterData ( filterModel , data ) { var filterPresent = filterModel && Object . keys ( filterModel ) . length > 0 ; if ( ! filterPresent ) { return data ; } var resultOfFilter = [ ] ; for ( var i = 0 ; i < data . length ; i ++ ) { var item = data [ i ] ; if ( filterModel . age ) { var age = item . age ; var allowedAge = parseInt ( filterModel . age . filter ) ; if ( filterModel . age . type == 'equals' ) { if ( age !== allowedAge ) { continue ; } } else if ( filterModel . age . type == 'lessThan' ) { if ( age >= allowedAge ) { continue ; } } else { if ( age <= allowedAge ) { continue ; } } } if ( filterModel . year ) { if ( filterModel . year . indexOf ( item . year . toString ( ) ) < 0 ) { continue ; } } if ( filterModel . country ) { if ( filterModel . country . indexOf ( item . country ) < 0 ) { continue ; } } resultOfFilter . push ( item ) ; } return resultOfFilter ; } 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 ) { data . forEach ( function ( x , index ) { x . id = 'R' + ( index + 1 ) ; } ) ; var dataSource = { rowCount : undefined , getRows : function ( params ) { console . log ( 'asking for ' + params . startRow + ' to ' + params . endRow ) ; setTimeout ( function ( ) { var dataAfterSortingAndFiltering = sortAndFilter ( data , params . sortModel , params . filterModel ) ; var rowsThisPage = dataAfterSortingAndFiltering . slice ( params . startRow , params . endRow ) ; var lastRow = - 1 ; if ( dataAfterSortingAndFiltering . length <= params . endRow ) { lastRow = dataAfterSortingAndFiltering . length ; } params . successCallback ( rowsThisPage , lastRow ) ; } , 500 ) ; } , } ; gridOptions . api ! . setDatasource ( dataSource ) ; } ) ; } ) ;