import { ColDef , GridOptions , IServerSideDatasource } from '@ag-grid-community/core' ; declare var FakeServer ; const columnDefs = [ { headerName : 'Group' , field : 'name' , rowGroup : true , hide : true , } , { field : 'autoA' , wrapText : true , autoHeight : true , aggFunc : 'last' , } , { field : 'autoB' , wrapText : true , autoHeight : true , aggFunc : 'last' , } , ] ; const gridOptions = { columnDefs : columnDefs , defaultColDef : { flex : 1 , resizable : true , sortable : true , } , autoGroupColumnDef : { flex : 1 , maxWidth : 200 , } , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , animateRows : true , suppressAggFuncInHeader : true , onGridReady : function ( ) { var data = getData ( ) ; var fakeServer = new FakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } , } ; document . addEventListener ( 'DOMContentLoaded' , function ( ) { var gridDiv = document . querySelector ( '#myGrid' ) ; new agGrid . Grid ( gridDiv , gridOptions ) ; } ) ; 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 ) ; } , } ; }