node-red-node-ui-table dashboard rendering error other controls dont render

[StoneColdRepins]

Which node are you reporting an issue on?

node-red-node-ui-table

What are the steps to reproduce?

flows.json.txt package.json.txt

What happens?

when the ui-table is added to the dashboard, all the other dashboard controls don't show

What do you expect to happen?

all the other dashboard controls should show

Please tell us about your environment:

• [ 2.0.5] Node-RED version:
• [ 14.017.4] node.js version:
• [6.14.14 ] npm version:
• [ Windows_NT 10.0.19043 x64 LE] Platform/OS:
• [ Chrome/Edge/Firefox] Browser: occurs on all browsers tested

[StoneColdRepins]

I removed all my other code so only the minimalist flows also does the same

[AutoTwisty]

Having the same issue, removing node-red-node-ui-table from my palette restores functionality, so I know its the cause. I have not idea on how to make it work or why its happening though.

[Steve-Mcl]

@AutoTwisty

Can you please post a 2 sample flows. 1 where it works, 1 where it doesnt.

Also, when it does not work, could you look in the browsers console (devtools) and let us know what errors (if any) there are?

Thank you.

[AutoTwisty]

@Steve-Mcl Hi Steve, I´ve already removed the node from my palette in favor of another solution and don´t want to risk crashing my dashboard again today. But the flow using the table node was very simple: A inject node pushing a global array into the table node. The flow that worked was every flow without the table, the ones that didnt was the ones with the table. Strange thing was that the node would at first not appear, and the rest of the dashboard would appear normal, but after pushing data to the table node it would be the only thing shown, and the rest of the dashboard would be empty, no tabs or outer groups would show. After removing the table node from the flow and re-deploying, the dashboard would show as completely empty, prompting the user to add dashboard nodes to their flow.

Don´t know if that does you any good, but if i do reintroduce the table node to my flow I´ll save it and post here along with the error logs as requested. Thanks!

[AutoTwisty]

It´s a new day, and I´m at it again. I have another template based solution for my table needs, but would very much like the sorting functions and look of the ui-table node, so here we go again.

The flow i´ve included below is a simple test space, but works just as well as in the rest of the project when I use my template node, when swapping that with the table node however, nothing happens. I have no versions of his flow where the node works.

Browser (Chrome) console is logging one warning: "DevTools failed to load source map: Could not load content for http://127.0.0.1:1880/vendor/purify.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE" Not sure if this is related to the table issues or if it´s something to do with the other dashboard elements I´m using.

EDIT: Got the table node to work, same flow as before, just restarted Node-Red (not just the flow, the entire program) but now the old issue returned, all other dashboard elements are missing, Seems I can have the table node or the rest of the dashboard, but not both at the same time.

table_test_flow.txt

[StoneColdRepins]

Hi

I spent alot of time on this what I noticed it occurs on windows installations and occurs when the --userDir is set

call pm2 start C:\Users\Alain\AppData\Roaming\npm\node_modules\node-red\red.js --name node-red-1880 --node-args="--max-old-space-size=128" -- -v --port 1880 --title node-red-1880 --userDir c:\node-red\1880 --settings c:\node-red\1880\settings_1880.js flows_1880.json

If we remove the --userDir so the node modules load from the standard installation every thing works well

The idea of using different --userDir paths is to have multiple instances running with their own node modules in essence creating a sandbox per instance and different versions of the same node module can be tested on the same machine

this caused the following

i believe the problem is with the web socket

websocket.js:54 WebSocket connection to 'ws://127.0.0.1:1880/ui/socket.io/?EIO=4&transport=websocket&sid=2mAXxihdAXJLtPBFAAAA' failed:

[StoneColdRepins]

