DB2: ui-tabulator setColumns not a valid command?

Dashboard
1

@omrid I have a dashboard page with 2 ui-tabulator tables that are configured dynamically (column names, formatters etc.) four different ways. I was using tbCmd = “tbCreateTbl” and tbInitObj = [table definition] but was running into an issue where the table was sometimes not created when the data arrived (there was an error on the table output - table not ready or not defined).

To get around this, I put in bare config in the ui-tabulator properties with blank columns. Now I can see a blank table on the dashboard, so that part is working. I then send in the column definition using tbCmd = “setColumns” and tbArgs = [column definition] but get an error “"Missing or invalid command”. Is there an alternate parameter to set table columns?

Below is a sample flow for just one.

Update: Ugh - just noticed that the change node and the ui-tabulator node are not connected in this flow (they are in mine). If you import the flow, can you please connect the two?

[{"id":"f59bf96f3227fe34","type":"inject","z":"defcf8ff528868a9","name":"Create M% Table","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1343.9521484375,"y":343.82720947265625,"wires":[["9c2a1a0b927a1299"]]},{"id":"3be882bc6843d5ec","type":"ui-button","z":"defcf8ff528868a9","group":"d66256702678bbe6","name":"Table - Month %","label":"Table - Month %","order":1,"width":"2","height":"1","emulateClick":true,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":1353.9521484375,"y":394.76837158203125,"wires":[["9c2a1a0b927a1299"]]},{"id":"9c2a1a0b927a1299","type":"change","z":"defcf8ff528868a9","name":"ui_Table Format (%) - M","rules":[{"t":"set","p":"tbCmd","pt":"msg","to":"setColumns","tot":"str"},{"t":"set","p":"tbArgs","pt":"msg","to":"[{\"formatter\":\"datetime\",\"formatterParams\":{\"inputFormat\":\"iso\",\"outputFormat\":\"yyyy-LLL\",\"invalidPlaceholder\":\"(invalid date)\"},\"title\":\"Day\",\"field\":\"created\",\"hozAlign\":\"center\",\"headerHozAlign\":\"center\",\"width\":\"17%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"%\",\"symbolAfter\":true},\"title\":\"Grid\",\"field\":\"fromGridPct\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"18%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"%\",\"symbolAfter\":true},\"title\":\"Solar\",\"field\":\"fromSolarPct\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"20%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"%\",\"symbolAfter\":true},\"title\":\"Battery\",\"field\":\"fromBatteryPct\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"22%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"%\",\"symbolAfter\":true},\"title\":\"Total\",\"field\":\"totalHomePct\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"20%\"}]","tot":"json"},{"t":"delete","p":"topic","pt":"msg"},{"t":"set","p":"metricOld","pt":"flow","to":"metric","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":1591.128662109375,"y":396.82720947265625,"wires":[["ebbfd0208d43ef52"]]},{"id":"8aefd49fc01bb33c","type":"ui-tabulator","z":"defcf8ff528868a9","name":"Table-2","group":"70c8e6416fd84914","initObj":"{\n    \"height\": \"100%\",\n    \"columns\": [\n        {\n            \"formatter\": \"datetime\",\n            \"formatterParams\": {\n                \"inputFormat\": \"iso\",\n                \"outputFormat\": \"yyyy-LLL\",\n                \"invalidPlaceholder\": \"(invalid date)\"\n            },\n            \"title\": \"Day\",\n            \"field\": \"created\",\n            \"hozAlign\": \"center\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"17%\"\n        },\n        {\n            \"formatter\": \"money\",\n            \"formatterParams\": {\n                \"precision\": 2,\n                \"symbol\": \"%\",\n                \"symbolAfter\": true\n            },\n            \"title\": \"Grid\",\n            \"field\": \"fromGridPct\",\n            \"hozAlign\": \"right\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"18%\"\n        }\n    ]\n}","funcs":"","allowMsgFuncs":false,"maxWidth":"","events":"cellEdited,rowDblClick","order":1,"multiUser":false,"validateRowIds":false,"themeFile":"@CSS:tabulator_midnight.min.css","tblDivId":"","width":"8","height":"8","x":2118.6578369140625,"y":487.18016815185547,"wires":[["cd8454d7ac42af30"]]},{"id":"cd8454d7ac42af30","type":"debug","z":"defcf8ff528868a9","name":"Table-2 Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2293.6578369140625,"y":487.8069763183594,"wires":[]},{"id":"d66256702678bbe6","type":"ui-group","name":"Buttons - Monthly","page":"561dc2b9ba26313a","width":6,"height":1,"order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"70c8e6416fd84914","type":"ui-group","name":"ui-tabulator Example","page":"561dc2b9ba26313a","width":"9","height":"9","order":4,"showTitle":true,"className":"grp-name","visible":"true","disabled":"false","groupType":"default"},{"id":"561dc2b9ba26313a","type":"ui-page","name":"Tabulator Example","ui":"de5759a313e7ad79","path":"/tbl-example1","icon":"table","layout":"flex","theme":"b7b1935fbb33bbc8","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":15,"className":"","visible":"true","disabled":"false"},{"id":"de5759a313e7ad79","type":"ui-base","name":"Node-RED Dashboard DB2","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"dashboard","navigationStyle":"fixed","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"b7b1935fbb33bbc8","type":"ui-theme","name":"Default theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Alternatively, is there a way to “stack” commands to ui-tabulator (send the configuration and the data together)? In the old ui_table, I was sending in the configuration with ui_control and the data in msg.payload so both arrived at the same time but that doesn’t appear to be possible with ui-tabulator. Any help or suggestions would be really appreciated. Thanks.

2

In the table definition of thetbCreateTable command (just like in the initial configuration), you can add a data property with an array of rows, and the table is created with that data. Isn't this what you need?

3

Yes - maybe I’m overthinking this, but I could not see how I could put in msg.payload into the data section since the data is not static either

4

Maybe I'm missing something.

//  msg.payload = [
//    {id:1,name:"jack",age:20},
//    {id:2,name:"jill",age:18}
// ]

const tblConfig = {
   height: 300,
   columns: [
//    ...
   ],
   data: msg.payload,
// etc.
}
msg.tbCmd = tbCreateTable;
msg.tbInitObj = tblConfig;
1 Like
5

I don’t think you are!! I was trying to do it in a “change” node… let me try the function node way.

6

You can also do in a change node, you'll have to use argument type "expression"

7

Thanks - I’m trying to get it working in the function node, but having some issues. I removed the “data” piece for now, and just sent in the table definition. It works correctly from the original change node but from the function node, I get “Invalid table configuration….” The output of the two look the same, so I’m not sure what is going on.

image
image598×770 80.3 KB

Here is a flow with the sample data…is there something obvious that I have overlooked?

[{"id":"c3bb6a2f7cfe59cd","type":"inject","z":"defcf8ff528868a9","name":"Create D kWh Table","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1428.657958984375,"y":1103.650634765625,"wires":[["c5e4cce2d67ccd3e"]]},{"id":"c5e4cce2d67ccd3e","type":"change","z":"defcf8ff528868a9","name":"ui_Table Format (kWh) - D","rules":[{"t":"set","p":"tbCmd","pt":"msg","to":"tbCreateTable","tot":"str"},{"t":"set","p":"tbInitObj","pt":"msg","to":"{\"height\":\"100%\",\"columns\":[{\"formatter\":\"datetime\",\"formatterParams\":{\"inputFormat\":\"iso\",\"outputFormat\":\"LLL-dd\",\"invalidPlaceholder\":\"(invalid date)\"},\"title\":\"Day\",\"field\":\"created\",\"hozAlign\":\"center\",\"headerHozAlign\":\"center\",\"width\":\"15%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"\",\"symbolAfter\":false},\"title\":\"Grid\",\"field\":\"fromGrid\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"20%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"\",\"symbolAfter\":false},\"title\":\"Solar\",\"field\":\"fromSolar\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"20%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"\",\"symbolAfter\":false},\"title\":\"Battery\",\"field\":\"fromBattery\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"22%\"},{\"formatter\":\"money\",\"formatterParams\":{\"precision\":2,\"symbol\":\"\",\"symbolAfter\":false},\"title\":\"Total\",\"field\":\"totalHome\",\"hozAlign\":\"right\",\"headerHozAlign\":\"center\",\"width\":\"20%\"}]}","tot":"json"},{"t":"delete","p":"topic","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1665.83447265625,"y":1103.8271484375,"wires":[["57a6d0c3d0837012","a57dd573fe2275a0"]]},{"id":"57a6d0c3d0837012","type":"ui-tabulator","z":"defcf8ff528868a9","name":"Table-3","group":"70c8e6416fd84914","initObj":"{\n    \"height\": \"100%\",\n    \"columns\": [\n        {\n            \"formatter\": \"datetime\",\n            \"formatterParams\": {\n                \"inputFormat\": \"iso\",\n                \"outputFormat\": \"yyyy-LLL\",\n                \"invalidPlaceholder\": \"(invalid date)\"\n            },\n            \"title\": \"Day\",\n            \"field\": \"created\",\n            \"hozAlign\": \"center\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"17%\"\n        },\n        {\n            \"formatter\": \"money\",\n            \"formatterParams\": {\n                \"precision\": 2,\n                \"symbol\": \"%\",\n                \"symbolAfter\": true\n            },\n            \"title\": \"Grid\",\n            \"field\": \"fromGridPct\",\n            \"hozAlign\": \"right\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"18%\"\n        }\n    ]\n}","funcs":"","allowMsgFuncs":false,"maxWidth":"","events":"cellEdited,rowDblClick","order":1,"multiUser":false,"validateRowIds":false,"themeFile":"@CSS:tabulator_midnight.min.css","tblDivId":"","width":"8","height":"8","x":2019.716796875,"y":1180.5917358398438,"wires":[["8678aa1a3d463620"]]},{"id":"a57dd573fe2275a0","type":"debug","z":"defcf8ff528868a9","name":"Change Node","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1889.010986328125,"y":1028.8270874023438,"wires":[]},{"id":"077e69a6cf2470c1","type":"function","z":"defcf8ff528868a9","name":"ui-tabulator Config+Data","func":"const tblConfig = {\n    \"height\": \"100%\",\n    \"columns\": [\n        {\n            \"formatter\": \"datetime\",\n            \"formatterParams\": {\n                \"inputFormat\": \"iso\",\n                \"outputFormat\": \"LLL-dd\",\n                \"invalidPlaceholder\": \"(invalid date)\"\n            },\n            \"title\": \"Day\",\n            \"field\": \"created\",\n            \"hozAlign\": \"center\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"15%\"\n        },\n        {\n            \"formatter\": \"money\",\n            \"formatterParams\": {\n                \"precision\": 2,\n                \"symbol\": \"\",\n                \"symbolAfter\": false\n            },\n            \"title\": \"Grid\",\n            \"field\": \"fromGrid\",\n            \"hozAlign\": \"right\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"20%\"\n        },\n        {\n            \"formatter\": \"money\",\n            \"formatterParams\": {\n                \"precision\": 2,\n                \"symbol\": \"\",\n                \"symbolAfter\": false\n            },\n            \"title\": \"Solar\",\n            \"field\": \"fromSolar\",\n            \"hozAlign\": \"right\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"20%\"\n        },\n        {\n            \"formatter\": \"money\",\n            \"formatterParams\": {\n                \"precision\": 2,\n                \"symbol\": \"\",\n                \"symbolAfter\": false\n            },\n            \"title\": \"Battery\",\n            \"field\": \"fromBattery\",\n            \"hozAlign\": \"right\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"22%\"\n        },\n        {\n            \"formatter\": \"money\",\n            \"formatterParams\": {\n                \"precision\": 2,\n                \"symbol\": \"\",\n                \"symbolAfter\": false\n            },\n            \"title\": \"Total\",\n            \"field\": \"totalHome\",\n            \"hozAlign\": \"right\",\n            \"headerHozAlign\": \"center\",\n            \"width\": \"20%\"\n        }\n    ],\n    //data: msg.payload\n    // etc.\n};\nmsg.tbCmd = \"tbCreateTable\";\nmsg.tbArgs = tblConfig;\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1710.3529052734375,"y":1301.218605041504,"wires":[["5e2301fd6ac145ef","57a6d0c3d0837012"]]},{"id":"8678aa1a3d463620","type":"debug","z":"defcf8ff528868a9","name":"Table-3 Output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":2226.9521484375,"y":1180.003662109375,"wires":[]},{"id":"96c0fde3b8a88f46","type":"inject","z":"defcf8ff528868a9","name":"Update Daily Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[     {         \"totalHome\": 1182.61,         \"fromGrid\": 304.39,         \"fromSolar\": 560.08,         \"fromBattery\": 318.18,         \"fromGridPct\": 25.74,         \"fromSolarPct\": 47.36,         \"fromBatteryPct\": 26.9,         \"totalHomePct\": 100,         \"totalSolar\": 1289.2,         \"toHome\": 560.08,         \"toBattery\": 368.06,         \"toGrid\": 361.1,         \"toHomePct\": 43.44,         \"toBatteryPct\": 28.55,         \"toGridPct\": 28.01,         \"totalSolarPct\": 100,         \"created\": \"2025-04-01\",         \"labels\": \"2025-Apr\"     },     {         \"totalHome\": 1814.05,         \"fromGrid\": 503.57,         \"fromSolar\": 831.79,         \"fromBattery\": 478.7,         \"fromGridPct\": 27.76,         \"fromSolarPct\": 45.85,         \"fromBatteryPct\": 26.39,         \"totalHomePct\": 100,         \"totalSolar\": 1569.57,         \"toHome\": 831.79,         \"toBattery\": 530.31,         \"toGrid\": 207.55,         \"toHomePct\": 52.99,         \"toBatteryPct\": 33.79,         \"toGridPct\": 13.22,         \"totalSolarPct\": 100,         \"created\": \"2025-05-01\",         \"labels\": \"2025-May\"     },     {         \"totalHome\": 2432.35,         \"fromGrid\": 833.39,         \"fromSolar\": 1049.41,         \"fromBattery\": 549.51,         \"fromGridPct\": 34.26,         \"fromSolarPct\": 43.14,         \"fromBatteryPct\": 22.59,         \"totalHomePct\": 100,         \"totalSolar\": 1673.77,         \"toHome\": 1049.41,         \"toBattery\": 606.35,         \"toGrid\": 18.03,         \"toHomePct\": 62.7,         \"toBatteryPct\": 36.23,         \"toGridPct\": 1.08,         \"totalSolarPct\": 100,         \"created\": \"2025-06-01\",         \"labels\": \"2025-Jun\"     },     {         \"totalHome\": 2485.11,         \"fromGrid\": 830.84,         \"fromSolar\": 1137.4,         \"fromBattery\": 516.89,         \"fromGridPct\": 33.43,         \"fromSolarPct\": 45.77,         \"fromBatteryPct\": 20.8,         \"totalHomePct\": 100,         \"totalSolar\": 1771.77,         \"toHome\": 1137.4,         \"toBattery\": 576.2,         \"toGrid\": 58.16,         \"toHomePct\": 64.2,         \"toBatteryPct\": 32.52,         \"toGridPct\": 3.28,         \"totalSolarPct\": 100,         \"created\": \"2025-07-01\",         \"labels\": \"2025-Jul\"     },     {         \"totalHome\": 469.68,         \"fromGrid\": 186.4,         \"fromSolar\": 191.86,         \"fromBattery\": 91.4,         \"fromGridPct\": 39.69,         \"fromSolarPct\": 40.85,         \"fromBatteryPct\": 19.46,         \"totalHomePct\": 100,         \"totalSolar\": 301.01,         \"toHome\": 191.86,         \"toBattery\": 107.94,         \"toGrid\": 1.21,         \"toHomePct\": 63.74,         \"toBatteryPct\": 35.86,         \"toGridPct\": 0.4,         \"totalSolarPct\": 100,         \"created\": \"2025-08-01\",         \"labels\": \"2025-Aug\"     } ]","payloadType":"json","x":1428.657958984375,"y":1300.9447631835938,"wires":[["077e69a6cf2470c1"]]},{"id":"5e2301fd6ac145ef","type":"debug","z":"defcf8ff528868a9","name":"Function Node","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1960.9521484375,"y":1301.9447402954102,"wires":[]},{"id":"70c8e6416fd84914","type":"ui-group","name":"ui-tabulator Example","page":"561dc2b9ba26313a","width":"9","height":"9","order":4,"showTitle":true,"className":"grp-name","visible":"true","disabled":"false","groupType":"default"},{"id":"561dc2b9ba26313a","type":"ui-page","name":"Tabulator Example","ui":"de5759a313e7ad79","path":"/tbl-example1","icon":"table","layout":"flex","theme":"b7b1935fbb33bbc8","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":15,"className":"","visible":"true","disabled":"false"},{"id":"de5759a313e7ad79","type":"ui-base","name":"Node-RED Dashboard DB2","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"dashboard","navigationStyle":"fixed","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"b7b1935fbb33bbc8","type":"ui-theme","name":"Default theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
8

The Change node has tbInitObj, the function node doesn't.
The Function node has a payload and tbArgs, the Change node doesn't.

1 Like
9

Thank you! I looked at it for so long and didn’t catch that instead of tbArgs it needed to be tbInitObj :man_facepalming:t2:

10

In case anyone else is looking for something like this, here is the code in the function node that worked:

const tblConfig = {
    "height": "100%",
    "columns": [
        {
            "formatter": "datetime",
            "formatterParams": {
                "inputFormat": "iso",
                "outputFormat": "LLL-dd",
                "invalidPlaceholder": "(invalid date)"
            },
            "title": "Day",
            "field": "created",
            "hozAlign": "center",
            "headerHozAlign": "center",
            "width": "15%"
        },
        {
            "formatter": "money",
            "formatterParams": {
                "precision": 2,
                "symbol": "",
                "symbolAfter": false
            },
            "title": "Grid",
            "field": "fromGrid",
            "hozAlign": "right",
            "headerHozAlign": "center",
            "width": "20%"
        },
        {
            "formatter": "money",
            "formatterParams": {
                "precision": 2,
                "symbol": "",
                "symbolAfter": false
            },
            "title": "Solar",
            "field": "fromSolar",
            "hozAlign": "right",
            "headerHozAlign": "center",
            "width": "20%"
        },
        {
            "formatter": "money",
            "formatterParams": {
                "precision": 2,
                "symbol": "",
                "symbolAfter": false
            },
            "title": "Battery",
            "field": "fromBattery",
            "hozAlign": "right",
            "headerHozAlign": "center",
            "width": "22%"
        },
        {
            "formatter": "money",
            "formatterParams": {
                "precision": 2,
                "symbol": "",
                "symbolAfter": false
            },
            "title": "Total",
            "field": "totalHome",
            "hozAlign": "right",
            "headerHozAlign": "center",
            "width": "20%"
        }
    ],
    data: msg.payload
    // etc.
};
msg.tbCmd = "tbCreateTable";
msg.tbInitObj = tblConfig;
return msg;
11

Got them both working - thanks so much :folded_hands:t3: