# Changing the color of table cell based on value

**URL:** <https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543>\
**Category:** General\
**Created:** [14 August 2020 03:46 UTC](https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543 "2020-08-14T03:46:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vangalvin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vangalvin/32/27213_2.png) [@vangalvin](https://discourse.nodered.org/u/vangalvin)\
**Post date:** [14 August 2020 03:46 UTC](https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543/1 "2020-08-14T03:46:41Z")

</div>

I have packets comming in via MQTT from several devices.  
msg.topic is changed to reflect the device's ID  
then the message is passed through the collector and only passed to the filter values have changed or another devices comes online.

The msg is then sent to a ui\_template with the following.

```auto
<table ng-app >
  <tr>
    <td>deviceName</td>
    <td>rssi</td>
    <td>loRaSNR</td>
    <td>battery</td>
    <td>Peak</td>
    <td>Avg</td>
    <td>Int</td>
    <td>alertLevel</td>
    <td>alertState</td>
  </tr>
  <tr ng-repeat="device in msg.payload" ng-class-odd="'odd'" ng-class-even="'even'" >
    <td>{{device.deviceName}}</td>
    <td>{{device.rxInfo.rssi}}</td>
    <td>{{device.rxInfo.loRaSNR}}</td>
    <td>{{device.object.battery/1000}}</td>
    <td>{{device.object.hotPixelValue*0.25}}</td>
    <td>{{device.object.rawAverage*0.25}}</td>
    <td>{{device.object.internalTemp*.0625}}</td>
   <td>{{device.object.alertLevel}}</td>
    <td ng-click="send({payload: device.deviceName})">{{device.object.alertState}}</td>
  </tr>
</table>

```

What i would like to do is alter the background colour of the alertLevel cell depending on the value.

My first thoughts were to add some javascript that watches the cell and changes it if the value is === 0, 1, 2 etc.. but that changes all the alert cells.  
I then added an ID tag based on the device ID. the issue there was that I was not able to get the device name in to the javascript in order for it to update the cell.

If anyone has any sugestions as to how best to do this I would appreciate it.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [14 August 2020 04:18 UTC](https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543/2 "2020-08-14T04:18:50Z")

</div>

Hi,  
maybe you can use Angular to add an appropriate class to the cell and then use css to style it

for example if **device.object.alertLevel \> 70** add red style :

```auto
...
<style>
.red-cell {
background-color: red;
}
.green-cell {
background-color: green;
}
</style>
...

<td ng-class="device.object.alertLevel > 70 ? 'red-cell' : 'green-cell'" >{{device.object.alertLevel}}</td>
...

```

---

<div class="post-metadata">

**Author:** ![Bobo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobo/32/8401_2.png) [@Bobo](https://discourse.nodered.org/u/Bobo)\
**Post date:** [14 August 2020 04:37 UTC](https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543/3 "2020-08-14T04:37:54Z")

</div>

Could you achieve your desired outcome using a ui\_table instead of a template?

---

<div class="post-metadata">

**Author:** ![vangalvin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vangalvin/32/27213_2.png) [@vangalvin](https://discourse.nodered.org/u/vangalvin)\
**Post date:** [14 August 2020 04:50 UTC](https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543/4 "2020-08-14T04:50:47Z")

</div>

That seemed to work perfetly thanks!

---

<div class="post-metadata">

**Author:** ![vangalvin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vangalvin/32/27213_2.png) [@vangalvin](https://discourse.nodered.org/u/vangalvin)\
**Post date:** [14 August 2020 04:52 UTC](https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543/5 "2020-08-14T04:52:47Z")

</div>

I will give that a try as well, currently the page has already been built using template. will however try it and see if it runs better than template

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [15 July 2022 13:14 UTC](https://discourse.nodered.org/t/changing-the-color-of-table-cell-based-on-value/31543/6 "2022-07-15T13:14:40Z")

</div>

Did you happen to get this working using a ui\_table node?