# Nested table in node red

**URL:** <https://discourse.nodered.org/t/nested-table-in-node-red/76894>\
**Category:** Dashboard\
**Created:** [24 March 2023 08:26 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894 "2023-03-24T08:26:27Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jhankhana](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@Jhankhana](https://discourse.nodered.org/u/Jhankhana)\
**Post date:** [24 March 2023 08:26 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/1 "2023-03-24T08:26:27Z")

</div>

Hello there,  
How to create nested table?  
I have tried with template node using html but then how to pass on the value coming through mag.payload?  
is there any other way to create nested table?

Please help me with this!

---

<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 2023 15:49 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/2 "2023-03-24T15:49:22Z")

</div>

You haven't said how you are outputting the table. Is it to Dashboard? Or some other custom output?

uibuilder, for example, will allow nested tables but it isn't quite as easy as the ui\_table node in Dashboard (which, as far as I know, does not support nested tables - though I may be wrong - you might need to look up the docs for the underlying library that is used).

With uibuilder's zero-code nodes, you would have to create the main table and then have a second node that inserted the nested table into the specific cell you wanted.

You would not be able to create a nested table in each row/cell with the zero-code tools. To do that, you would need to get your head around the low-code data-driven outputs (you could use the zero-code `uib-element` node to get you started though).

---

<div class="post-metadata">

**Author:** ![Jhankhana](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@Jhankhana](https://discourse.nodered.org/u/Jhankhana)\
**Post date:** [25 March 2023 06:07 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/3 "2023-03-25T06:07:37Z")

</div>

It's on the dashboard. here I am attaching output table.

 ![Screenshot (238)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/3/730f1dd8bd04f019a88842ee1834afe01a8a9720.png)

Index Numbers are written in the cell.

Edit:  
I have used html in template node.

```auto
[{"id":"1a0756f6.37b799","type":"ui_template","z":"d79ec1d.70ac04","group":"5d119f7c.dc0ec","name":"","order":0,"width":0,"singleBrowser":false,"height":0,"format":"<!DOCTYPE html>\n<html>\n\n<body>\n\n\t<table border=\"2\" bordercolor=\"black\">\n\t\t\n\t\t<tr>\n <td>1</td>\n <td>Name Of Unit</td>\n <td>PRIMA AUTOMATION PVT. LTD. [INDIA]</td>\n </tr>\n\n <tr>\n <td>2</td>\n <td>Address</td>\n <td>PLOT NO :- 793, RAKANPUR ,TAL.KALOL,DIST GANDHINAGAR ,PIN 382721</td>\n </tr>\n\n <tr>\n <td>3</td>\n <td>Name of Responsible Person & Contact No.</td>\n <td>MR. PRAKASH MISTRY , CONTACT NO. 9898194552</td>\n </tr>\n\n <tr>\n <td>4</td>\n <td>GPCB ID NO.CCA Status</td>\n <td>CC& A NO :- AWH - 31941 ,dated 17/03/2009 ,Valid till 17/12/2013</td>\n </tr>\n\n\t\t\n\t\t<tr>\n\t\t\t<td>5</td>\n\t\t\t<td>Name & Quantity Of Product</td>\n\t\t\t<td>\n\t\t\t\t<table border=\"1\" bordercolor=\"black\">\n\t\t\t\t\t<tr>\n\t\t\t\t\t <td>\" \"</td>\n\t\t\t\t\t <td>\" \"</td>\n\t\t\t\t\t</tr>\n\t\t\t\t\t<tr>\n\t\t\t\t\t <td>Sr. No. </td>\n\t\t\t\t\t\t<td>Product </td>\n\t\t\t\t\t</tr>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td>1 </td>\n\t\t\t\t\t\t<td>Enclosure(</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</table>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t \t<table border=\"1\" bordercolor=\"black\">\n\t\t\t \t <tr>\n\t\t\t \t <td>Consent Qty.</td>\n\t\t\t \t </tr>\n\t\t\t \t <tr>\n\t\t\t \t <td>No/Month</td>\n\t\t\t \t <td>MT/Month</td>\n\t\t\t \t </tr>\n\t\t\t \t <tr>\n\t\t\t \t <td>1200</td>\n\t\t\t \t <td>80</td>\n\t\t\t \t </tr>\n\t\t\t \t </table>\n\t\t\t</td>\n\t\t</tr>\n\n\t</table>\n</body>\n\n</html>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":660,"y":480,"wires":[[]],"_type":"node"},{"id":"5d119f7c.dc0ec","type":"ui_group","z":"","name":"Default","tab":"33aa3e02.5dfc42","order":1,"disp":true,"width":"21","collapse":false,"_type":"config"},{"id":"33aa3e02.5dfc42","type":"ui_tab","z":"","name":"Home","icon":"dashboard","publicAccess":"true","fmAccess":"none","fmAccessType":"private","assetType":"","asset":"","assetName":"","assetText":"","image":"","description":"","hideTitleBar":false,"_type":"config"}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 March 2023 09:11 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/4 "2023-03-25T09:11:24Z")

</div>

I'd go for grid layout. Nothing too complicated and easy to find support from web.

```auto
[{"id":"767b5429298c1692","type":"ui_template","z":"09deee63c1b960f7","group":"40c7539325a10955","name":"Grid table","order":0,"width":"10","height":"3","format":"<style>\n .grid-container{\n position: relative;\n }\n .gr-table{\n display:grid;\n grid-template-columns:2em 3fr 2fr 2fr 3fr \n }\n .gr-cell{\n background-color: rgb(114 114 114);\n border: 1px solid rgba(0, 0, 0, 0.8);\n padding: 0.5em;\n font-size: 16px;\n text-align: center;\n }\n .gr-table #cell_2{\n grid-column: 3 / span 2;\n }\n\n</style>\n<div id=\"{{'gr_table_'+$id}}\" class=\"gr-table\">\n <div id=\"cell_0\" class=\"gr-cell\">0</div>\n <div id=\"cell_1\" class=\"gr-cell\">1</div>\n <div id=\"cell_2\" class=\"gr-cell\">2</div>\n <div id=\"cell_3\" class=\"gr-cell\">3</div>\n <div id=\"cell_4\" class=\"gr-cell\">4</div>\n <div id=\"cell_5\" class=\"gr-cell\">5</div>\n <div id=\"cell_6\" class=\"gr-cell\">6</div>\n <div id=\"cell_7\" class=\"gr-cell\">7</div>\n <div id=\"cell_8\" class=\"gr-cell\">8</div>\n <div id=\"cell_9\" class=\"gr-cell\">9</div>\n <div id=\"cell_10\" class=\"gr-cell\">10</div>\n <div id=\"cell_11\" class=\"gr-cell\">11</div>\n <div id=\"cell_12\" class=\"gr-cell\">12</div>\n <div id=\"cell_13\" class=\"gr-cell\">13</div>\n</div>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n msg.payload.forEach(el => {\n $(\"#gr_table_\"+scope.$id).find('#cell_'+el.id).text(el.value)\n })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"grid-container","x":480,"y":2500,"wires":[[]]},{"id":"906bada449638198","type":"inject","z":"09deee63c1b960f7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":0,\"value\":\"1\"},{\"id\":1,\"value\":\"Header 1\"},{\"id\":2,\"value\":\"Header 2\"},{\"id\":6,\"value\":\"content 6\"},{\"id\":7,\"value\":\"content 7\"}]","payloadType":"json","x":330,"y":2500,"wires":[["767b5429298c1692"]]},{"id":"40c7539325a10955","type":"ui_group","name":"Table","tab":"8482b305c416b850","order":2,"disp":true,"width":"10","collapse":false,"className":""},{"id":"8482b305c416b850","type":"ui_tab","name":"Away","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Jhankhana](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@Jhankhana](https://discourse.nodered.org/u/Jhankhana)\
**Post date:** [25 March 2023 09:24 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/5 "2023-03-25T09:24:39Z")

</div>

Sorry but please could you explain me in detail. What should I do with this. I meant I have to give output of this template in table node or what?

I have given it to table node but getting something as below.

 ![Screenshot (240)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/7146b0d3540ceff48f7b0fb83ba4124782be8c77.png)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 March 2023 09:36 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/6 "2023-03-25T09:36:11Z")

</div>

The `ui_template` creates a table like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/979ff7d32d8d271a1373319ad3fcab126b249b48.png)

And if you press inject button, the payload is an array of objects sent to the `ui_template` and it updates cells according to payload.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d27e15d0c4153e8b8d89799ce5f7d9750b55d2e4.png)

