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!
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).
It's on the dashboard. here I am attaching output table.
Index Numbers are written in the cell.
Edit:
I have used html in template node.
[{"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"}]
I'd go for grid layout. Nothing too complicated and easy to find support from web.
[{"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}]
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.
The ui_template creates a table like this:
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.
No need to connect to anything. It is working example of how to create such table using the ui_template node.
Thank you so much for your great help!
Please help me bit more.
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.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
