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>
I was having the exact same question, and came up with two solutions: a very simple one, and a slightly more complex solution:
Simple solution:
tr.ui-state-highlight {
pointer-events: none;
}
This will prevent any selected row from being clicked again, thereby preventing deselection.
However, this will also prevent double-clicking the row. So if you need double-clicking, use the following solution:
Slighty more complex solution:
Add the following attribute to the p-table: (onRowUnselect)="cancelUnselect($event)"
, and then in your component do:
private _selectedPurchaseOrder: any;
get selectedPurchaseOrder() {
return this._selectedPurchaseOrder;
}
set selectedPurchaseOrder(value: any) {
if (value) {
this._selectedPurchaseOrder = value;
} else {
this.purchaseOrdersList.selection = this._selectedPurchaseOrder;
}
}
cancelUnselect(event) {
this.purchaseOrdersList.selection = event.data;
}
This will prevent deselection of a row in all cases, and double-clicking is still possible.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With