Code: Select all
<p-table [value]="data" dataKey="code" editMode="row" responsiveLayout="scroll" rowGroupMode="subheader" groupRowsBy="child.code">
<ng-template pTemplate="header">
<tr>
<th colspan="2">Code</th>
<th>Name</th>
<th>Created</th>
<th>Modified</th>
<th style="width:10rem"></th>
</tr>
</ng-template>
<ng-template pTemplate="groupheader" let-data let-foo="editing" let-ri="rowIndex">
<tr pRowGroupHeader [pEditableRow]="indicator.indicatorType">
<td class="text-bold" colspan="5">
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="data.child.code">
</ng-template>
<ng-template pTemplate="output">
{{data.child.code}}
</ng-template>
</p-cellEditor>
</td>
<td style="text-align:center">
<button *ngIf="!foo" pButton pRipple pInitEditableRow type="button" icon="far fa-pencil" (click)="onRowEditInit(data.child)" class="p-button-rounded p-button-text"></button>
<button *ngIf="foo" pButton pRipple pSaveEditableRow type="button" icon="far fa-check" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
<button *ngIf="foo" pButton pRipple pCancelEditableRow type="button" icon="far fa-times" (click)="onRowEditCancel(data.child, ri)" class="p-button-rounded p-button-text p-button-warning"></button>
<button *ngIf="foo" pButton pRipple type="button" icon="far fa-trash" class="p-button-rounded p-button-text p-button-danger"></button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-data let-editing="editing" let-ri="rowIndex">
<tr [pEditableRow]="data">
<td></td>
<td>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="data.code">
</ng-template>
<ng-template pTemplate="output">
{{data.code}}
</ng-template>
</p-cellEditor>
</td>
<td>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="data.value">
</ng-template>
<ng-template pTemplate="output">
{{data.value}}
</ng-template>
</p-cellEditor>
</td>
<td>{{data.createdDateUtc | amFromUtc | amLocal | amDateFormat:'L LTS'}}</td>
<td>{{data.modifiedDateUtc | amFromUtc | amLocal | amDateFormat:'L LTS'}}</td>
<td style="text-align:center">
<button *ngIf="!editing" pButton pRipple pInitEditableRow type="button" icon="far fa-pencil" (click)="onRowEditInit(data)" class="p-button-rounded p-button-text"></button>
<button *ngIf="editing" pButton pRipple pSaveEditableRow type="button" icon="far fa-check" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
<button *ngIf="editing" pButton pRipple pCancelEditableRow type="button" icon="far fa-times" class="p-button-rounded p-button-text p-button-warning"></button>
<button *ngIf="editing" pButton pRipple type="button" icon="far fa-trash" class="p-button-rounded p-button-text p-button-danger"></button>
</td>
</tr>
</ng-template>
</p-table>