Angular 2 Primeng Datatable- single (exclusive) row selection on click - primeng-datatable

Question

I am using a Primeng datatable to display editable entries from a database. When a row is clicked, a new component is displayed to allow editing of the associated data for the row. When a new row is clicked, the component will show the data for that row instead, and so on.
Obviously, this is exclusive- only one row can be selected at a time. I want to highlight the currently 'active' row in a different color, so when a new row is selected any previously hightlighted row should be reset to its default color.
At present I have the following in my template:
<p-dataTable [value]="rowData" [rowStyleClass]="highlightSelectedRow" [rowHover]="true" (onRowClick)="rowClick($event)">
<ng-template ngFor let-col [ngForOf]="cols">
<p-column [field]="col.field" [header]="col.header"></p-column>
</ng-template>
</p-dataTable>
...and in my component:
rowClick($event){
const rowData = $event.data;
rowData.selected = !rowData.selected;
// and do some other stuff...
}
highlightSelectedRow(rowData: any, rowIndex: number){
return (rowData.selected) ? 'selected' : '';
}
...CSS to style selected row:
.row.selected {
background-color: red;
}
This works insofar as highlighting the clicked row, but highlighted rows remain highlighted, and I'm wondering about the best way to reset them.
I guess I could loop through all the rows of data and find the row with selected property set to true and set it to false, but this seems a rather inefficient way of doing it, especially if I am dealing with many thousands of rows of data.
Am I missing a better, built-in way of doing this with Primeng?

Answer 1

This works insofar as highlighting the clicked row, but highlighted rows remain highlighted, and I'm wondering about the best way to reset them.
Create a class for unselected row such as
.row.unselected {
background-color: white;
}
and affect this class whenever you unselect a row
highlightSelectedRow(rowData: any, rowIndex: number){
return (rowData.selected) ? 'selected' : 'unselected';
}
See this simular SO question or Plunker for more details.

Answer 2

I have this scenario:
HTML:
<p-dataTable class="table table-responsive" #dealData [value]="dealList" sortMode="multiple"
[(selection)]="selectedDeals"
dataKey="hncId" scrollable="true" scrollHeight="540px" [rowStyleClass]="highlightSelectedRow"
styleClass="table" [paginator]="true" [rows]="100" [pageLinks]="5">
....
<p-column [header]="'Details' | translate" [style]="{'text-align': 'center'}">
<ng-template let-row="rowData" pTemplate type="body">
<button type="button" (click)="showDealDetail(row)" (mouseover)="row.selected = !row.selected" (mouseout)="row.selected = !row.selected" class="viewButton" pButton
[label]="'View' | translate"></button>
</ng-template>
</p-column>
...
</p-dataTable>
Component:
highlightSelectedRow(rowData: any, rowIndex: number) {
return (rowData.selected) ? 'rowSelected' : '';
}
CSS:
tr.rowSelected > td {
background-color: #ebf8ee !important;
}
This highlights one row at a time. Key is (mouseover) and (mouseout).