Dynamic tables using template and dashboard-template

Small example of dynamic table generation using both the normal template object using mustache syntax and the dashboard template object using angularJS.

[{"id":"f839bd1a.fd1798","type":"template","z":"ea6165ae.2bf5d8","name":"html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<head>\n    <style>\n        {{{payload.style}}}\n    </style>\n</head>\n\n\n<table width=\"100%\">\n  <tr>\n    <th>Name</th>\n    <th>IP</th> \n  </tr>\n  {{#payload}}\n  <tr>\n    <td>{{{name}}}</td>\n    <td>{{ip}}</td> \n  </tr>\n  {{/payload}}\n</table>","x":778,"y":111,"wires":[["74e6dc8d.e1f16c"]]},{"id":"74e6dc8d.e1f16c","type":"http response","z":"ea6165ae.2bf5d8","name":"","x":918,"y":111,"wires":[]},{"id":"f96fca84.a6fab8","type":"template","z":"ea6165ae.2bf5d8","name":"css","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"table {\n    color: #333;\n    font-family: Helvetica, Arial, sans-serif;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n}\ntd, th {\n    border: 1px solid transparent;\n    /* No more visible border */\n    height: 30px;\n    transition: all 0.3s;\n    /* Simple transition for hover effect */\n}\nth {\n    background: #DFDFDF;\n    /* Darken header a bit */\n    font-weight: bold;\n}\ntd {\n    background: #FAFAFA;\n    text-align: center;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr:nth-child(even) td {\n    background: #F1F1F1;\n}\n\n/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */\n\ntr:nth-child(odd) td {\n    background: #FEFEFE;\n}\ntr td:hover {\n    background: #666;\n    color: #FFF;\n}\n\n/* Hover cell effect! */","x":638,"y":111,"wires":[["f839bd1a.fd1798"]]},{"id":"be32ba2f.0f143","type":"template","z":"ea6165ae.2bf5d8","name":"","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"[\n    {\"name\": \"Computer 1\", \"ip\": \"6.3.6.6\"},\n    {\"name\": \"Computer 2\", \"ip\": \"6.3.6.6\"},\n    {\"name\": \"Computer 3\", \"ip\": \"6.7.6.6\"},\n    {\"name\": \"Computer 4\", \"ip\": \"6.4.6.6\"}\n]\n    ","x":338,"y":111,"wires":[["cf066521.77c378"]]},{"id":"cf066521.77c378","type":"json","z":"ea6165ae.2bf5d8","name":"","x":498,"y":111,"wires":[["f96fca84.a6fab8"]]},{"id":"3434e101.5a81f6","type":"http in","z":"ea6165ae.2bf5d8","name":"","url":"/table","method":"get","swaggerDoc":"","x":168,"y":111,"wires":[["be32ba2f.0f143"]]},{"id":"cf38d011.f6d44","type":"ui_template","z":"ea6165ae.2bf5d8","group":"4b73adc4.5ffc3c","name":"","order":0,"width":"0","height":"0","format":"<style>\n    {{msg.style}}\n</style>\n\n<table>\n  <tr ng-repeat=\"obj in msg.payload\">\n    <td>{{ obj.name }}</td>\n    <td>{{ obj.ip }}</td>\n  </tr>\n</table>","storeOutMessages":false,"fwdInMessages":true,"x":788,"y":191,"wires":[[]]},{"id":"1b06cdd0.191ae2","type":"template","z":"ea6165ae.2bf5d8","name":"","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"[\n    {\"name\": \"Computer 1\", \"ip\": {{payload}}},\n    {\"name\": \"Computer 2\", \"ip\": \"6.3.6.6\"},\n    {\"name\": \"Computer 3\", \"ip\": \"6.7.6.6\"},\n    {\"name\": \"Computer 4\", \"ip\": \"6.4.6.6\"}\n]\n    ","x":338,"y":191,"wires":[["1148db29.79fc25"]]},{"id":"541181b4.fb1ea","type":"inject","z":"ea6165ae.2bf5d8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":188,"y":191,"wires":[["1b06cdd0.191ae2"]]},{"id":"1148db29.79fc25","type":"json","z":"ea6165ae.2bf5d8","name":"","x":478,"y":191,"wires":[["b47d4217.b05fc"]]},{"id":"b47d4217.b05fc","type":"template","z":"ea6165ae.2bf5d8","name":"css","field":"style","fieldType":"msg","format":"html","syntax":"mustache","template":"table {\n    color: #333;\n    font-family: Helvetica, Arial, sans-serif;\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n}\ntd, th {\n    border: 1px solid transparent;\n    /* No more visible border */\n    height: 30px;\n    transition: all 0.3s;\n    /* Simple transition for hover effect */\n}\nth {\n    background: #DFDFDF;\n    /* Darken header a bit */\n    font-weight: bold;\n}\ntd {\n    background: #FAFAFA;\n    text-align: center;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr:nth-child(even) td {\n    background: #F1F1F1;\n}\n\n/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */\n\ntr:nth-child(odd) td {\n    background: #FEFEFE;\n}\ntr td:hover {\n    background: #666;\n    color: #FFF;\n}\n\n/* Hover cell effect! */","x":638,"y":191,"wires":[["cf38d011.f6d44"]]},{"id":"4b73adc4.5ffc3c","type":"ui_group","z":"ea6165ae.2bf5d8","name":"Test","tab":"aa1f6946.e15cf","disp":true,"width":"6"},{"id":"aa1f6946.e15cf","type":"ui_tab","z":"ea6165ae.2bf5d8","name":"Tableau","icon":"dashboard"}]
natcl

Flow Info

created 1 year, 2 months ago

Node Types

Core
  • http in (x1)
  • http response (x1)
  • inject (x1)
  • json (x2)
  • template (x5)
Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • template
  • table
  • dynamic
  • angular
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option