<p-table [value]="productsTemplating" responsiveLayout="scroll">
  <ng-template pTemplate="caption">
    <div class="p-d-flex p-ai-center p-jc-between">
      Products
      <p-button icon="pi pi-refresh"></p-button>
    </div>
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Category</th>
      <th>Reviews</th>
      <th>Status</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{ { product.name } }</td>
      <td>{ { product.price | currency:'USD' } }</td>
      <td>{ { product.category } }</td>
      <td>
        <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
      </td>
      <td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{ { product.inventoryStatus } }</span></td>
    </tr>
  </ng-template>
  <ng-template pTemplate="summary">
    <div class="p-d-flex p-ai-center p-jc-between">
      In total there are { { productsTemplating ? productsTemplating.length : 0 } } products.
    </div>
  </ng-template>
</p-table>