Search code examples
angulartypescriptprimengprimeng-turbotable

How to disable the option to deselect a row on TurboTable component?


So I have a table with data that gets populated throughout the use of the application. When a user clicks on a row, the row is highlighted and that row's data is populated beneath the table. I just want to disable the option of the user to deselect a row (this is done by clicking on the row again).

The code:

<p-table #purchaseOrdersList
         [value]="purchaseOrders"
         selectionMode="single"
         [(selection)]="selectedPurchaseOrder"
         (onRowSelect)="onRowSelect($event)"
          >

<ng-template pTemplate="header">
    <tr>
      <th class="supplier-number-col">Supplier Number</th>
      <th class="supplier-name-col">Supplier Name</th>
      <th class="supplier-phone-col">Supplier Phone</th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-purchaseOrder>
    <tr [pSelectableRow]="selectedRow">
      <td>{{purchaseOrder.supplierNumber}}</td>
      <td>{{purchaseOrder.supplierName}}</td>
      <td>{{purchaseOrder.supplierPhoneNumber}}</td>
    </tr>
  </ng-template>

</p-table>

Solution

  • This can now be solved through metaKeySelection option. Setting it to true will allow row deselection only when the meta key is held.