<p-table responsiveLayout="scroll" [value]="productsResponsiveScroll">
  <ng-template pTemplate="caption">
    Scroll
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th>Name </th>
      <th>Price</th>
      <th>Category</th>
      <th>Quantity</th>
      <th>Status</th>
      <th>Reviews</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product let-columns="columns">
    <tr>
      <td>{ { product.name } }</td>
      <td>{ { product.price | currency:'USD' } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
      <td><span [class]="'product-badge status-' + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : '')">{ { product.inventoryStatus } }</span></td>
      <td>
        <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
      </td>
    </tr>
  </ng-template>
</p-table>

<p-table responsiveLayout="stack" [value]="productsResponsiveStack">
  <ng-template pTemplate="caption">
    Stack
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th>Name </th>
      <th>Price</th>
      <th>Category</th>
      <th>Quantity</th>
      <th>Status</th>
      <th>Reviews</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product let-columns="columns">
    <tr>
      <td><span class="p-column-title">Name</span>{ { product.name } }</td>
      <td><span class="p-column-title">Price</span>{ { product.price | currency:"USD" } }</td>
      <td><span class="p-column-title">Category</span>{ { product.category } }</td>
      <td><span class="p-column-title">Quantity</span>{ { product.quantity } }</td>
      <td><span class="p-column-title">Status</span><span [class]=""product-badge status-" + (product.inventoryStatus ? product.inventoryStatus.toLowerCase() : "")">{ { product.inventoryStatus } }</span></td>
      <td><span class="p-column-title">Reviews</span>
        <p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
      </td>
    </tr>
  </ng-template>
</p-table>