<p-table [value]="productsCellEditing" dataKey="id" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.code">
          </ng-template>
          <ng-template pTemplate="output">
            { { product.code } }
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.name" required>
          </ng-template>
          <ng-template pTemplate="output">
            { { product.name } }
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText [(ngModel)]="product.inventoryStatus">
          </ng-template>
          <ng-template pTemplate="output">
            { { product.inventoryStatus } }
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.price">
          </ng-template>
          <ng-template pTemplate="output">
            { { product.price | currency: "USD" } }
          </ng-template>
        </p-cellEditor>
      </td>
    </tr>
  </ng-template>
</p-table>

<p-table [value]="productsRowEditing" dataKey="id" editMode="row" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
      <th style="width:8rem"></th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product let-editing="editing" let-ri="rowIndex">
    <tr [pEditableRow]="product">
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.code">
          </ng-template>
          <ng-template pTemplate="output">
            { { product.code } }
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.name" required>
          </ng-template>
          <ng-template pTemplate="output">
            { { product.name } }
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <p-dropdown [options]="statuses" [(ngModel)]="product.inventoryStatus" [style]="{"width":"100%"}"></p-dropdown>
          </ng-template>
          <ng-template pTemplate="output">
            { { product.inventoryStatus } }
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="product.price">
          </ng-template>
          <ng-template pTemplate="output">
            { { product.price | currency: "USD" } }
          </ng-template>
        </p-cellEditor>
      </td>
      <td style="text-align:center">
        <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button>
        <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
        <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
      </td>
    </tr>
  </ng-template>
</p-table>