Tabulator: Cell background colour based on dynamic input

[RussellJonesPersonal]

I'm struggling to resolve a formatting issue.

I have a table showing a column for "status", which can be any of 3 possible text values. My client would like to change the background colour of the cell (not the row) if the text value = "urgent". I've seen the example of how to change text colour, but I've been trying for 2 days to get it to work, with no success.

Apologies for not being a very good coder - I'm really a designer, out of his depth. I'd appreciate any help you could give. Thanks very much in advance.

Russ

[tomvanlier]

Hey,

I never tried that formatter so far, but from what I got out of the docu
you use the color formatter
then you feed colorcodes in the column as data

Now to know what the color is gonna be, you need to write a script (translation) of some sort. I take it the data comes from server? Then just change the urgent to eg red.

If you also need a text value, you will have to write a formatter ...

[olifolkerd]

Hey @RussellJonesPersonal

Thanks for getting in touch,

You would need to use a custom formatter function:

{title:"Status", field:"status", formatter:function(cell, formatterParams){
        //cell - the cell component
        //formatterParams - parameters set for the column

        var value = cell.getValue();

        if(value === "urgent"){
              cell.getElement().css({"background-colo"r:"#f00"});
        }

        return value;
    },
}

I hope that helps,

Cheers

Oli :)

[RussellJonesPersonal]

Splendid solution, thank you very much.
A couple of comments

• you need speech-marks around the CSS

  • any text in this cell is removed, so you need to add it back in again

  cell.getElement().css({"background-color":"#f00"}).text("Uregent");

Russ

[CrystalHuXPL]

One additional question is, my client want the cell in the same row, if that one (including input box) is onfocus, the css of this cell should be highlighted. Do you have any suggestion? Many thanks