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:
.tabulator-row .tabulator-cell:hover works for the single cell.tabulator-row .tabulator-frozen:hover only works when the cursor is over a frozen cellI found a solution that seems a bit hacky to me, yet everything works as expected now. (Except for frozen columns on the right) On selection and mouseover I set all cell's backcolors to transparent and backup the computed backcolor. On deselect and mouseout I reset the backcolors to the backuped colors.
I'm aware of that these style changes override the css what surely is the reason that the right frozen columns are gray on selection and hovering...
I added handlers for
function backupColorAndSetTransparent(cellEl) {
let cellCol = window
.getComputedStyle(cellEl, null)
.getPropertyValue("background-color");
if (cellCol && cellCol !== "rgba(0, 0, 0, 0)") {
var attribute = document.createAttribute("backupCellBackColor");
attribute.value = window
.getComputedStyle(cellEl, null)
.getPropertyValue("background-color");
cellEl.setAttributeNode(attribute);
}
cellEl.style.backgroundColor = "rgba(0, 0, 0, 0)";
}
var table = new Tabulator("#example-table", {
data: data,
selectable: true,
rowMouseOver: function (e, row) {
row.getCells().forEach((cell) => {
let cellEl = cell.getElement();
backupColorAndSetTransparent(cellEl);
});
},
rowMouseOut: function (e, row) {
row.getCells().forEach((cell) => {
let cellEl = cell.getElement();
if (cellEl.getAttribute("backupCellBackColor") && !row.isSelected()) {
cellEl.style.backgroundColor = cellEl.getAttribute(
"backupCellBackColor"
);
}
if (!row.isSelected()) {
cellEl.removeAttribute("backupCellBackColor");
}
});
},
rowDeselected: function (row) {
row.getCells().forEach((cell) => {
let cellEl = cell.getElement();
if (cellEl.getAttribute("backupCellBackColor")) {
cellEl.style.backgroundColor = cellEl.getAttribute(
"backupCellBackColor"
);
}
});
},
rowSelected: function (row) {
row.getCells().forEach((cell) => {
let cellEl = cell.getElement();
backupColorAndSetTransparent(cellEl);
});
},
/* ...*/
}
with the correct CSS this is really easy!
Appending .tabulator-cell to .tabulator-row.tabulator-selected and .tabulator-row.tabulator-selected does the trick!
.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);
}