Sort

<p-table [value]="productsSingleColumn">
  <ng-template pTemplate="caption">
    Single Column
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="code">Code
        <p-sortIcon field="code"></p-sortIcon>
      </th>
      <th pSortableColumn="name">Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th pSortableColumn="category">Category
        <p-sortIcon field="category"></p-sortIcon>
      </th>
      <th pSortableColumn="quantity">Quantity
        <p-sortIcon field="quantity"></p-sortIcon>
      </th>
      <th pSortableColumn="price">Price
        <p-sortIcon field="price"></p-sortIcon>
      </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>
      <td>{ { product.price | currency: "USD" } }</td>
    </tr>
  </ng-template>
</p-table>

<p-table [value]="productsMultipleColumns" sortMode="multiple">
  <ng-template pTemplate="caption">
    Multiple Columns
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="code">Code
        <p-sortIcon field="code"></p-sortIcon>
      </th>
      <th pSortableColumn="name">Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th pSortableColumn="category">Category
        <p-sortIcon field="category"></p-sortIcon>
      </th>
      <th pSortableColumn="quantity">Quantity
        <p-sortIcon field="quantity"></p-sortIcon>
      </th>
      <th pSortableColumn="price">Price
        <p-sortIcon field="price"></p-sortIcon>
      </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>
      <td>{ { product.price | currency: "USD" } }</td>
    </tr>
  </ng-template>
</p-table>

<p-table [value]="productsCustomSort" (sortFunction)="customSort($event)" [customSort]="true">
  <ng-template pTemplate="caption">
    Custom Sort
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th pSortableColumn="code">Code
        <p-sortIcon field="code"></p-sortIcon>
      </th>
      <th pSortableColumn="name">Name
        <p-sortIcon field="name"></p-sortIcon>
      </th>
      <th pSortableColumn="category">Category
        <p-sortIcon field="category"></p-sortIcon>
      </th>
      <th pSortableColumn="quantity">Quantity
        <p-sortIcon field="quantity"></p-sortIcon>
      </th>
      <th pSortableColumn="price">Price
        <p-sortIcon field="price"></p-sortIcon>
      </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>
      <td>{ { product.price | currency: "USD" } }</td>
    </tr>
  </ng-template>
</p-table>