Highlight selected row in primeng table without checking the checbox

UI Components for Angular
Post Reply
rajatkhare
Posts: 4
Joined: 10 Jun 2020, 09:53

17 Feb 2021, 13:13

I am using 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.

Code: Select all

<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.
https://stackblitz.com/edit/primeng-tab ... onent.html

rajatkhare
Posts: 4
Joined: 10 Jun 2020, 09:53

22 Feb 2021, 09:31

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.

Code: Select all

<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>
Update Stackblitz below:
https://stackblitz.com/edit/primeng-tab ... onent.html

PhilHuhn
Posts: 177
Joined: 19 Sep 2018, 02:52
Location: Ann Arbor, Michigan USA
Contact:

26 Jun 2021, 23:27

Hey:
I loved your solution. I think row index would also work, as follows:

Code: Select all

<ng-template pTemplate="body" let-rowData let-columns="columns" let-idx='rowIndex'>
	<tr class="some-class"  [class.ui-state-highlight]="idx === highlighted">
		<td>
			<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
		</td>
		<td *ngFor="let col of columns">
			<a (click)="highlighted = idx">	{{rowData[col.field]}}</a>
		</td>
	</tr>
</ng-template>
I also ended up using ng class [ngClass]="{'ui-state-highlight' : idx === highlight}", and had to change the CSS slightly:
.ui-state-highlight > td { background: #bae1ff; }
I am using row selection disable and that completely turns off row selection, but I still wanted to display a selected row, so thanks for the solution.

rajatkhare
Posts: 4
Joined: 10 Jun 2020, 09:53

27 Aug 2021, 13:57

Happy to see it worked for you.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 9 guests