EXAMPLE (template) - displaying a two dimensional table

Problem: You need to display a table with first name, last name and age.

Sample data: Paul Doe, 24 Greg Jones, 31 Able Smith, 29

We will use a function node to create the table like this:

var arr =[["Paul","Doe",24],["Greg","Jones",31],["Able","Smith",29]];
msg.payload = arr;
return msg;

And display the table using the template node. Here is what we use in the template node:

<table id="table" border="1">
     <tr>
        <th>First Name</th> 
        <th>Last Name</th>
        <th>Age</th>
 </tr>
 <tbody>
 <tr ng-repeat="row in msg.payload">
   <td ng-repeat="item in row" >{{item}}</td>
 </tr>
 </tbody>
</table>

In this case we use the ng-repeat twice, once to process each row of the table in the and once to display each item in each row using a element.

Here is what the display will look like:

First Name Last Name Age
Paul Doe 24
Greg Jones 31
Able Smith 29
[{"id":"1b61c07f.7d06f8","type":"inject","z":"968ca76f.3dc46","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":90,"y":260,"wires":[["a30ba039.4650a8"]]},{"id":"a30ba039.4650a8","type":"function","z":"968ca76f.3dc46","name":"build array (2)","func":"var arr =[[\"Paul\",\"Doe\",24],[\"Greg\",\"Jones\",31],[\"Able\",\"Smith\",29]];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":260,"wires":[["c9727c65.303f"]]},{"id":"7fa8d335.150f84","type":"debug","z":"968ca76f.3dc46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":260,"wires":[]},{"id":"c9727c65.303f","type":"ui_template","z":"968ca76f.3dc46","group":"3c5da821.6d5638","name":"Two dimension array table","order":1,"width":"6","height":"6","format":"<table id=\"table\" border=\"1\">\n <tr>\n <th>First Name</th> \n <th>Last Name</th>\n <th>Age</th>\n </tr>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\">\n <td ng-repeat=\"item in row\" >{{item}}</td>\n </tr>\n </tbody>\n</table>\n\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":480,"y":260,"wires":[["7fa8d335.150f84"]]},{"id":"3c5da821.6d5638","type":"ui_group","z":"","name":"Two dimension Array","tab":"f9ac9e91.20e588","order":2,"disp":true,"width":"6","collapse":false},{"id":"f9ac9e91.20e588","type":"ui_tab","z":"","name":"Table Examples","icon":"dashboard","order":1}]
juggledad

Flow Info

created 1 year, 2 months ago

Node Types

Core
  • debug (x1)
  • function (x1)
  • inject (x1)
Other
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

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