PrimeNg TurboTable - Conditional Row-grouping

Question

I am using PrimeNG's TurboTable (p-table)

I have a groupField parameter, which can either be null or have a value corresponding to a column header. This param's value can be changed dynamically at any time. The expected behaviour is that when groupField==null a normal table is rendered but when 'groupField==` then the rows group as per this value, as seen here.

I want to implement rowgrouping as described here where the table responds to the changes in the groupField parameter.

What I have tried:

1. Make two ng-templates with pTemplate="body", something like this.

<ng-template pTemplate="body" *ngIf="groupField==null">
    ...
<ng-template>
<ng-template pTemplate="body" *ngIf="groupField!=null">
    ...
<ng-template>
<ng-template pTemplate="rowexpansion" *ngIf="groupField!=null">
    ...
<ng-template>

This does not work as I suspect that p-table forms its config when it first renders and subsequently only updates data.

2. Make two different <p-table>s, one with rowgrouping and the other without, with ngIf to control which one shows at a given time. This works but does not make sense to me as I should be able to do this in one table, as I was able to in the older <p-datatable>.

What I would like is to have ONE table handle all of this.

Answer 1

You can add an <ng-container> inside your <p-template> so it would look something like this:

<ng-template pTemplate="body">
   <ng-container *ngIf="groupField==null">
    ...
   </ng-container>
   <ng-container *ngIf="groupField!=null">
    ...
   </ng-container>
<ng-template>
<ng-template pTemplate="rowexpansion" *ngIf="groupField!=null">
    ...
<ng-template>

You can check it working here:

https://stackblitz.com/edit/angular-primeng-stack-55706959?file=src/app/ils-tree/ils-tree.component.ts

There is a groupField that you can change from true to false in the tablegrouping.component.ts to check how it works.