import { ColDef , GridOptions , IServerSideDatasource , IServerSideGetRowsRequest , SetFilterValuesFuncParams , SortModelItem , ValueFormatterParams } from '@ag-grid-community/core' ; declare function getCountryMap ( ) ; declare function getCountryCodeMap ( ) ; const columnDefs = [ { field : 'country' , valueFormatter : countryValueFormatter , filter : 'agSetColumnFilter' , filterParams : { values : getCountryValuesAsync , valueFormatter : countryFilterValueFormatter , } , menuTabs : [ 'filterMenuTab' ] , } , { field : 'athlete' , menuTabs : undefined } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , sortable : true , } , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , animateRows : true , } ; function countryValueFormatter ( params ) { if ( params . value && params . value . code ) { return params . value . name + '(' + params . value . code + ')' ; } return '' ; } function getCountryValuesAsync ( params ) { setTimeout ( function ( ) { params . success ( Object . keys ( getCountryCodeMap ( ) ) ) ; } , 500 ) ; } function countryFilterValueFormatter ( params ) { var code = params . value ; var name = getCountryCodeMap ( ) [ code ] ; return name + '(' + code + ')' ; } 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 fakeServer = getFakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ; function getServerSideDatasource ( server ) { return { getRows : function ( params ) { console . log ( '[Datasource] - rows requested: ' , params . request ) ; var response = server . getData ( params . request ) ; setTimeout ( function ( ) { if ( response . success ) { params . success ( { rowData : response . rows , rowCount : response . lastRow } ) ; } else { params . fail ( ) ; } } , 500 ) ; } , } ; } function getFakeServer ( allData ) { allData . forEach ( function ( d ) { d . country = { code : getCountryMap ( ) [ d . country ] , name : d . country , } ; } ) ; function doFilter ( data , filterModel ) { var filterPresent = filterModel && Object . keys ( filterModel ) . length > 0 ; if ( ! filterPresent ) return data ; return data . filter ( function ( d ) { return filterModel . country . values . indexOf ( d . country . code ) > - 1 ; } ) ; } function doSort ( data , sortModel ) { var sortPresent = sortModel && sortModel . length > 0 ; if ( ! sortPresent ) return data ; var sortedData = data . slice ( ) ; sortedData . sort ( function ( a , b ) { for ( var k = 0 ; k < sortModel . length ; k ++ ) { var sortColModel = sortModel [ k ] ; var valueA = a [ sortColModel . colId ] ; if ( valueA instanceof Object ) { valueA = valueA . name ; } var valueB = b [ sortColModel . colId ] ; if ( valueB instanceof Object ) { valueB = valueB . name ; } if ( valueA === valueB ) { continue ; } var sortDirection = sortColModel . sort === 'asc' ? 1 : - 1 ; return valueA > valueB ? sortDirection : sortDirection * - 1 ; } return 0 ; } ) ; return sortedData ; } return { getData : function ( request ) { var filteredData = doFilter ( allData , request . filterModel ) ; var filteredAndSortedData = doSort ( filteredData , request . sortModel ) ; var rowsForBlock = filteredAndSortedData . slice ( request . startRow , request . endRow ) ; var lastRow = allData . length <= ( request . endRow || 0 ) ? allData . length : - 1 ; return { success : true , rows : rowsForBlock , lastRow : lastRow , } ; } , } ; }