CODEWITHSUNDEEP
javascriptcsstabulator
RealMalWare
RealMalWare

Reputation: 21

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

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:

Upvotes: 0

Views: 3434

Answers (2)

RealMalWare
RealMalWare

Reputation: 21

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

Upvotes: 2

RealMalWare
RealMalWare

Reputation: 21

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

    /* ...*/

}

Upvotes: 0

Related Questions