How to change text color in node-red-node-ui-table

General
1

I can change the background color using:

message.ui_control = {
    tabulator: {
        rowFormatter: (function (row) {
            row.getElement().style.backgroundColor = 'red';
            //row.getElement().style.color = 'red';
        }).toString(),
    }
};

But I am unable to change the test color. I am using the dark style on the dash board.

2

Welcome to the forum @RandyBryant

Perhaps this CSS will give you a clue...

You can change the colour of an individual column like this:

.tabulator .tabulator-row .tabulator-cell[tabulator-field="Destination"]{
    color: rgb(254, 210, 0);
}

image
image971×306 23.8 KB

3

I have limit knowledge of using css. But the code I posted uses the row formatter to change the backgroundcolr, and that works. Elsewhere I found that using color instead of backgroundcolor should also work. It doesn't for me. Should I be able to use the ui_control to also change the text color?

4

Sorry I don't know about using ui-control the way you have, I just thought the CSS selector I use might give a clue. It's a different approach.

5

I got it to work!. I put this in a CSS node:

THANKS!!!

<style>
  .tabulator .tabulator-row .tabulator-cell[tabulator-field="Error Line"] {
    color: rgb(255, 0, 0);
  }
</style>
6

So another CSS question, can I use a similar syntax/method to test if a cell contains a certain string. The example below is working for the first part (tabulator-field="Error Line"}. I want to now check the cell for a sub string

Sort of like:

<style>
  .tabulator .tabulator-row .tabulator-cell[tabulator-field="Error Line"] {
    color: rgb(255, 0, 0);
  }
  .tabulator .tabulator-row .tabulator-cell[tabulator-field:contains("ERROR:")] {
    color: rgb(255, 0, 0);
  }
</style>
7

According to the W3C CSS ref docs, it should be as simple as
.tabulator-cell[tabulator-field *= "ERROR:"]

but I have not tested it.

8

I tried that, no luck. Thanks for trying!