Cool glad you came to a solution. I would point out that my second example showed you how to change the object property name to ones you wanted to use in the table. so you could of just use an example like below
Html tr and td have been given class elements so css can target them
<style>
table {
width:100%;
background-color: white;
text-align: center;
}
td {
color: white;
height:40px;
font-size:20px;
}
td[class^=mytablerowstart] {
background-color: black;
}
td.mytablerowstart0 {
background-color: white;
}
tr[class^=mytablerow] {
background-color: blue ;
font-weight: bold;
}
tr.mytablerow0 {
background-color: black ;
font-weight: bold;
}
</style>
<table class="mytable">
<tbody>
<tr class="mytablerow{{$index}}" ng-repeat="(key, value) in msg.payload[0]">
<td class="mytablerowstart{{$index}}">{{key}}</td>
<td class="mytabledata" ng-repeat="element in msg.payload">{{msg.payload[$index][key]}}</td>
</tr>
</tbody>
</table>
The incoming data is then parse with the following JSONata, giving the row titles to
$$.some_property_or_context.{
"": $.name,
"Days of Data": $.samples,
"Available Light": $.dl_avg
}
the flow json
[{"id":"3d042cad.39bbf4","type":"inject","z":"c791cbc0.84f648","name":"","props":[{"p":"some_property_or_context","v":"[\t {\t \"name\":\"Jan\",\t \"samples\":$round($random()*10),\t \"dl_total\":0,\t \"dl_avg\":$round($random()*10),\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":$round($random()*10)\t },\t {\t \"name\":\"Feb\",\t \"samples\":$round($random()*10),\t \"dl_total\":$round($random()*10),\t \"dl_avg\":$round($random()*10),\t \"sct_total\":0,\t \"sct_avg\":$round($random()*10),\t \"hct_total\":0,\t \"hct_avg\":0\t },\t {\t \"name\":\"Mar\",\t \"samples\":$round($random()*10),\t \"dl_total\":0,\t \"dl_avg\":$round($random()*10),\t \"sct_total\":0,\t \"sct_avg\":0,\t \"hct_total\":0,\t \"hct_avg\":0\t }\t]","vt":"jsonata"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":1340,"wires":[["9f7f71b1.37aa08"]]},{"id":"9f7f71b1.37aa08","type":"change","z":"c791cbc0.84f648","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.some_property_or_context.{\t \"\": $.name,\t \"Days of Data\": $.samples,\t \"Available Light\": $.dl_avg\t}","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":1380,"wires":[["f0c13732.7afb3"]]},{"id":"f0c13732.7afb3","type":"ui_template","z":"c791cbc0.84f648","group":"d18ff8e1.9e1118","name":"","order":9,"width":"0","height":"0","format":"<style>\ntable {\n width:100%;\n background-color: white;\n text-align: center;\n}\ntd {\n color: white;\n height:40px;\n font-size:20px; \n}\ntd[class^=mytablerowstart] {\n background-color: black;\n}\ntd.mytablerowstart0 {\n background-color: white;\n}\ntr[class^=mytablerow] {\n background-color: blue ;\n font-weight: bold;\n}\ntr.mytablerow0 {\n background-color: black ;\n font-weight: bold;\n}\n</style>\n<table class=\"mytable\">\n <tbody>\n <tr class=\"mytablerow{{$index}}\" ng-repeat=\"(key, value) in msg.payload[0]\">\n <td class=\"mytablerowstart{{$index}}\">{{key}}</td>\n <td class=\"mytabledata\" ng-repeat=\"element in msg.payload\">{{msg.payload[$index][key]}}</td>\n </tr>\n </tbody>\n</table>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":410,"y":1420,"wires":[["5bee78ba.7559c8"]]},{"id":"5bee78ba.7559c8","type":"debug","z":"c791cbc0.84f648","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":1380,"wires":[]},{"id":"d18ff8e1.9e1118","type":"ui_group","name":"Default","tab":"27c60ea2.a80aaa","order":1,"disp":true,"width":"12","collapse":false},{"id":"27c60ea2.a80aaa","type":"ui_tab","name":"test","icon":"dashboard","disabled":false,"hidden":false}]
The out come
Apologies if my mannerisms caused you to take offense, that was not my intention. I will leave it there.
You should of asked what $index was and where it came from i would have offered an explanation.
