I have an ag-grid columnDef similar to this structure.
gridOptions.columnDefs = [
{
headerName: 'Athlete Details',
children: [
{ headerName: 'Name', field: 'name' },
{ headerName: 'Age', field: 'age' },
{ headerName: 'Country', field: 'country' }
]
},
{
headerName: 'Sports Results',
children: [
{ headerName: 'Sport', field: 'sport' },
{ headerName: 'Total', columnGroupShow: 'closed' },
{ headerName: 'Gold', columnGroupShow: 'open' },
{ headerName: 'Silver', columnGroupShow: 'open' },
{ headerName: 'Bronze', columnGroupShow: 'open' }
]
}
];
With this kind of data set, is it possible to group both sets using the name of the athlete?
I want to create a group that displays only the name of the Athlete with a count of total number of medals, and the Name item on the grid is expandable/collapsible which looks something like this.
When you segregate the columns into column groups, it is just a way of displaying the data but behind the scenes, that data is not disjoint but one chunk of array. So you can group any number of column groups by any one row. In this case 'Athlete'.
To achieve the result you want, a few tweaks to gridOptions and colDefs are required. I will post the relevant code with comments inline.
In template -
In component -
Here's how it looks