How to disable grouping in the Angular Grid if there is nothing to group?

Question

There is the following code:

@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: 'perfomance', aggFunc: 'avg' }
  ];

  public rowData: any[];

  onGridReady(params) {
    this.rowData = [
          {
            school: 'SomeSchool',
            subject: 'Music',
            branch: undefined,
            perfomance: 4
          },
          {
            school: 'SomeSchool',
            subject: 'Math',
            branch: 'Algebra',
            perfomance: 5
          },
          {
            school: 'SomeSchool',
            subject: 'Math',
            branch: 'Geometry',
            perfomance: 4.5
          }
        ];
  }
}

And such code is rendered to the grid so that if you open the Music item, it's just an empty string without branches, only with perfomance. And my question is, is there any way to make it so that if, as for Music, there is nothing to group, disable expanding for this row and show it only as Music - Perfomance in one row?

Answer 1

According to the documentation, you can conditionally disable grouping for a cell if you define cellRendererSelector for autoGroupColumnDef. I made it so that we use the default cell renderer if params.node.childrenMapped == null