I have PrimeNG datatable with 10 columns. Last column contains images. On click of the image I have to highlight the row.
If I add selection mode 'single' in the datatable, on click of row it highlights the row. I do not want that. I want it to be highlighted only when the user clicks on the image at the last column.
<p-column>
<ng-template let-row="rowData" pTemplate type="body">
<img src="assets/images/info_icon.jpg" style="height:20px;width:20px">
</ng-template>
<p-column>
What you have to do is to set a
click
event on your image that will toggle a property of the associated row. Let's call that propertyisSelected
.Your HTML code for your image column becomes
Then add the
rowStyleClass
PrimeNG property to yourp-dataTable
which will call a function, let's name itisRowSelected
The
isRowSelected
function will return a class name, depending on if you selected or unselected the rowFinally, create these two CSS classes :
rowSelected
androwUnselected
Here is a working Plunker