javascript - Changing Tabulator cell color through cell formatter is removing the value displayed - Stack Overflow

admin管理员组

文章数量:1404947

I'm trying to change the color of a tabulator cell based on the input of the cell. My first step was to just simply try and change the color of the cell. Run the following code, I see the following

function testFormatter(cell, formatterParams) {

    cell.getElement().style.backgroundColor = "#A6A6DF";

}

I'm trying to change the color of a tabulator cell based on the input of the cell. My first step was to just simply try and change the color of the cell. Run the following code, I see the following

function testFormatter(cell, formatterParams) {

    cell.getElement().style.backgroundColor = "#A6A6DF";

}

Here is what my table looks like after using the cell formatter

I apologize if I get back to you late. This is my first StackOverflow post and I don't know how long replies usually take to e in.

• javascript
• css
• dom
• tabulator

Share Improve this question Follow edited Jan 22, 2022 at 19:26 ouflak 2,5231010 gold badges4545 silver badges5252 bronze badges asked Jan 13, 2022 at 20:55 fanzofanzo 10111 silver badge55 bronze badges 2

• Is your text the same color as the background color? Check if the cell content exists with DevTools. – sean-7777 Commented Jan 14, 2022 at 0:18
• @sean-7777 thank you my dude for responding! That was not the issue, the documentation didn't mention it but custom cell formatters MUST return a value, so all i had to do was get the cell data and return it (see my solution below), thanks again for trying to help! – fanzo Commented Jan 14, 2022 at 2:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I figured out the solution. The documentation doesn't say it, but custom formatters HAVE to return a value in some way, shape or form.

So the code to rectify the issue would simply be the following:

function testFormatter(cell, formatterParams) {
    var bvid = cell.getValue();
    cell.getElement().style.backgroundColor = "#A6A6DF";
    return bvid
}

For all cells:

    formatter: function (cell) {
        let val = cell.getValue();
        let el = cell.getElement();

        el.style.backgroundColor = "#A6A6DF";

        return val;
    }

For a cell that math condition:

    formatter: function (cell) {
        let val = cell.getValue();
        let el = cell.getElement();

        if (val == "some text") {
            el.style.backgroundColor = "#A6A6DF";
        }

        return val;
    }

本文标签：