import { ColDef , ColGroupDef , ColumnApi , GridOptions , IServerSideDatasource , IServerSideGetRowsRequest } from '@ag-grid-community/core' ; declare var FakeServer ; const gridOptions = { columnDefs : [ { field : 'country' , rowGroup : true } , { field : 'sport' , rowGroup : true } , { field : 'year' , pivot : true } , { field : 'gold' , aggFunc : 'sum' } , { field : 'silver' , aggFunc : 'sum' } , { field : 'bronze' , aggFunc : 'sum' } , ] , defaultColDef : { width : 150 , resizable : true , sortable : true , } , autoGroupColumnDef : { minWidth : 200 , } , rowModelType : 'serverSide' , serverSideStoreType : 'partial' , pivotMode : true , animateRows : true , } ; 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 = new FakeServer ( data ) ; var datasource = getServerSideDatasource ( fakeServer ) ; gridOptions . api ! . setServerSideDatasource ( datasource ) ; } ) ; } ) ; function getServerSideDatasource ( server ) { return { getRows : function ( params ) { var request = params . request ; console . log ( '[Datasource] - rows requested by grid: ' , params . request ) ; var response = server . getData ( request ) ; addPivotColDefs ( request , response , params . columnApi ) ; setTimeout ( function ( ) { if ( response . success ) { params . success ( { rowData : response . rows , rowCount : response . lastRow } ) ; } else { params . fail ( ) ; } } , 500 ) ; } , } ; } function addPivotColDefs ( request , response , columnApi ) { var existingPivotColDefs = columnApi . getSecondaryColumns ( ) ; if ( existingPivotColDefs && existingPivotColDefs . length > 0 ) { return ; } var pivotColDefs = createPivotColDefs ( request , response . pivotFields ) ; columnApi . setSecondaryColumns ( pivotColDefs ) ; } function createPivotColDefs ( request , pivotFields ) { function addColDef ( colId , parts , res ) { if ( parts . length === 0 ) return [ ] ; var first = parts . shift ( ) ; var existing = res . filter ( function ( r ) { return 'groupId' in r && r . groupId === first ; } ) [ 0 ] as ColGroupDef ; if ( existing ) { existing [ 'children' ] = addColDef ( colId , parts , existing . children ) ; } else { var colDef = { } ; var isGroup = parts . length > 0 ; if ( isGroup ) { colDef [ 'groupId' ] = first ; colDef [ 'headerName' ] = first ; } else { var valueCol = request . valueCols . filter ( function ( r ) { return r . field === first ; } ) [ 0 ] ; colDef [ 'colId' ] = colId ; colDef [ 'headerName' ] = valueCol . displayName ; colDef [ 'field' ] = colId ; } var children = addColDef ( colId , parts , [ ] ) ; children . length > 0 ? ( colDef [ 'children' ] = children ) : null ; res . push ( colDef ) ; } return res ; } if ( request . pivotMode && request . pivotCols . length > 0 ) { var secondaryCols = [ ] ; pivotFields . forEach ( function ( field ) { addColDef ( field , field . split ( '_' ) , secondaryCols ) ; } ) ; return secondaryCols ; } return [ ] ; }