0

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
1
  • Just noticed, that the behaviour ist the same if I set a cell backcolor via rowFormatter: row => { row.getCells()[3].getElement().style.backgroundColor = "red"} Sep 16, 2021 at 14:18

2 Answers 2

1

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);
}

0

I 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...

Codesandbox with changes

I added handlers for

  • rowMouseOver --> save background color to cell attribute and set to transparent
  • rowSelected --> also save background color to cell attribute and set to transparent
  • rowMouseOut --> set background color from attribute if row is not selected and remove backup attribute
  • rowDeselected --> set background color from attribute

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);
        });
    },

    /* ...*/

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.