PrimeNG datatable setting rowStyleClass is setting the highlighted style

Viewed 4639

I'm using the rowStyleClass and a datatable like all the examples I've seen where, in the html, I have:

<p-dataTable [value]="group.data" sortField="displayName" sortMode="single" [rowStyleClass]="getSelected" 
        [rowTrackBy]="dataTrackBy" [responsive]="true">

and with a method:

getSelected(rowData: DataItem) {
    return rowData.selected ? 'selected-bg' : 'unselected-bg';
}

and css:

.unselected-bg {
    background-color: white
}

.selected-bg {
    background-color: #d9edf7;
}

The problem I'm having is that when I set the rowData.selected to true, the highlighted state gets set, as seen in this element copy:

<tr class="ui-datatable-odd ui-widget-content selected-bg ui-datatable-even ui-state-highlight" ng-reflect-klass="ui-widget-content selected-bg" ng-reflect-ng-class="[object Object]">

From there, the row turns the highlight color and setting the selected value back to false does not remove it. What am I doing wrong? I've also thought of using the rowStyleMap property, but I didn't really understand the documentation on how to use.

I'm using PrimeNG v. 4.1.2

Thanks!

1 Answers
Related