[ { "id": "0e8b373887106592", "type": "tab", "label": "Flow 1", "disabled": false, "info": "", "env": [] }, { "id": "3b08fac0.8f06b6", "type": "ui_tab", "name": "Home", "icon": "track_changes", "order": 1, "disabled": false, "hidden": false }, { "id": "079a0363ee0d9003", "type": "ui_base", "theme": { "name": "theme-light", "lightTheme": { "default": "#0094CE", "baseColor": "#0094CE", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif", "edited": true, "reset": false }, "darkTheme": { "default": "#097479", "baseColor": "#097479", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif", "edited": false }, "customTheme": { "name": "Untitled Theme 1", "default": "#4B7930", "baseColor": "#4B7930", "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif" }, "themeState": { "base-color": { "default": "#0094CE", "value": "#0094CE", "edited": false }, "page-titlebar-backgroundColor": { "value": "#0094CE", "edited": false }, "page-backgroundColor": { "value": "#fafafa", "edited": false }, "page-sidebar-backgroundColor": { "value": "#ffffff", "edited": false }, "group-textColor": { "value": "#1bbfff", "edited": false }, "group-borderColor": { "value": "#ffffff", "edited": false }, "group-backgroundColor": { "value": "#ffffff", "edited": false }, "widget-textColor": { "value": "#111111", "edited": false }, "widget-backgroundColor": { "value": "#0094ce", "edited": false }, "widget-borderColor": { "value": "#ffffff", "edited": false }, "base-font": { "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif" } }, "angularTheme": { "primary": "indigo", "accents": "blue", "warn": "red", "background": "grey", "palette": "light" } }, "site": { "name": "Node-RED Dashboard", "hideToolbar": "false", "allowSwipe": "false", "lockMenu": "false", "allowTempTheme": "true", "dateFormat": "DD/MM/YYYY", "sizes": { "sx": 48, "sy": 48, "gx": 6, "gy": 6, "cx": 6, "cy": 6, "px": 0, "py": 0 } } }, { "id": "ff9fdb9a.7da098", "type": "ui_group", "name": "TEST", "tab": "7dcc246f.ee661c", "order": 1, "disp": false, "width": "8", "collapse": false }, { "id": "7dcc246f.ee661c", "type": "ui_tab", "name": "TEST", "icon": "dashboard", "order": 12, "disabled": false, "hidden": false }, { "id": "2e6a6379.742abc", "type": "ui_table", "z": "0e8b373887106592", "group": "ff9fdb9a.7da098", "name": "testTable", "order": 6, "width": "8", "height": 5, "columns": [ { "field": "rowNumber", "title": "Row Number 1", "width": "", "align": "left", "formatter": "rownum", "formatterParams": { "target": "_blank" } }, { "field": "textValue", "title": "Text", "width": "", "align": "left", "formatter": "plaintext", "formatterParams": { "target": "_blank" } }, { "field": "numberValue", "title": "Number", "width": "", "align": "left", "formatter": "plaintext", "formatterParams": { "target": "_blank" } } ], "outputs": 1, "cts": true, "x": 940, "y": 100, "wires": [ [ "1c377ea0.5801e1" ] ] }, { "id": "16664cef.5b26b3", "type": "function", "z": "0e8b373887106592", "name": "table paramter", "func": "msg.ui_control = {tabulator:{}};\n\n//workaround that buttos cant deliver empty strings\nif (msg.payload.hasOwnProperty('payload')) {\n msg.payload=msg.payload.payload;\n}\n\nmsg.ui_control.tabulator[msg.topic]=msg.payload;\ndelete msg.topic;\nmsg.payload=null;\nreturn msg;", "outputs": 1, "noerr": 0, "x": 722, "y": 389, "wires": [ [ "2e6a6379.742abc", "b8d75d24.6cbed" ] ] }, { "id": "b8d75d24.6cbed", "type": "debug", "z": "0e8b373887106592", "name": "table input", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "x": 950, "y": 389, "wires": [] }, { "id": "1c377ea0.5801e1", "type": "debug", "z": "0e8b373887106592", "name": "table output", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "x": 1103, "y": 100, "wires": [] }, { "id": "b15c31a9.af37c", "type": "ui_switch", "z": "0e8b373887106592", "name": "selectable", "label": "selectable", "tooltip": "", "group": "ff9fdb9a.7da098", "order": 7, "width": 0, "height": 0, "passthru": true, "decouple": "false", "topic": "selectable", "style": "", "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "x": 362, "y": 185, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "75207e8d.c54d4", "type": "ui_switch", "z": "0e8b373887106592", "name": "movableColumns", "label": "movableColumns", "tooltip": "", "group": "ff9fdb9a.7da098", "order": 8, "width": 0, "height": 0, "passthru": true, "decouple": "false", "topic": "movableColumns", "style": "", "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "x": 392, "y": 236, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "c585e7a1.dfc648", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 9, "width": "4", "height": "1", "passthru": false, "label": "Format Numbers > 100", "tooltip": "using a rowFormatter callback function", "color": "", "bgcolor": "", "icon": "", "payload": "function(row){ if(row.getData().numberValue>100){ row.getElement().style.backgroundColor = \"#A6A6DF\"; } },", "payloadType": "str", "topic": "rowFormatter", "x": 412, "y": 372, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "f178c6fe.710ef8", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 5, "width": 0, "height": 0, "passthru": false, "label": "Fill demo data", "tooltip": "", "color": "", "bgcolor": "", "icon": "", "payload": "[{\"textValue\":\"Line #1\",\"numberValue\":123.12},{\"textValue\":\"Line #2\",\"numberValue\":100},{\"textValue\":\"Line #3\",\"numberValue\":50}]", "payloadType": "json", "topic": "rowFormatter", "x": 382, "y": 100, "wires": [ [ "2e6a6379.742abc" ] ] }, { "id": "2403f929.df4006", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 11, "width": "4", "height": "1", "passthru": false, "label": "inject Tooltips callback", "tooltip": "cell.getColumn().getField() + \" - \" + cell.getValue();", "color": "", "bgcolor": "", "icon": "", "payload": "function(cell){return cell.getColumn().getField() + \" - \" + cell.getValue(); },", "payloadType": "str", "topic": "tooltips", "x": 402, "y": 474, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "f6c68c45.58003", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 12, "width": "4", "height": "1", "passthru": false, "label": "clear Tooltips callback", "tooltip": "empty string is not possible! so use a single space", "color": "", "bgcolor": "", "icon": "", "payload": "{\"payload\":\"\"}", "payloadType": "json", "topic": "tooltips", "x": 402, "y": 508, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "d2b29dda.60a5a", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 13, "width": "4", "height": "1", "passthru": false, "label": "reformat Number column", "tooltip": "inject additional paramters to numberValue column", "color": "", "bgcolor": "", "icon": "", "payload": "[{\"field\":\"numberValue\",\"formatterParams\":{\"min\":0,\"max\":200,\"legend\":\"function (value) { if (value<100) return \\"\\"+value+\\"\\"; else return \\"\\"+value+\\"\\"; }\",\"legendAlign\":\"center\"},\"formatter\":\"progress\",\"topCalc\":\"function(values, data, calcParams){ var total = 0; var calc = 0; var count = 0; data.forEach(value => { total+=Number(value.numberValue); count++; }); if (count>0) calc=(total/count).toFixed(2); return ${calc} (avg); }\",\"headerTooltip\":\"avarage\"}]", "payloadType": "json", "topic": "columns", "x": 412, "y": 576, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "7b6490b3.cd9c7", "type": "function", "z": "0e8b373887106592", "name": "callback function(s)", "func": "// how to use the editor to write callback functions\n// DO NOT wire this into your flow!\n// copy / paste \"function( ... }\" into the correct calback parameter\n// use the \"debugger\" statement to debug your callback inside your browser\n\nvar topCalc = function(values, data, calcParams){\n var total = 0;\n var calc = 0;\n var count = 0;\n data.forEach(value => {\n total+=Number(value.numberValue);\n count++;\n });\n if (count>0) calc=(total/count).toFixed(2);\n return ${calc} (avg);\n}\n\nvar legend = function (value) {\n if (value<100) return \"\"+value+\"\";\n else return \"\"+value+\"\"; \n}", "outputs": 1, "noerr": 0, "x": 732, "y": 508, "wires": [ [] ] }, { "id": "91506d4b.4956a", "type": "comment", "z": "0e8b373887106592", "name": "Intentionally not wired into the flow!", "info": "use the editor to write callback functions\n\nDO NOT wire this into your flow!\n\ncopy / paste function( ... } into the correct calback parameter\nuse the debugger statement to debug your callback inside your browser\n", "x": 782, "y": 474, "wires": [] }, { "id": "732afcea.f728f4", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 14, "width": "4", "height": "1", "passthru": false, "label": "reset Number column", "tooltip": "inject additional paramters to numberValue column", "color": "", "bgcolor": "", "icon": "", "payload": "[{\"field\":\"numberValue\",\"formatter\":\"plainText\",\"topCalc\":\"\",\"headerTooltip\":\"\"}]", "payloadType": "json", "topic": "columns", "x": 402, "y": 610, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "89cca7ea.7fc998", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 15, "width": "4", "height": "1", "passthru": false, "label": "add/show id column", "tooltip": "add a new column", "color": "", "bgcolor": "", "icon": "", "payload": "[{\"field\":\"id\",\"title\":\"id\",\"visible\":true,\"formatter\":\"plainText\"}]", "payloadType": "json", "topic": "columns", "x": 402, "y": 678, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "32a3c4ad.1b85fc", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 16, "width": "4", "height": "1", "passthru": false, "label": "hide id column", "tooltip": "hide id column (it is not possible to delete a existing column definition)", "color": "", "bgcolor": "", "icon": "", "payload": "[{\"field\":\"id\",\"title\":\"id\",\"visible\":false,\"formatter\":\"plainText\"}]", "payloadType": "json", "topic": "columns", "x": 382, "y": 712, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "25247f4b.cc7ec", "type": "inject", "z": "0e8b373887106592", "name": "", "repeat": "", "crontab": "", "once": true, "onceDelay": 0.1, "topic": "", "payload": "true", "payloadType": "bool", "x": 216, "y": 236, "wires": [ [ "75207e8d.c54d4", "bd3fd382.a2aa9" ] ] }, { "id": "18ed8d27.bf00a3", "type": "ui_button", "z": "0e8b373887106592", "name": "", "group": "ff9fdb9a.7da098", "order": 10, "width": "4", "height": "1", "passthru": false, "label": "reset Numbers > 100", "tooltip": "using a rowFormatter callback function", "color": "", "bgcolor": "", "icon": "", "payload": "{\"payload\":\"\"}", "payloadType": "json", "topic": "rowFormatter", "x": 402, "y": 406, "wires": [ [ "16664cef.5b26b3" ] ] }, { "id": "bd3fd382.a2aa9", "type": "ui_switch", "z": "0e8b373887106592", "name": "headerVisible", "label": "headerVisible", "tooltip": "", "group": "ff9fdb9a.7da098", "order": 7, "width": 0, "height": 0, "passthru": true, "decouple": "false", "topic": "headerVisible", "style": "", "onvalue": "true", "onvalueType": "bool", "onicon": "", "oncolor": "", "offvalue": "false", "offvalueType": "bool", "officon": "", "offcolor": "", "x": 382, "y": 287, "wires": [ [ "16664cef.5b26b3" ] ] } ]`

[StoneColdRepins]

pm2 monit does not show anything

[AutoTwisty]

@StoneColdRepins Thank you for the reply. I don´t think I follow, do you mean that I should remove "--userDirr" from somewhere in the red.js file? In that case, where? userDirr is mentioned many times and I suspect removing all mention of it would break something. I also don´t understand what you mean about the websocket being a cause, the link or adress you copied in at the end of your first post does not tell me anything.

The exported flow you posted is giving me errors when I attempt to import it, and I´m not sure what it is? Did you mean to post an example of something? Sorry for not understanding!

[StoneColdRepins]

Hi the flow is loaded from the import

[StoneColdRepins]

This call i make from a command prompt using pm2 as a manger

call pm2 start C:\Users\Alain\AppData\Roaming\npm\node_modules\node-red\red.js --name node-red-1880 --node-args="--max-old-space-size=128" -- -v --port 1880 --title node-red-1880 --userDir c:\node-red\1880 --settings c:\node-red\1880\settings_1880.js flows_1880.json

if i execute without the --userDir parameter the tabulator renders

call pm2 start C:\Users\Alain\AppData\Roaming\npm\node_modules\node-red\red.js --name node-red-1880 --node-args="--max-old-space-size=128" -- -v --port 1880 --title node-red-1880 --settings c:\node-red\1880\settings_1880.js flows_1880.json

the only difference from a google debugger is there is no WebSocket error and as such my assumption is made

[StoneColdRepins]

@AutoTwisty how are you starting node red

@Steve-Mcl do you have any insight

[AutoTwisty]

I see, I opened the example flow that you showed and have the same issue with that. To clearify, I don´t have any issues with the table not rendering, but as soon as I have a table in any flow, all other non-table ui elements stop rendering. I start Node-Red by command in the Command Prompt.

[StoneColdRepins]

kewl, it would be great if this could be resolved

for you possibly reload nodejs and node-red as you are running from the default installation folder

it may also be an idea to use pm2 as its monit command make watching the logs simplified and seeing memory utilization and processor resources