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"}]
