Can't update table cell data dynamically

[notnice]

I'm trying to dynamically update a cells data in a table as below i.e. change the displayed SSID in the table when it is updated.

My function is as below (currently testing with static table index ID):
msg.payload = {
"command":"updateData",
"arguments":[
{
"id":3,
"name":flow.get("wlanName"),
"ssid":newSSIDname
},
//true
],
}
return msg;

This output from function node into the table looks correct, but the table contents don't get dynamically refreshed as I expected, I have to manually refresh to see the updated data.

If i use replaceData instead of updateData the table get cleared and shows nothing until I reselect its parent entity.

[zenofmud]

do a forum search using 'crud table' and you should find some ideas

[notnice]

Thx for responding. Tried that, but can't say either of the 2 hits I found enlightened me
I'm using the Tabulator for my table.

[Christian-Me]

Hi, The problem lies in your msg.payload.arguments object. Arguments is an array of arguments (some commands have more than one). I would use "updateOrAddData" in your case. It expect as the first argument an array of rows (same as "updateData")! "updateData" only updates existing rows as updateOrAddData will add a new row if the line not exist.

[notnice]

Hi Chris - thx for the suggestion, unfortunately its not moved me on. The table cell content doesn't dynamically update in the Dashboard view when I inject the new cell data.
Maybe my expectation is wrong - if the table is in view and I update contents maybe the view isn't updated until I refresh the table view i.e. the command only updates the table data in memory (that would seem bonkers to me, but hey)?

[notnice]

Driving drive me nuts so taken it back to most basic:

Top function adds 2 rows into the table - this works fine:
msg.payload =
[{
"name":"SSID-1",
"ssid":"SSID-1"
},
{
"name":"SSID-2",
"ssid":"SSID-2"
}]
return msg;

Bottom function should change the 2nd row – nothing happens, no errors in console. Its not just a display issue - I enabled click on table row to send output and debug connected to that still shows the original table data.
msg.payload = {
"command":"updateOrAddData",
"arguments":[{
"id":1,
"name":"WLAN3",
"ssid":"SSID-3"
}, ],
}
return msg;

[Christian-Me]

Precisely - if the tab where the table sits is Not the active one than there is no tabulator table existing to be updated. But it is not impossible to do what you plan to do.

UI-Table: how to use commands to add / update table content dynamically

OK I looked into it. This problem is more general for more complex widgets (witches which not only display a single value as text or gauge) If a widget is not on the actual tab the dashboard stores the last message to replay it as soon the widget gets visible again. because the widget does not exists on the client side when you are on a different tab and click on the button this fails. But this "simple" general purpose approach is not working for more complex widgets like ui-table with command…

So you need something infront of ui-table to take care of holding the data and replays it if the tab gets visible.

Or here: [Announce] remote device table (and collaboration wanted)

Or here:

A Syslog Server for the Dashboard

Hi perhaps somebody is interested. Just finished a syslog server for the node-red dashboard. It makes use of ui-table. I hope somebody finds it useful. It is build around ui-table and a subflow I use for all kinds of tables in my projects. https://raw.githubusercontent.com/Christian-Me/node-red-contrib-home/master/Node-RED/syslog/screenshots/demo.gif(image larger than 4096KB) Features can handle quite huge amounts of data only limited by the clients browser. As every line is sent individual…

They all use a subflow taking care of handling the table data and layout.

The dashboard replay the last message to a widget when a client connects. This is why your first example work the hole table in one array. The idea using commands is to be able to update any part of the table down to cell level without sending the hole table every time. This is why the syslog table can hold thousands of lines easily and updates as quick as when there are only 10 lines.
Hope the UI-table handler will help you. It takes a little bit of reading but i use ot in many flows with ui table. You can even configure it that the tabe data survives a Node-RED restart

[notnice]

A colleague noticed I was missing an extra pair of brackets around the update argument. When I added these it started to dynamically add the row into the table, but not change existing cell data based on the index # I specified.

I assumed that the row number in the table automatically = the index ID - wrong! Found this in the Tabulator docs:
"A unique index value should be present for each row of data if you want to be able to programmatically alter that data at a later point, this should be either numeric or a string. By default Tabulator will look for this value in the id field for the data. If you wish to use a different field as the index, set this using the index option parameter."

So once I also added index ID's to my input array data then I could dynamically change the displayed table contents. Simple when you know how!

This is after injecting initial array data (top function node in my attached flow):

This is after injecting the updated data (bottom node in my attached flow) - the table data in the Dashboard is updated dynamically:

Update Table Cell Data.json (2.0 KB)

[Christian-Me]

Nice you found a solution. The brackets [ ] are defining the „extra“ Array I mentioned in my first post.
You can define your index column as you like via msg.ui_control.tabulator={‚index‘:‘myIndex‘} So in your case the wifi STA MAC could be a good index.

You still have to deal with the fact that the table only updates when visible and do not store the data by itself. See my post above. I highly recommend the ui-table handler when you use ui-table with dynamic updates.

[notnice]

Thx very much for the additional notes. I'm just learning node-red and JS so a lot swimming around my head - sometimes how "a" relates to "z" is not obvious Tips on how to improve things welcome.

[notnice]

BTW: each WLAN has a unique index # which I was already setting as a flow variable, so I just use that as the row index in the table:

msg.payload = {
"command":"updateData",
"arguments":[
[{
"id":flow.get("wlanID"), //WLAN ID from original WLAN request and required to update correct row
"ssid":newSSIDname //Set the new SSID name
},]
],
}