P-Table Multiple selection using checkboxes [PrimeNG]

Question

I need help with "Multiple selection (click + shift)" I cannot understand how to make it works on checkboxes.

In the docs there is an example "Checkbox Selection" and note "Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".

And example from docs:

<p-table [value]="products" [(selection)]="selectedProducts3" 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>

But when I try to add this property 'selectionMode' it still doesn't work.

My new example:

<p-table [value]="products" [(selection)]="selectedProducts3" dataKey="code" responsiveLayout="scroll"
         selectionMode="multiple"> // <--------- Added line with selectionMode property
<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>

I think there is some silly mistake but I'm new to PrimeNG, so will be tanksful for any help.

Here is there demo.

Answer 1

You have to set metaKeySelection property as true to enable multiple selection with (click + shift)
And to make the rows selectable, use pSelectableRow and pSelectableRowIndex properties.

Here is the code after modifying it:

<p-table
    [value]="products"
    [(selection)]="selectedProducts3"
    dataKey="code"
    selectionMode="multiple"
    [metaKeySelection]="true"
  >
    <ng-template pTemplate="header">
      <tr>
        <th style="width: 3rem">
          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th>Code</th>
        <!-- others -->
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
      <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
        <td>
          <p-tableCheckbox
            [value]="product"
          ></p-tableCheckbox>
        </td>
        <td>{{ product.code }}</td>
        <!-- others -->
      </tr>
    </ng-template>
</p-table>