# Conditional formatting of a table

**URL:** <https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252>\
**Category:** General\
**Created:** [23 March 2022 15:32 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252 "2022-03-23T15:32:55Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![QGIO](https://avatars.discourse-cdn.com/v4/letter/q/f17d59/32.png) [@QGIO](https://discourse.nodered.org/u/QGIO)\
**Post date:** [23 March 2022 15:32 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/1 "2022-03-23T15:32:55Z")

</div>

I would like to colour each cell of a table column on the base of some conditions.  
The field of interest is a date; I have three conditions and so three possible colours to assign.  
I want to assign one of the three colours to the cell of the table according to the verified condition.

Ex. Red if rowdata\> date()  
Orange if rowdate is 5 days before today date.  
Green if rowdate is more than 5 days with respect to the today date.

Thanks for you suggestion and help

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 March 2022 18:07 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/2 "2022-03-23T18:07:09Z")

</div>

You need to specify how you are showing the table.

---

<div class="post-metadata">

**Author:** ![QGIO](https://avatars.discourse-cdn.com/v4/letter/q/f17d59/32.png) [@QGIO](https://discourse.nodered.org/u/QGIO)\
**Post date:** [24 March 2022 07:46 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/3 "2022-03-24T07:46:14Z")

</div>

This is the header of the table:

 ![immagine](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/8591db1d1e4c3e500e9728e4bdd81fcbeac63107.png)

My first option is to colour the field 'Data Scadenza' according to some conditions.  
If this is not possible, I can add the column Colour Status and colour this cell according to the conditions that must be verified.

Thanks

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 March 2022 09:30 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/4 "2022-03-24T09:30:33Z")

</div>

Yes, but is this using Dashboard? the ui\_table node? ... With Node-RED, there are many ways to provide UI's.

---

<div class="post-metadata">

**Author:** ![QGIO](https://avatars.discourse-cdn.com/v4/letter/q/f17d59/32.png) [@QGIO](https://discourse.nodered.org/u/QGIO)\
**Post date:** [24 March 2022 09:32 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/5 "2022-03-24T09:32:40Z")

</div>

Yes, I'm using this table node  
 ![immagine](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/f/3f4927038f09d610c9d33a516b4b0986f3c0c9c7.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 March 2022 10:00 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/6 "2022-03-24T10:00:04Z")

</div>

It is best, when looking for help in the forum, to be explicit as to what node you are using. There are thousands and it can be hard for people to know.

> **[node-red-node-ui-table](https://flows.nodered.org/node/node-red-node-ui-table)**
>
> Table UI widget node for Node-RED Dashboard

The information on that node tells you what you need in order to be able to style it further.

---

<div class="post-metadata">

**Author:** ![QGIO](https://avatars.discourse-cdn.com/v4/letter/q/f17d59/32.png) [@QGIO](https://discourse.nodered.org/u/QGIO)\
**Post date:** [24 March 2022 10:20 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/7 "2022-03-24T10:20:32Z")

</div>

Thanks for suggestion.  
I have already found this link, but I was looking for somenthing more practical, some specific example on how to insert a conditional formatting on the column data according to some conditions.

Thanks,

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 March 2022 11:13 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/8 "2022-03-24T11:13:47Z")

</div>

You will find examples on the website for the underlying table tool. I don't use this myself so I cant be more specific.

---

<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:** [24 March 2022 20:15 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/9 "2022-03-24T20:15:07Z")

</div>

Look in the projects section of the forum for my ‘ETPhone home’ project. In it I change the color of cells based on data in one of the columns of the row.

---

<div class="post-metadata">

**Author:** ![QGIO](https://avatars.discourse-cdn.com/v4/letter/q/f17d59/32.png) [@QGIO](https://discourse.nodered.org/u/QGIO)\
**Post date:** [25 March 2022 07:17 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/10 "2022-03-25T07:17:22Z")

</div>

Do you mean this project?

# ET-Display-Home V1.0.2

---

<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:** [25 March 2022 08:39 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/11 "2022-03-25T08:39:42Z")

</div>

Yes, sorry I was out and about when I posted and forgot to check it when I got back.

---

<div class="post-metadata">

**Author:** ![QGIO](https://avatars.discourse-cdn.com/v4/letter/q/f17d59/32.png) [@QGIO](https://discourse.nodered.org/u/QGIO)\
**Post date:** [25 March 2022 08:45 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/12 "2022-03-25T08:45:06Z")

</div>

Thanks Zenofmud,

could you indicate me in which flow? It is a big project, so maybe you can address me where to have a look to find it easily.

many thanks

---

<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:** [25 March 2022 10:53 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/13 "2022-03-25T10:53:21Z")

</div>

Look at the 'Dashboard' tab and the `ui-template` node labeled 'ESP8266 configured devices'

---

<div class="post-metadata">

**Author:** ![QGIO](https://avatars.discourse-cdn.com/v4/letter/q/f17d59/32.png) [@QGIO](https://discourse.nodered.org/u/QGIO)\
**Post date:** [4 April 2022 15:09 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/14 "2022-04-04T15:09:11Z")

</div>

Hi zenofmud,  
I'm following your example for background colour, very useful.  
In one column of my table, I put an expiration date.  
I need to compare this date with respect to the today date. Is it possible to insert a condition based on a date?  
(for example something similar to: if = x.DATASCADENZA \< date() -\> assign class="warning\_green")

If I compare with an exact date I have seen that works (" td ng-if="x.DATASCADENZA ='2022-04-03' " class="warning\_green" \>{{x.DATASCADENZA}}"

Could you help me to solve this?

Thank in advance

---

<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:** [3 June 2022 15:09 UTC](https://discourse.nodered.org/t/conditional-formatting-of-a-table/60252/15 "2022-06-03T15:09:27Z")

</div>

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