Tabulator cell formatting with background-color removes background for hover and selected

Issue

This is somewhat similar to Tabulator row formatting removes hover effect, while cell formatting doesn't – but not exactly.

In need to change the table colors dynamically (user specific). Therefore I override the Tabulator css classes which works fine. But when I use a cellFormater to change the cell’s backcolor neither the hover backcolor nor the selected backcolor works.

To be more clear (hopefully): I want to set the backcolor for frozen columns and cells with specific values. And I want to keep the selected backcolor and hover backcolor.

As I’m new to CSS I’d be grateful if someone could help me fix this.

I modified the Codesandbox from the other thread to demonstrate.
Green and yellow cells are colored with cellFormatter.
Lines 3 and 4 are selected and should be pink.
Hover backcolor should be black for the complete rows.
As you can see the problem also occurs for text colors.
Screenshot

Trying with these classes fails (!important was a desperate try):

.tabulator-row.tabulator-selected {
  background-color: rgb(250, 34, 203) !important;
}

.tabulator-row:hover {
  background-color: rgb(0, 0, 0) !important;
  color: rgb(0, 119, 255) !important;
  font-weight: 900;
}

 .tabulator-frozen:hover {
  background-color: rgb(238, 5, 5) !important;
  color: rgb(154, 195, 243) !important;
}

Sidenotes:

• setting .tabulator-row .tabulator-cell:hover works for the single cell
• setting .tabulator-row .tabulator-frozen:hover only works when the cursor is over a frozen cell

Solution

with the correct CSS this is really easy!

Appending .tabulator-cell to .tabulator-row.tabulator-selected and .tabulator-row.tabulator-selected does the trick!

Codesandbox

.tabulator-row.tabulator-selected .tabulator-cell{
    background-color: rgba(247, 101, 213, 0.8) !important;
}

.tabulator-row:hover {
    background-color: rgb(0, 0, 0) !important;
    color: rgb(0, 119, 255) !important;
    font-weight: 900;
}


.tabulator .tabulator-row.tabulator-selectable:hover .tabulator-cell{
    background-color: rgba(238, 5, 5, 1) !important;
    color: rgb(154, 195, 243);
}

Answered By – RealMalWare

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0