import { GridOptions , IDatasource , SortModelItem } from '@ag-grid-community/core' ; const gridOptions = { columnDefs : [ { field : 'athlete' , colId : 'athlete' , minWidth : 180 } , { field : 'age' , colId : 'age' } , { field : 'country' , colId : 'country' , minWidth : 180 } , { field : 'year' , colId : 'year' } , { field : 'sport' , colId : 'sport' , minWidth : 180 } , ] , defaultColDef : { flex : 1 , sortable : true , resizable : true , filter : true , } , rowModelType : 'infinite' , } ; function onBtShowYearColumn ( ) { gridOptions . api ! . setColumnDefs ( [ { field : 'athlete' , colId : 'athlete' } , { field : 'age' , colId : 'age' } , { field : 'country' , colId : 'country' } , { field : 'year' , colId : 'year' } , { field : 'sport' , colId : 'sport' } , ] ) ; } function onBtHideYearColumn ( ) { gridOptions . api ! . setColumnDefs ( [ { field : 'athlete' , colId : 'athlete' } , { field : 'age' , colId : 'age' } , { field : 'country' , colId : 'country' } , { field : 'sport' , colId : 'sport' } , ] ) ; } 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 ] ; var filterFails = false ; var filterKeys = Object . keys ( filterModel ) ; filterKeys . forEach ( function ( filterKey ) { var filterValue = filterModel [ filterKey ] . filter ; var valueForRow = item [ filterKey ] ; if ( filterValue != valueForRow ) { filterFails = true ; } } ) ; if ( ! filterFails ) { 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 ( d , index ) { d . 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 ) ; } ) ; } ) ;