Demo - Two paths to same ui_template (table) with different headers, data and styling

This demo has two paths in the flow showing how you could have each path create a different table in a single ui_template. Both paths:

1. insert some data to msg.payload
2. next use a template node and build the data with some static rows and insert the msg.payload into a row using the mustache notation {{payload}}
3. a change node sets the column headers
4. a json node formats msg.payload into an object
5. another template node builds the CSS (in mustache format) and puts it into msg.style
6. and finally the common UI_TEMPLATE node is called to build the table.

The inserted data (1), tables(2), column headers(3) and CSS (4) are different in the two tables and clicking one inject node will show table one and the other inject node will show table two.

Copy[{"id":"3eb621f2.5c95de","type":"ui_template","z":"64a1c1e4.9bf3c","group":"568dc430.3b34a4","name":"","order":0,"width":"6","height":"9","format":"<style>\n    {{msg.style}}\n</style>\n\n<table>\n  <tr><td>{{msg.col1_header}}</td><td>{{msg.col2_header}}</td></tr>\n  <tr ng-repeat=\"obj in msg.payload\">\n    <td>{{ obj.name || obj.First}}</td>\n    <td>{{ obj.ip || obj.Last }}</td>\n  </tr>\n</table>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":420,"y":440,"wires":[["c7f2b9b6.88906"]]},{"id":"844cd922.e582d","type":"template","z":"64a1c1e4.9bf3c","name":"Setup data","field":"payload","fieldType":"msg","format":"handlebars","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    ","output":"str","x":130,"y":160,"wires":[["38383618.d6ed22","b84b9408.d1ec48"]]},{"id":"4f398bfe.729bec","type":"inject","z":"64a1c1e4.9bf3c","name":"Insert IP","topic":"","payload":"192.168.44.231","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":120,"y":100,"wires":[["844cd922.e582d"]]},{"id":"7dc82837.0c9fc","type":"json","z":"64a1c1e4.9bf3c","name":"","property":"payload","action":"","pretty":false,"x":110,"y":280,"wires":[["30ba4a86.e1b87e","459fb910.43f288"]]},{"id":"30ba4a86.e1b87e","type":"template","z":"64a1c1e4.9bf3c","name":"css table 1","field":"style","fieldType":"msg","format":"css","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}\n\n/* Hover cell effect! */\n\ntr td:hover {\n    background: #666;\n    color: #FFF;\n}\n","output":"str","x":130,"y":340,"wires":[["3eb621f2.5c95de","485a718.3f2de9"]]},{"id":"38383618.d6ed22","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":160,"wires":[]},{"id":"459fb910.43f288","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":280,"wires":[]},{"id":"485a718.3f2de9","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":340,"wires":[]},{"id":"c7f2b9b6.88906","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":430,"y":520,"wires":[]},{"id":"46db2fd2.2b3b78","type":"template","z":"64a1c1e4.9bf3c","name":"Setup data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[\n    {\"First\": \"John\",  \"Last\": \"{{payload}}\" },\n    {\"First\": \"Tom\",  \"Last\": \"Jones\"},\n    {\"First\": \"Sue\", \"Last\": \"Smith\"},\n    {\"First\": \"Mary\",  \"Last\": \"Lamb\"}\n]\n    ","output":"str","x":530,"y":160,"wires":[["74789d5c.e4086c","7d7c3169.26bb6"]]},{"id":"95904897.e4e188","type":"inject","z":"64a1c1e4.9bf3c","name":"insert name","topic":"","payload":"Doe","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":530,"y":100,"wires":[["46db2fd2.2b3b78"]]},{"id":"66bb1029.17eea8","type":"json","z":"64a1c1e4.9bf3c","name":"","property":"payload","action":"","pretty":false,"x":510,"y":280,"wires":[["ead38fa.69249f","e3a28d2.e427b7"]]},{"id":"e3a28d2.e427b7","type":"template","z":"64a1c1e4.9bf3c","name":"css table 2","field":"style","fieldType":"msg","format":"css","syntax":"mustache","template":"table {\n    color: #000;\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 blue;\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: #ffb4b4;\n}\n\n/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */\n\ntr:nth-child(odd) td {\n    background: #666;\n}\n\ntr:nth-child(1) td {\n    background: #FEFEFE;\n}\n\n/* Cells in even rows (2,4,6...) are one color */\n\ntr td:hover {\n    background: #FEFEFE;\n    color: #000;\n}","output":"str","x":530,"y":340,"wires":[["c82af210.713158","3eb621f2.5c95de"]]},{"id":"74789d5c.e4086c","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":730,"y":160,"wires":[]},{"id":"ead38fa.69249f","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":730,"y":280,"wires":[]},{"id":"c82af210.713158","type":"debug","z":"64a1c1e4.9bf3c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":730,"y":340,"wires":[]},{"id":"7d7c3169.26bb6","type":"change","z":"64a1c1e4.9bf3c","name":"Build Version 2 Column Headers","rules":[{"t":"set","p":"col1_header","pt":"msg","to":"First","tot":"str"},{"t":"set","p":"col2_header","pt":"msg","to":"Last","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":220,"wires":[["66bb1029.17eea8"]]},{"id":"b84b9408.d1ec48","type":"change","z":"64a1c1e4.9bf3c","name":"Build Version 1 Column Headers","rules":[{"t":"set","p":"col1_header","pt":"msg","to":"Name","tot":"str"},{"t":"set","p":"col2_header","pt":"msg","to":"IP","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":190,"y":220,"wires":[["7dc82837.0c9fc"]]},{"id":"9d7edcfd.21331","type":"comment","z":"64a1c1e4.9bf3c","name":"Demo - two flows to same table with different headers, data and styling","info":"","x":430,"y":40,"wires":[]},{"id":"568dc430.3b34a4","type":"ui_group","z":"64a1c1e4.9bf3c","name":"Test","tab":"96828dc7.620c5","disp":true,"width":"6"},{"id":"96828dc7.620c5","type":"ui_tab","z":"64a1c1e4.9bf3c","name":"Tableau","icon":"dashboard"}]