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

[dynamicdave]

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 ?

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;

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]};

[zenofmud]

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

[{"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:

[smcgann99]

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

[dynamicdave]

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

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

[dynamicdave]

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

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

[smcgann99]

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

try this - untested

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

[dynamicdave]

Thanks - that works a treat.

[smcgann99]

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

[dynamicdave]

You are too quick - I was just doing that.
Thanks for your input.

[smcgann99]

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

[dynamicdave]

A well deserved lunch. Thanks for your help.

[E1cid]

Or apply the style to the whole row

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

[dynamicdave]

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