I am using primeng p-table
along with p-checkbox
. I want to be able to highlight the clicked row (or the row content) without checking the checkbox. The Checkbox should be checked on clicking the checkbox itself, not the row.
I tried using [pSelectableRow]
but it also checks the checkbox in addition to highlighting it.
<p-table [columns]="cols" [value]="brands" [(selection)]="selected" dataKey="vin">
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 3em">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
What should I do to only highlight the clicked row, not check the checkbox? I have created a Stackblitz sample.
I was able to achieve this by maintaining a variable highlight
that gets the clicked row value and assigning the highlight class only to rows where this value is equal to that of the clicked row.
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr class="some-class" [class.ui-state-highlight]="rowData === highlighted">
<td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">
<a (click)="highlighted = rowData"> {{rowData[col.field]}}</a>
</td>
</tr>
</ng-template>
Updated Stackblitz here.