<p-table [value]="productsFitMode" [resizableColumns]="true" styleClass="p-datatable-gridlines">
  <ng-template pTemplate="header">
    <tr>
      <th pResizableColumn>Code</th>
      <th pResizableColumn>Name</th>
      <th pResizableColumn>Category</th>
      <th pResizableColumn>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

<p-table [value]="productsExpandMode" [resizableColumns]="true" columnResizeMode="expand" styleClass="p-datatable-gridlines" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th pResizableColumn>Code</th>
      <th pResizableColumn>Name</th>
      <th pResizableColumn>Category</th>
      <th pResizableColumn>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

<p-table [value]="customersScrollable" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true" styleClass="p-datatable-gridlines" responsiveLayout="scroll">;
  <ng-template pTemplate="header">
    <tr>
      <th pResizableColumn>Name</th>
      <th pResizableColumn>Country</th>
      <th pResizableColumn>Company</th>
      <th pResizableColumn>Representative</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr>
      <td>{ { customer.name } }</td>
      <td>{ { customer.country.name } }</td>
      <td>{ { customer.company } }</td>
      <td>{ { customer.representative.name } }</td>
    </tr>
  </ng-template>
</p-table>

<p-table [value]="customersScrollableVariable" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true" styleClass="p-datatable-gridlines" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th pResizableColumn style="flex-basis:25%">Name</th>
      <th pResizableColumn style="flex-basis:25%">Country</th>
      <th pResizableColumn style="flex-basis:25%">Company</th>
      <th pResizableColumn style="flex-basis:25%">Representative</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-customer>
    <tr>
      <td style="flex-basis:25%">{ { customer.name } }</td>
      <td style="flex-basis:25%">{ { customer.country.name } }</td>
      <td style="flex-basis:25%">{ { customer.company } }</td>
      <td style="flex-basis:25%">{ { customer.representative.name } }</td>
    </tr>
  </ng-template>
</p-table>