# How can I change the background of a cell or row in a table?

**URL:** https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483
**Category:** General
**Created:** [11 August 2023 07:07 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483 "2023-08-11T07:07:13Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [11 August 2023 07:07 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/1 "2023-08-11T07:07:13Z")

</div>

I've got this simple piece of code to send 'mac address' and a 'name' to a table.  
Is there a simple way to color the background of a cell ?

```auto
var lookupTable = {}
lookupTable = flow.get("mac_addresses");

let rec = {};
for (let key in lookupTable) {
    if (lookupTable.hasOwnProperty(key) && key.includes(searchTerm)) {
        rec = {"mac": key, "name": lookupTable[key]};
        arr.push(rec)
    }
}
msg.payload = arr;
return msg;

```

 ![table_row](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/955d51e70a5495b716295f7f7ba4be65e63d83af.png)

What I would like to do is highlight the rows where there is text that includes "List of..."

I know I can use Tabulator, just wondered if there is a simple way to include a color defintion on this line?

`rec = {"mac": key, "name": lookupTable[key]};`

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [11 August 2023 11:13 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/2 "2023-08-11T11:13:31Z")

</div>

David, this flow should show you how to do it. It is one of the example flows for node-red-node-ui-table

```auto
[{"id":"c292b5a561926c76","type":"inject","z":"7dd6e17128ddab20","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Name\":\"<b>Yokoi</b>\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]","payloadType":"json","x":210,"y":80,"wires":[["c32ad00ed2c1833b"]]}]

```

Here is the result:  
 ![Screenshot 2023-08-11 at 7.13.00 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/852b88dbb30d36a91471e47ad1e0832dac52b8bd.png)

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [11 August 2023 11:34 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/3 "2023-08-11T11:34:20Z")

</div>

Where does the Amazon / Yeelight text come from in "mac\_addresses" ?

I was just thinking you could add a property to show the device type, I do something similar. You could then use this to sort and filter the table 😀

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b29f60038521009efcda257ae668d73fa9e60de4.png)

---

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [11 August 2023 11:37 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/4 "2023-08-11T11:37:39Z")

</div>

I have this format that I read from a text file into a flow variable ...

```auto
var lookupTable = {
    "List of Yeelights":"List of Yeelights",
    "78-11-DC-AA-57-3E":"Yeelight lounge left",
    "78-11-DC-E1-28-12":"Yeelight lounge right",
    "78-11-DC-AA-3B-72":"Yeelight lounge jungle",
    "78-11-DC-A6-14-C8":"Yeelight lounge forest",
    "List of Amazon devices":"List of Amazon devices",
    "6C-56-97-E7-FD-DB":"Echo Dot (back) - Back bedroom",
    "6C-56-97-11-9D-56":"Echo Dot (front) - Front bedroom",

```

etc...

---

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [11 August 2023 11:41 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/5 "2023-08-11T11:41:11Z")

</div>

I've tried this in a template node...

```auto
<div>
    <h2 style="text-align: center;">MAC address lookup </h2>
    <table id="table" border="1">
        <tr>
            <th>MAC address</th>
            <th>Device Name</th>
        </tr>
        <tbody style="text-align: center">
            <tr ng-repeat="row in msg.payload">
                <td ng-if="row.mac.includes('List of')" , class="warning_red">{{row.mac}}</td>
                <td>{{row.name}}</td>
            </tr>
        </tbody>
    </table>

</div>

```

But for some reason the information appears in the wrong columns.  
 ![table_layout](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/57db1ef5817d3d925945319f02cf048e939743e0.png)

 ![mini_flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2dde4179811abd719be91e9f6ab394200bd558e4.png)

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [11 August 2023 11:54 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/6 "2023-08-11T11:54:34Z")

</div>

@dynamicdave  
The problem here is that when the if statement evaluates to false the cell is not displayed.

try this - untested

```auto
<td ng-style="{'background-color': row.mac.includes('List of') ? 'red' : 'transparent'}">{{row.mac}}</td>

```

---

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [11 August 2023 12:19 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/7 "2023-08-11T12:19:05Z")

</div>

Thanks - that works a treat.  
 ![table_correct](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/df759569bfc2ac6de3a783134954627d72080226.png)

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [11 August 2023 12:23 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/8 "2023-08-11T12:23:37Z")

</div>

I guess you could add that to the second cell also if you wanted it to go all the way accross the table 😉

---

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [11 August 2023 12:27 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/9 "2023-08-11T12:27:53Z")

</div>

You are too quick - I was just doing that.  
Thanks for your input.  
 ![table_blue](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/9/f967eb5dc4327973cd0b0f435c215ef4c5f4af0e.png)

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [11 August 2023 12:29 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/10 "2023-08-11T12:29:20Z")

</div>

Great, well if you're sorted I will go and get my lunch now 😉

---

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [11 August 2023 12:30 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/11 "2023-08-11T12:30:54Z")

</div>

A well deserved lunch. Thanks for your help.

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [11 August 2023 13:50 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/12 "2023-08-11T13:50:26Z")

</div>

Or apply the style to the whole row

```auto
<div>
    <h2 style="text-align: center;">MAC address lookup </h2>
    <table id="table" border="1">
        <tr>
            <th>MAC address</th>
            <th>Device Name</th>
        </tr>
        <tbody style="text-align: center">
            <tr style="{{(row.mac.includes('List of') ? 'background-color: red;' : '')}}" ng-repeat="row in msg.payload">
                <td>{{row.mac}}</td>
                <td>{{row.name}}</td>
            </tr>
        </tbody>
    </table>
</div>

```

---

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [11 August 2023 15:06 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/13 "2023-08-11T15:06:18Z")

</div>

Thanks to everyone for their useful suggestions.  
I'm really happy with the result now I've color-keyed it to my dashboard theme.

 ![color_keyed](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/8/08aaeaa9e4febb65d825f44a48a78b627c951537.png)

---

<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: [25 August 2023 15:07 UTC](https://discourse.nodered.org/t/how-can-i-change-the-background-of-a-cell-or-row-in-a-table/80483/14 "2023-08-25T15:07:16Z")

</div>

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