import { ColDef , GridOptions , IServerSideDatasource , IServerSideGetRowsParams , SetFilterValuesFuncParams } from '@ag-grid-community/core' ; declare var FakeServer ; var colDefCountry = { field : 'country' , rowGroup : true } ; var colDefYear = { field : 'year' , rowGroup : true } ; var colDefAthlete = { field : 'athlete' , filter : 'agSetColumnFilter' , filterParams : { values : getAthletesAsync , } , menuTabs : [ 'filterMenuTab' ] , } ; var colDefAge = { field : 'age' } ; var colDefSport = { field : 'sport' } ; var colDefGold = { field : 'gold' , aggFunc : 'sum' } ; var colDefSilver = { field : 'silver' , aggFunc : 'sum' } ; var colDefBronze = { field : 'bronze' , aggFunc : 'sum' } ; const columnDefs = [ colDefAthlete , colDefAge , colDefCountry , colDefYear , colDefSport , colDefGold , colDefSilver , colDefBronze , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , minWidth : 120 , resizable : true , sortable : true , } , autoGroupColumnDef : { minWidth : 200 , } , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , onGridReady : function ( ) { ( document . getElementById ( 'athlete' ) as HTMLInputElement ) . checked = true ; ( document . getElementById ( 'age' ) as HTMLInputElement ) . checked = true ; ( document . getElementById ( 'country' ) as HTMLInputElement ) . checked = true ; ( document . getElementById ( 'year' ) as HTMLInputElement ) . checked = true ; ( document . getElementById ( 'sport' ) as HTMLInputElement ) . checked = true ; ( document . getElementById ( 'gold' ) as HTMLInputElement ) . checked = true ; ( document . getElementById ( 'silver' ) as HTMLInputElement ) . checked = true ; ( document . getElementById ( 'bronze' ) as HTMLInputElement ) . checked = true ; } , animateRows : true , suppressAggFuncInHeader : true , } ; function getAthletesAsync ( params ) { var countries = fakeServer . getAthletes ( ) ; setTimeout ( function ( ) { params . success ( countries ) ; } , 500 ) ; } function onBtApply ( ) { var cols = [ ] ; if ( getBooleanValue ( '#athlete' ) ) { cols . push ( colDefAthlete ) ; } if ( getBooleanValue ( '#age' ) ) { cols . push ( colDefAge ) ; } if ( getBooleanValue ( '#country' ) ) { cols . push ( colDefCountry ) ; } if ( getBooleanValue ( '#year' ) ) { cols . push ( colDefYear ) ; } if ( getBooleanValue ( '#sport' ) ) { cols . push ( colDefSport ) ; } if ( getBooleanValue ( '#gold' ) ) { cols . push ( colDefGold ) ; } if ( getBooleanValue ( '#silver' ) ) { cols . push ( colDefSilver ) ; } if ( getBooleanValue ( '#bronze' ) ) { cols . push ( colDefBronze ) ; } gridOptions . api ! . setColumnDefs ( cols ) ; } function getBooleanValue ( cssSelector ) { return ( document . querySelector ( cssSelector ) as HTMLInputElement ) . checked === true ; } function getServerSideDatasource ( 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 ( ) ; } } , 200 ) ; } , } ; } var fakeServer = undefined ; 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 ) { fakeServer = new FakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ;