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

**URL:** <https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517>\
**Category:** General\
**Created:** [14 February 2024 00:41 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517 "2024-02-14T00:41:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![RandyBryant](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@RandyBryant](https://discourse.nodered.org/u/RandyBryant)\
**Post date:** [14 February 2024 00:41 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/1 "2024-02-14T00:41:43Z")

</div>

I can change the background color using:

```auto
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.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [14 February 2024 00:51 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/2 "2024-02-14T00:51:20Z")

</div>

Welcome to the forum @RandyBryant

Perhaps this CSS will give you a clue...

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

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

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cffa3d07695df626e7058ef78690d98ef2890dde.png)

---

<div class="post-metadata">

**Author:** ![RandyBryant](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@RandyBryant](https://discourse.nodered.org/u/RandyBryant)\
**Post date:** [14 February 2024 15:36 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/3 "2024-02-14T15:36:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [14 February 2024 15:43 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/4 "2024-02-14T15:43:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RandyBryant](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@RandyBryant](https://discourse.nodered.org/u/RandyBryant)\
**Post date:** [14 February 2024 17:32 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/5 "2024-02-14T17:32:48Z")

</div>

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

THANKS!!!

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

```

---

<div class="post-metadata">

**Author:** ![RandyBryant](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@RandyBryant](https://discourse.nodered.org/u/RandyBryant)\
**Post date:** [15 February 2024 01:37 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/6 "2024-02-15T01:37:22Z")

</div>

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:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [17 February 2024 14:29 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/7 "2024-02-17T14:29:36Z")

</div>

According to the [W3C CSS ref docs](https://www.w3schools.com/CSSref/sel_attr_contain.php), it should be as simple as  
`.tabulator-cell[tabulator-field *= "ERROR:"]`

but I have not tested it.

---

<div class="post-metadata">

**Author:** ![RandyBryant](https://avatars.discourse-cdn.com/v4/letter/r/50afbb/32.png) [@RandyBryant](https://discourse.nodered.org/u/RandyBryant)\
**Post date:** [17 February 2024 19:16 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/8 "2024-02-17T19:16:17Z")

</div>

I tried that, no luck. Thanks for trying!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 May 2024 19:16 UTC](https://discourse.nodered.org/t/how-to-change-text-color-in-node-red-node-ui-table/85517/9 "2024-05-17T19:16:31Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.