import { ColDef , ColGroupDef , GridOptions , HeaderClassParams } from '@ag-grid-community/core' ; const columnDefs = [ { headerName : 'Group A' , groupId : 'GroupA' , children : [ { headerName : 'Athlete 1' , field : 'athlete' , width : 150 , filter : 'agTextColumnFilter' , } , { headerName : 'Group B' , groupId : 'GroupB' , children : [ { headerName : 'Country 1' , field : 'country' , width : 120 } , { headerName : 'Group C' , groupId : 'GroupC' , children : [ { headerName : 'Sport 1' , field : 'sport' , width : 110 } , { headerName : 'Group D' , groupId : 'GroupD' , children : [ { headerName : 'Total 1' , field : 'total' , width : 100 , filter : 'agNumberColumnFilter' , } , { headerName : 'Group E' , groupId : 'GroupE' , openByDefault : true , children : [ { headerName : 'Gold 1' , field : 'gold' , width : 100 , filter : 'agNumberColumnFilter' , } , { headerName : 'Group F' , groupId : 'GroupF' , openByDefault : true , children : [ { headerName : 'Silver 1' , field : 'silver' , width : 100 , filter : 'agNumberColumnFilter' , } , { headerName : 'Group G' , groupId : 'GroupG' , children : [ { headerName : 'Bronze' , field : 'bronze' , width : 100 , filter : 'agNumberColumnFilter' , } , ] , } , { headerName : 'Silver 2' , columnGroupShow : 'open' , field : 'silver' , width : 100 , filter : 'agNumberColumnFilter' , } , ] , } , { headerName : 'Gold 2' , columnGroupShow : 'open' , field : 'gold' , width : 100 , filter : 'agNumberColumnFilter' , } , ] , } , { headerName : 'Total 2' , columnGroupShow : 'open' , field : 'total' , width : 100 , filter : 'agNumberColumnFilter' , } , ] , } , { headerName : 'Sport 2' , columnGroupShow : 'open' , field : 'sport' , width : 110 , } , ] , } , { headerName : 'Country 2' , columnGroupShow : 'open' , field : 'country' , width : 120 , } , ] , } , { headerName : 'Age 2' , columnGroupShow : 'open' , field : 'age' , width : 90 , filter : 'agNumberColumnFilter' , } , ] , } , { headerName : 'Athlete 2' , columnGroupShow : 'open' , field : 'athlete' , width : 150 , filter : 'agTextColumnFilter' , } , ] ; const gridOptions = { debug : true , columnDefs : columnDefs , rowData : null , defaultColGroupDef : { headerClass : headerClassFunc } , defaultColDef : { headerClass : headerClassFunc , sortable : true , resizable : true , filter : true , } , icons : { columnGroupOpened : '<i class="far fa-minus-square"/>' , columnGroupClosed : '<i class="far fa-plus-square"/>' , } , } ; function headerClassFunc ( params ) { let foundC = false ; let foundG = false ; let item = params . column ? params . column : params . columnGroup ; while ( item ) { const colDef = item . getDefinition ( ) as ColGroupDef ; if ( colDef . groupId === 'GroupC' ) { foundC = true ; } else if ( colDef . groupId === 'GroupG' ) { foundG = true ; } item = item . getParent ( ) ; } if ( foundG ) { return 'column-group-g' ; } else if ( foundC ) { return 'column-group-c' ; } } function expandAll ( expand ) { const groupNames = [ 'GroupA' , 'GroupB' , 'GroupC' , 'GroupD' , 'GroupE' , 'GroupF' , 'GroupG' , ] ; groupNames . forEach ( groupId => { gridOptions . columnApi ! . setColumnGroupOpened ( groupId , expand ) ; } ) ; } document . addEventListener ( 'DOMContentLoaded' , ( ) => { const 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 ( data => gridOptions . api ! . setRowData ( data ) ) ; } ) ;