How does it function : node-red-node-ui-table?

Hello everybody,

I try to use node-red-node-ui-table since a few weeks.

But I don't understant how it function.

My Node-RED version is 1.1.3
My NodeJS is v.10.22.0
My dashboard module is 2.23.4.

My code is :

[{"id":"8e791778.81e3f8","type":"function","z":"7ca661a9.eef258","name":"","func":"var filepath = `/home/EUREKA/.node-red/Test/node_modules/node-red-node-ui-table/examples/1 Simple table.json`;\n//var filepath = `/home/EUREKA/.node-red/Test/static/data.json`;\nfilepath.replace(\"/\",\"\\ \");\nmsg.filename = filepath;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":260,"wires":[["bda98565.e559e8"]]},{"id":"a19e98ac.8ba54","type":"inject","z":"7ca661a9.eef258","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":580,"y":260,"wires":[["8e791778.81e3f8"]]},{"id":"96d9159b.d914b8","type":"ui_table","z":"7ca661a9.eef258","group":"80c8c9d6.b15c6","name":"","order":0,"width":"20","height":"11","columns":[],"outputs":0,"cts":false,"x":1290,"y":260,"wires":[]},{"id":"bda98565.e559e8","type":"file in","z":"7ca661a9.eef258","name":"Read data.json","filename":"","format":"utf8","chunk":false,"sendError":true,"encoding":"binary","x":920,"y":260,"wires":[["df758942.b7511"]]},{"id":"df758942.b7511","type":"json","z":"7ca661a9.eef258","name":"","property":"payload","action":"","pretty":false,"x":1110,"y":260,"wires":[["3dfe34cd.9887f4","96d9159b.d914b8"]]},{"id":"3dfe34cd.9887f4","type":"debug","z":"7ca661a9.eef258","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1250,"y":340,"wires":[]},{"id":"80c8c9d6.b15c6","type":"ui_group","z":"","name":"Default","tab":"b13b5d9b.f1092","order":1,"disp":true,"width":"30","collapse":false},{"id":"b13b5d9b.f1092","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

And the result is :

I don't understand what I must do to have a good array with the parameters from Tabulator.

Can anybody help me ?

Please.

Thank you.

Oliver

Hi, and welcome to the forum. Couple of things here, please wrap your code in back-ticks as per the help information otherwise it cannot be used as a test.

Secondly, without an extract of the JSON data, it is hard to know what other problems you may have.

Speaking generally, table components generally want an array of objects:

[
    { .... },
    ...
    { .... },
]

Where each object has properties that match the column names:

[
    { "id": ..., "type": ..., ... },
    ...
    { "id": ..., "type": ..., ... },
]

I think that you may also need to defined the column names in the ui_table node as well though I'm not entirely sure whether that is really needed in this case.

Hi and thank you for your precision.

So my code is :

[{"id":"7ca661a9.eef258","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"8e791778.81e3f8","type":"function","z":"7ca661a9.eef258","name":"","func":"var filepath = `/home/EUREKA/.node-red/Test/node_modules/node-red-node-ui-table/examples/1 Simple table.json`;\nfilepath.replace(\"/\",\"\\ \");\nmsg.filename = filepath;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":740,"y":260,"wires":[["bda98565.e559e8"]]},{"id":"a19e98ac.8ba54","type":"inject","z":"7ca661a9.eef258","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":580,"y":260,"wires":[["8e791778.81e3f8"]]},{"id":"96d9159b.d914b8","type":"ui_table","z":"7ca661a9.eef258","group":"80c8c9d6.b15c6","name":"","order":0,"width":"20","height":"11","columns":[],"outputs":0,"cts":false,"x":1290,"y":260,"wires":[]},{"id":"bda98565.e559e8","type":"file in","z":"7ca661a9.eef258","name":"Read data.json","filename":"","format":"utf8","chunk":false,"sendError":true,"encoding":"binary","x":920,"y":260,"wires":[["df758942.b7511"]]},{"id":"df758942.b7511","type":"json","z":"7ca661a9.eef258","name":"","property":"payload","action":"","pretty":false,"x":1110,"y":260,"wires":[["96d9159b.d914b8"]]},{"id":"80c8c9d6.b15c6","type":"ui_group","z":"","name":"Default","tab":"b13b5d9b.f1092","order":1,"disp":true,"width":"30","collapse":false},{"id":"b13b5d9b.f1092","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

And I use the json file example from the node-red-node-ui-table :

    {
        "id": "bc380b4b.e2d668",
        "type": "inject",
        "z": "9663b812.93cc28",
        "name": "",
        "topic": "",
        "payload": "[{\"Name\":\"Kazuhito Yokoi\",\"Age\":\"35\",\"Favourite Color\":\"red\",\"Date Of Birth\":\"12/09/1983\"},{\"Name\":\"Oli Bob\",\"Age\":\"12\",\"Favourite Color\":\"red\",\"Date Of Birth\":\"12/08/2017\"}]",
        "payloadType": "json",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 150,
        "y": 220,
        "wires": [
            [
                "2460c057.cfbc4"
            ]
        ]
   },
    {
        "id": "2460c057.cfbc4",
        "type": "ui_table",
        "z": "9663b812.93cc28",
        "group": "625872f.40b1e8c",
        "name": "",
        "width": 0,
        "height": 4,
        "columns": [],
        "x": 350,
        "y": 220,
        "wires": []
    },
    {
        "id": "9e33f566.8c9098",
        "type": "comment",
        "z": "9663b812.93cc28",
        "name": "Normal table",
        "info": "",
        "x": 150,
        "y": 180,
        "wires": []
    },
    {
        "id": "625872f.40b1e8c",
        "type": "ui_group",
        "z": "",
        "name": "Default",
        "tab": "58c2aa06.ef46e4",
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "58c2aa06.ef46e4",
        "type": "ui_tab",
        "z": "",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]```

And I don’t understand how to use this json file.

I understand that I can insert the data in the msg.payload and that’s ok. But I want to personalize the array.

Thank you for your help.

I found alone.

[{"id":"187cd9ce.bdf4ae","type":"function","z":"69f84990.7d59f","name":"","func":"msg.payload = [\n {\"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},\n {\"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},\n {\"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},\n {\"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},\n {\"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},\n {\"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},\n {\"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},\n {\"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},\n {\"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},\n {\"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}\n]\n\nmsg.ui_control = {\n \"tabulator\":{\n \"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}}); }\",\n \"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}}); }\",\n \"groupHeader\":\"function (value, count, data, group) {return value + \\\"<span style='color:#6B7DF8; margin-left:10px;'>(\\\" + count + \\\" Termostat\\\"+((count>1) ? \\\"e\\\" : \\\"\\\") + \\\")</span>\\\";}\",\n \"columns\":[\n {\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Room\",\"field\":\"room\",\"width\":\"10%\", \"editor\":\"input\"},\n {\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Device\",\"field\":\"name\",\"width\":120,\"align\":\"center\"},\n {\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Type\",\"field\":\"deviceType\",\"width\":120,\"align\":\"center\"},\n {\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Measurements\",\"columns\":[\n {\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"target\",\"field\":\"SET_TEMPERATURE-value\",\"formatter\":\"function(cell, formatterParams, onRendered){return cell.getValue()+'°C';}\",\"topCalc\":\"avg\",\"width\":120},\n {\"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\":200},\n {\"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\":200},\n {\"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}]},\n {\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Settings\",\"columns\":[\n {\"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},\n {\"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\"},\n {\"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\"},\n {\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Auto\",\"field\":\"AUTO_MODE-value\",\"formatter\":\"tick\",\"width\":100,\"align\":\"center\"}\n ]\n }\n ],\n //\"cellEdited\":\"function(cell){this.send({ui_control:{callback:'cellEdited'},payload:cell.getValue(),oldValue:cell.getOldValue(),field:cell.getColumn().getField(),id:cell.getRow().getCell('id').getValue()}); }\",\n \"cellEdited\":\"function(cell){var change = {newValue:cell.getValue()};this.send({topic:this.config.topic,ui_control:{callback:'cellEdited',changes:change}});}\",\n \"layout\":\"fitColumns\",\n \"movableColumns\":true,\n \"groupBy\":\"\"\n },\n \"customHeight\":15\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":590,"y":320,"wires":[["4103b274.9b6c8c"]]}]