<p-table [value]="sales" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th rowspan="3">Product</th>
      <th colspan="4">Sale Rate</th>
    </tr>
    <tr>
      <th colspan="2">Sales</th>
      <th colspan="2">Profits</th>
    </tr>
    <tr>
      <th>Last Year</th>
      <th>This Year</th>
      <th>Last Year</th>
      <th>This Year</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-sale>
    <tr>
      <td>{ { sale.product } }</td>
      <td>{ { sale.lastYearSale } }%</td>
      <td>{ { sale.thisYearSale } }%</td>
      <td>{ { sale.lastYearProfit | currency: 'USD' } }</td>
      <td>{ { sale.thisYearProfit | currency: 'USD' } }</td>
    </tr>
  </ng-template>
  <ng-template pTemplate="footer">
    <tr>
      <td colspan="3" class="p-text-right">Totals</td>
      <td>{ { lastYearTotal | currency: 'USD' } }</td>
      <td>{ { thisYearTotal | currency: 'USD' } }</td>
    </tr>
  </ng-template>
</p-table>