Node-red-node-ui-table not working

General
1

Hi , I added node-red-node-ui-table to the pallette and imported the examples given. I tried all the 3 example, simple, richer and ui control table. I am unable to get none of these table to render for me. It says Welcome to the Node-RED Dashboard
Please add some UI nodes to your flow and redeploy. If I add any other UI component to the same tab then the tab renders but the table is still not there. Could anyone help me?

[{"id":"d221c2c7.dcf32","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"7ccd76c6.dd8158","type":"comment","z":"d221c2c7.dcf32","name":"Normal table","info":"","x":190,"y":200,"wires":[]},{"id":"5c56199d.ba1fc8","type":"inject","z":"d221c2c7.dcf32","name":"","topic":"","payload":"[{\"Name\":\"<b>Yokoi</b>\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":70,\"Star\":\"3\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"45\",\"Star\":2,\"Pass\":false,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"darkred\",\"Prog\":95,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":240,"wires":[["19604c92.823c83"]]},{"id":"dfbb3b6.3b7f6c8","type":"inject","z":"d221c2c7.dcf32","name":"","topic":"","payload":"[{\"Name\":\"<b>Yokoi</b>\",\"Age\":\"30\",\"Color\":\"lime\",\"Prog\":20,\"Star\":\"1\"},{\"Name\":\"<i>DCJ</i>\",\"Age\":\"50\",\"Color\":\"dodgerblue\",\"Prog\":\"80\",\"Star\":4,\"Pass\":true,\"web\":\"\"},{\"Name\":\"Nick\",\"Age\":\"40\",\"Color\":\"red\",\"Prog\":90,\"Star\":\"5\",\"Pass\":true,\"web\":\"http://nodered.org\"},{\"Name\":\"Oli\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":280,"wires":[["19604c92.823c83"]]},{"id":"19604c92.823c83","type":"ui_table","z":"d221c2c7.dcf32","group":"19d41624.6332fa","name":"People","order":1,"width":"8","height":"3","columns":[{"field":"Name","title":"Who","width":"","align":"left","formatter":"html","formatterParams":{"target":"_blank"}},{"field":"Age","title":"Age","width":"40","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Color","title":"","width":"5%","align":"left","formatter":"color","formatterParams":{"target":"_blank"}},{"field":"Star","title":"%","width":"100","align":"left","formatter":"star","formatterParams":{"target":"_blank"}},{"field":"Pass","title":"","width":"5%","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"Prog","title":"","width":"80","align":"left","formatter":"progress","formatterParams":{"target":"_blank"}},{"field":"web","title":"URL","width":"","align":"left","formatter":"link","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":520,"y":260,"wires":[[]]},{"id":"d2923293.4ed9d","type":"inject","z":"d221c2c7.dcf32","name":"","topic":"","payload":"[{\"name\":\"MEQ0451495\",\"room\":\"Bathroom\",\"SET_TEMPERATURE-value\":22,\"ACTUAL_TEMPERATURE-value\":21.8,\"VALVE_STATE-value\":90,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":true,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875547\",\"room\":\"Living Room\",\"SET_TEMPERATURE-value\":12,\"ACTUAL_TEMPERATURE-value\":16.2,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":1},{\"name\":\"MEQ1875538\",\"room\":\"Living Room\",\"SET_TEMPERATURE-value\":18,\"ACTUAL_TEMPERATURE-value\":19.5,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.6,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":2},{\"name\":\"MEQ0447462\",\"room\":\"Kitchen\",\"SET_TEMPERATURE-value\":17,\"ACTUAL_TEMPERATURE-value\":22.2,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":10,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":3},{\"name\":\"MEQ1875551\",\"room\":\"Office\",\"SET_TEMPERATURE-value\":18,\"ACTUAL_TEMPERATURE-value\":20.2,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ0447425\",\"room\":\"Dining Room\",\"SET_TEMPERATURE-value\":19,\"ACTUAL_TEMPERATURE-value\":20.4,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875546\",\"room\":\"Dining Room\",\"SET_TEMPERATURE-value\":20,\"ACTUAL_TEMPERATURE-value\":18.8,\"VALVE_STATE-value\":99,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ0447483\",\"room\":\"Bedroom\",\"SET_TEMPERATURE-value\":17,\"ACTUAL_TEMPERATURE-value\":22.4,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875541\",\"room\":\"Child\",\"SET_TEMPERATURE-value\":18,\"ACTUAL_TEMPERATURE-value\":20.4,\"VALVE_STATE-value\":0,\"BATTERY_STATE-value\":2.7,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0},{\"name\":\"MEQ1875552\",\"room\":\"Guest Room\",\"SET_TEMPERATURE-value\":20,\"ACTUAL_TEMPERATURE-value\":21.1,\"VALVE_STATE-value\":9,\"BATTERY_STATE-value\":2.8,\"BOOST_STATE-value\":0,\"AUTO_MODE-value\":false,\"CONTROL_MODE-value\":0}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":120,"wires":[["c435a7c9.48db48"]]},{"id":"c435a7c9.48db48","type":"change","z":"d221c2c7.dcf32","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columnResized\":\"function(column){     var newColumn = {         field: column._column.field,         visible: column._column.visible,         width: column._column.width,         widthFixed: column._column.widthFixed,         widthStyled: column._column.widthStyled     }; this.send({topic:this.config.topic,ui_control:{callback:'columnResized',columnWidths:newColumn}}); }\",\"columnMoved\":\"function(column, columns){     var newColumns=[];     columns.forEach(function (column) {         newColumns.push({'field': column._column.field});     });     this.send({topic:this.config.topic,ui_control:{callback:'columnMoved',columns:newColumns}}); }\",\"groupHeader\":\"function (value, count, data, group) {return value + \\\"<span style='color:#d00; margin-left:10px;'>(\\\" + count + \\\" Termostat\\\"+((count>1) ? \\\"e\\\" : \\\"\\\") + \\\")</span>\\\";}\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"ROom\",\"field\":\"room\",\"width\":100,\"frozen\":true},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Device\",\"field\":\"name\",\"width\":100,\"align\":\"center\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Type\",\"field\":\"deviceType\",\"width\":100,\"align\":\"center\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Measurements\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"target\",\"field\":\"SET_TEMPERATURE-value\",\"formatter\":\"function(cell, formatterParams, onRendered){return cell.getValue()+'°C';}\",\"topCalc\":\"avg\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"min\":10,\"max\":25,\"color\":[\"blue\",\"green\",\"red\"],\"legend\":\"function (value) {return '&nbsp;&nbsp;'+value+'°C';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"left\"},\"title\":\"current\",\"field\":\"ACTUAL_TEMPERATURE-value\",\"formatter\":\"progress\",\"topCalc\":\"avg\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":99,\"color\":[\"gray\",\"orange\",\"red\"],\"legend\":\"function (value) {return (value>0)? '&nbsp;&nbsp;'+value+' %' : '-';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"Valve\",\"field\":\"VALVE_STATE-value\",\"formatter\":\"progress\",\"topCalc\":\"max\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"min\":1.5,\"max\":4.6,\"color\":[\"red\",\"orange\",\"green\"],\"legend\":\"function (value) {return value+' V';}\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"Batt\",\"field\":\"BATTERY_STATE-value\",\"formatter\":\"progress\",\"topCalc\":\"min\",\"width\":100}]},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Settings\",\"columns\":[{\"formatterParams\":{\"target\":\"_blank\",\"min\":0,\"max\":30,\"color\":[\"red\",\"orange\",\"green\"],\"legend\":\"function (value) {     if (value>0)         return \\\"<span style='color:#101010;'>\\\"+value+\\\" min</span>\\\";     else         return \\\"<span style='color:#A0A0A0;'>aus</span>\\\"; }\",\"legendColor\":\"#101010\",\"legendAlign\":\"center\"},\"title\":\"Boost\",\"field\":\"BOOST_STATE-value\",\"formatter\":\"progress\",\"width\":100},{\"formatterParams\":{\"target\":\"_blank\",\"allowEmpty\":true,\"allowTruthy\":true,\"tickElement\":\"<i class='fa fa-clock-o'></i>\",\"crossElement\":\"<i class='fa fa-ban'></i>\"},\"title\":\"Auto\",\"field\":\"AUTO_MODE-value\",\"formatter\":\"tickCross\",\"width\":100,\"align\":\"center\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Mode\",\"field\":\"CONTROL_MODE-value\",\"formatter\":\"function(cell, formatterParams, onRendered){     var html=\\\"<i class=\\\\\\\"\\\";     switch(cell.getValue()) {         case 0: html+=\\\"fa fa-calendar-check-o\\\"; break;         case 1: html+=\\\"fa fa-hand-o-up\\\"; break;         case 2: html+=\\\"fa fa-suitcase\\\"; break;         case 3: html+=\\\"fa fa-spinner fa-spin fa-fw\\\"; break;     }     html+='\\\\\\\"></i>';     return html; }\",\"width\":100,\"align\":\"center\"},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Auto\",\"field\":\"AUTO_MODE-value\",\"formatter\":\"tick\",\"width\":100,\"align\":\"center\"}]}],\"layout\":\"fitColumns\",\"movableColumns\":true,\"groupBy\":\"\"},\"customHeight\":12}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":356,"y":120,"wires":[["52e12188.40477"]]},{"id":"551d5a88.206c14","type":"debug","z":"d221c2c7.dcf32","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":669,"y":120,"wires":[]},{"id":"52e12188.40477","type":"ui_table","z":"d221c2c7.dcf32","group":"6923c465.6328bc","name":"Thermostats","order":1,"width":"20","height":"7","columns":[],"outputs":1,"cts":true,"x":519,"y":120,"wires":[["551d5a88.206c14"]]},{"id":"19d41624.6332fa","type":"ui_group","z":"","name":"Richer Table","tab":"8b097c00.b910c","order":1,"disp":true,"width":"8","collapse":false},{"id":"6923c465.6328bc","type":"ui_group","z":"","name":"ui_control","tab":"f2210d49.e40aa","order":1,"disp":true,"width":"22","collapse":false},{"id":"8b097c00.b910c","type":"ui_tab","z":"","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false},{"id":"f2210d49.e40aa","type":"ui_tab","z":"","name":"Home","icon":"track_changes","order":1,"disabled":false,"hidden":false}]
2

Welcome to forum :slight_smile:
Please update your post and add the versions of
Node-RED:
nodejs:
dashboard:

3

Well I just imported your flow and both tables works fine. Did you press the inject buttons to send data to the tables?

4

Yes, I did press inject button. Is it something to do with tabulator? not sure how to install tabulator and the associated css

5

No it shouldn't since I didn't install it.
As @hotNipi asked what version of
node-red:
node.js
dashboard:
are you running?

6

Btw, I am a bit of a newbie. Trying to use an image on IBM cloud. I am able to go to shell, but it doesn't seem to recognise npm or node. node-red version is 1.0.3

7

dashboard 2.19.2

8

Ahhh this is on the IBM Cloud - @dceejay got any thoughts about this/

9

any help... node-red community?

10

Which version of node.js is it running on ? Node-RED 1.0.3 and Dashboard 2.19.2 are both fine as long as the underlying node.js is v8 but preferably v10 or v12.

11

managed to check node version on IBM Cloud ... It seems to be running V10

12

Same issue. Node-red-node-ui-table not working
IBM Cloud.
Cloud Foundry App from Starter Kit
Node-RED v1.0.4

13

@burtonboucher i am having the same problem as u ....found any solution to it ?? (using ibm cloud lite version )

14

Confirmed, node-red-node-ui-table is not working - not appearing at all.

node 0.3.4
node-red 1.1.3
node-red-node-ui-table 0.3.4

To fix, open windows cmd, and do: npm install tabulator-tables --save
You probably need to restart node-red after this.

15

Is your version of node.js really v0.3.4???
That is not supported v8.x is the lowest version supported

1 Like
16

Its just a typo (but typo can be the reason why rockets fail, and certainly should be corrected! :slight_smile:
Node v12.18.3

17

Just to check, are you running in the IBM cloud too?

18

Thank you, Paul! You made my day. I'm running locally at Windows and Debian/BeagleBone, for quick prototyping. And after your comment, I opened a free tier account at IBM Cloud, and start using cloudy red there, which is very interesting.