# Fill tables in the template ui using input messages

**URL:** <https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [3 October 2024 09:24 UTC](https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146 "2024-10-03T09:24:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Desmond-Zeh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/desmond-zeh/32/92216_2.png) [@Desmond-Zeh](https://discourse.nodered.org/u/Desmond-Zeh)\
**Post date:** [3 October 2024 09:24 UTC](https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146/1 "2024-10-03T09:24:58Z")

</div>

Hello Team!  
Please, I have a puzzle that requires your expertise. I've been working on a small project to supervise my Gensets here in the power house.  
Everything is moving well, but am stocked with the alarm system.  
I want to display incoming alarms in a table format using the template ui node. As seen here in the image below,

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/93bd34f344c1ad3941f0d3fc3528271629c9e5d7.png)  
I want a new row to be created every time there is an active alarm. I'll also like to differentiate between active and inactive alarms using background colors. For example, when an alarm is active, the background color is red and when that same alarm is inactive (after being mute by the operator), its background color changes to white.  
I don't want empty rows to be created as shown here below  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/e/ceb973647432cfa654faa1b8c163b8dc9e1721a1.png)  
I prefer only filled rows to be displayed as shown in the first image above.  
Please any help on this will be highly received.  
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:** [3 October 2024 11:18 UTC](https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146/2 "2024-10-03T11:18:32Z")

</div>

Hi, does this relate to Dashboard 1, Dashboard 2, http-in/http-response, or UIBUILDER?

---

<div class="post-metadata">

**Author:** ![Desmond-Zeh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/desmond-zeh/32/92216_2.png) [@Desmond-Zeh](https://discourse.nodered.org/u/Desmond-Zeh)\
**Post date:** [3 October 2024 12:26 UTC](https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146/3 "2024-10-03T12:26:06Z")

</div>

Dashboard 2

---

<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:** [3 October 2024 12:27 UTC](https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146/4 "2024-10-03T12:27:28Z")

</div>

Moved to the right category/tag

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [4 October 2024 11:58 UTC](https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146/5 "2024-10-04T11:58:11Z")

</div>

In VueJS (the library we use in UI Templates), you can use a `v-for` to loop over a given number of data points.

We have an example of a custom table [here](https://dashboard.flowfuse.com/user/template-examples.html#custom-data-tables) in our documentation, which should be a good starting point.

To handle new alarms, I'd look at "Option 2" [here](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#receiving-data) which shows how you can add a custom event listener, in your handler, you could append to a `this.myData` on the template, where the table then does a `v-for` over that `myData` variable.

---

<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:** [2 January 2025 11:58 UTC](https://discourse.nodered.org/t/fill-tables-in-the-template-ui-using-input-messages/92146/6 "2025-01-02T11:58:33Z")

</div>

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