How to change the color when the row is unselected in the primeNg p-table?

Question

I am trying to change the color of the row to a different color upon row unselect. This feature is something that is provided by the primeng theme. I am trying to override it to customize it. Is there anyway I can change the row color when it is unselected and then keep the color until that row is selected again? I am working with single selection p-table here.

I tried this to override:

data-table p-table .ui-table.ui-table-hoverable-rows .ui-table-tbody > tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
   background-color: #2F96B4 !important;
}

But this would only change the color on hover over.

And this is what i have for when the row is selected:

data-table p-table .ui-table .ui-table-tbody > tr.ui-state-highlight {
   background-color: #007ad9;
   color: #ffffff;
}

Muhammed Albarmavi · Accepted Answer · 2020-09-09T14:41:01.040

this css style will change row and select row color style.css


p-table .ui-table-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected) {
   background-color:orange !important;
}

p-table .ui-table .ui-table-tbody > tr.ui-state-highlight {
   background-color:green !important;
   color: #ffffff;
}

you can use custom class if you don't want this style to effect all component


.light.ui-table .ui-table-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected) {
   background-color:lightblue !important;
}

.light.ui-table .ui-table-tbody > tr.ui-state-highlight {
   background-color:lightyellow !important;
   color: #555 !important;
}

demo

How to change the color when the row is unselected in the primeNg p-table?

1 Answers1