Prime Table Selection

Selection

Single Selection

In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.

<p-table [value]="productsSingleSelection" selectionMode="single" [(selection)]="selectedSingleSelection" dataKey="code" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr [pSelectableRow]="product">
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

Multiple Selection with MetaKey

In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.

<p-table [value]="productsMultipleSelectionMeta" selectionMode="multiple" [(selection)]="selectedMultipleSelectionMeta" [metaKeySelection]="true" dataKey="code" responsiveLayout="scroll">
  <ng-template pTemplate="caption">
    Multiple Selection with MetaKey
  </ng-template>
  <ng-template pTemplate="header">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
    <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

Multiple Selection without MetaKey

<p-table [value]="productsMultipleSelectionNoMeta" selectionMode="multiple" [(selection)]="selectedMultipleSelectionNoMeta" styleClass="p-mt-5" dataKey="code">
  <ng-template pTemplate="caption">
    Multiple Selection without MetaKey
  </ng-template>
  <ng-template pTemplate="header">
    <tr [pSelectableRow]="product">
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
    <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

Column Selection

Selection using custom elements.

<p-toast></p-toast>
 
<p-table [value]="productsColumnSelection" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
      <th style="width:4rem"></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>
        <button type="button" pButton pRipple icon="pi pi-search" (click)="selectProduct(product)"></button>
      </td>
    </tr>
  </ng-template>
</p-table>

Selection Events

onRowSelect and onRowUnselect are available as selection events.

<p-toast></p-toast>
 
<p-table [value]="productsSelectionEvents" selectionMode="single" [(selection)]="selectedSelectionEvents" dataKey="code" responsiveLayout="scroll" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)">
  <ng-template pTemplate="header">
    <tr>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr [pSelectableRow]="product">
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

RadioButton Selection

Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".

<p-table [value]="productsRadioButtonSelection" [(selection)]="selectedRadioButtonSelection" dataKey="code" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th style="width: 3rem"></th>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>
        <p-tableRadioButton [value]="product"></p-tableRadioButton>
      </td>
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

Checkbox Selection

Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".

<p-table [value]="productsCheckboxSelection" [(selection)]="selectedCheckboxSelection" dataKey="code" responsiveLayout="scroll">
  <ng-template pTemplate="header">
    <tr>
      <th style="width: 3rem">
        <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
      </th>
      <th>Code</th>
      <th>Name</th>
      <th>Category</th>
      <th>Quantity</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-product>
    <tr>
      <td>
        <p-tableCheckbox [value]="product"></p-tableCheckbox>
      </td>
      <td>{ { product.code } }</td>
      <td>{ { product.name } }</td>
      <td>{ { product.category } }</td>
      <td>{ { product.quantity } }</td>
    </tr>
  </ng-template>
</p-table>

Filter Lazy