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

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).