use openByDefault property, while declaring your column group object, resulting in these groups appearing as open by default..
here is an example code snippet.
//column group 'Performance'
headerName: 'Performance',
groupId: 'performance',
openByDefault : true, //this tells AG grid to expand the children by default
children: [
{
headerName: "Bank Balance", field: "bankBalance", width: 180, editable: true,
filter: 'winningsFilter',
valueFormatter: currencyFormatter,
type: 'numericColumn',
cellClassRules: {
'currencyCell': 'typeof x == "number"'
},
enableValue: true,
// colId: 'sf',
// valueGetter: '55',
// aggFunc: 'sum',
icons: {
sortAscending: '<i class="fa fa-sort-amount-up"/>',
sortDescending: '<i class="fa fa-sort-amount-down"/>'
}
},
{
colId: 'extraInfo1',
headerName: "Extra Info 1", columnGroupShow: 'open', width: 150, editable: false, filter: false,
sortable: false, suppressMenu: true, cellStyle: { "text-align": "right" },
cellRenderer: function() {
return 'Abra...';
}
},
{
colId: 'extraInfo2',
headerName: "Extra Info 2", columnGroupShow: 'open', width: 150, editable: false, filter: false,
sortable: false, suppressMenu: true, cellStyle: { "text-align": "left" },
cellRenderer: function() {
return '...cadabra!';
}
}
]
},