No need to connect to anything. It is working **example** of how to create such table using the `ui_template` node.

---

<div class="post-metadata">

**Author:** ![Jhankhana](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@Jhankhana](https://discourse.nodered.org/u/Jhankhana)\
**Post date:** [28 March 2023 09:03 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/7 "2023-03-28T09:03:40Z")

</div>

> [@Jhankhana](#):
>
> how to pass on the value coming through mag.payload

Thank you so much for your great help!

---

<div class="post-metadata">

**Author:** ![Jhankhana](https://avatars.discourse-cdn.com/v4/letter/j/35a633/32.png) [@Jhankhana](https://discourse.nodered.org/u/Jhankhana)\
**Post date:** [28 March 2023 10:40 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/8 "2023-03-28T10:40:00Z")

</div>

Please help me bit more.  
Can I export this table as PDF?  
or how can I export table or data as pdf??

---

<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:** [28 March 2023 10:45 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/9 "2023-03-28T10:45:32Z")

</div>

@Jhankhana Please don't ask the same question in two different threads.

> [@PDF from dashboard](https://discourse.nodered.org/t/pdf-from-dashboard/77011):
>
> Hello there! need your help! How we can data in pdf format as exactly shown on the dashboard? can we get grid table written in template node as pdf? is it possible to do such thing?

---

<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:** [28 March 2023 11:13 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/10 "2023-03-28T11:13:03Z")

</div>

> [@Jhankhana](#):
>
> Can I export this table as PDF?  
> or how can I export table or data as pdf??

Your browser should be able to do that. Or maybe your OS provides a print to PDF.

---

<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:** [11 April 2023 11:13 UTC](https://discourse.nodered.org/t/nested-table-in-node-red/76894/11 "2023-04-11T11:13:30Z")

</div>

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