Here is a snippet of code that includes an Angular component with an ag-Grid:
@Component({
selector: 'my-app',
template:
`<ag-grid-angular
style="height: 100%;"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[animateRows]="true"
[rowData]="rowData"
(gridReady)="onGridReady($event)">
</ag-grid-angular>`,
})
export class AppComponent {
public columnDefs: ColDef[] = [
{ field: 'school', rowGroup: true, hide: true },
{ field: 'subject', rowGroup: true, hide: true },
{ field: 'branch' },
{ field: 'performance', aggFunc: 'avg' }
];
public rowData: any[];
onGridReady(params) {
this.rowData = [
{
school: 'SomeSchool',
subject: 'Music',
branch: undefined,
performance: 4
},
{
school: 'SomeSchool',
subject: 'Math',
branch: 'Algebra',
performance: 5
},
{
school: 'SomeSchool',
subject: 'Math',
branch: 'Geometry',
performance: 4.5
}
];
}
}
The issue arises when trying to display the Music item in the grid without branches, only showing the performance. The question posed is whether there is a way to disable expanding for rows where there is nothing to group, such as in the case of displaying Music - Performance in one row.