Highlight selected row in primeng table without checking the checbox

Question

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.

score 0 · Answer 1 · edited Feb 17 '21 at 20:40

0

Add some class on the rows

<tr [pSelectableRow]="rowData" class="some-class">

Then in css do the trick

.some-class:hover {
  background-color: some color... or put any style you need
}

edited Feb 17 '21 at 20:40

Fabich

2,768
3
30
44

answered Feb 17 '21 at 11:14

SIbghat

281
3
5

This doesn't work, it still checks the checkbox and I want it to work on click, not hover. – Rajat Feb 17 '21 at 11:16
Put clickable area inside or add another hidden checkbox for that label, it can do the trick without clicking the checkbox only, but entire row – SIbghat Feb 18 '21 at 09:41
This isn't very clear to me. Can you update the Stackblitz example please? – Rajat Feb 18 '21 at 11:36

Rajat · Accepted Answer · 2022-05-01T10:46:16.577

0

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.

edited May 01 '22 at 10:46

answered Feb 22 '21 at 07:06

Rajat

617
3
9
16

It is not working on stackblitz – hamza saber Nov 30 '22 at 10:23
Working fine for me – Rajat Dec 12 '22 at 15:40
idea looks good...but how to handle rowSelect & rowUnselect ()? – Priya R Apr 10 '23 at 07:00

Highlight selected row in primeng table without checking the checbox

2 Answers2