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
rowFormatter: row => { row.getCells()[3].getElement().style.backgroundColor = "red"}