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:
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.
<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.
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:
There is a groupField
that you can change from true to false in the tablegrouping.component.ts
to check how it works.