Update table rows in dashboard

Hi,
I want to create a table with a fixed number of rows to present some data. The data changes from time to time, so some updates to a table row must be made. I managed to store the entire data in a variable, empty the table, and send the updated data. However, I don't like this behavior, and I want to update only the modified row. Do you have any idea of how this can be achieved?

[
    {
        "id": "2ba7deac440e1960",
        "type": "function",
        "z": "2b18c57b69cd6210",
        "name": "function 2",
        "func": "\nlet a = new Array(17);\n\nlet tmp={\n    _id:null,\n    status:\"red\",\n    note:\"---\"\n}\n\nfor(var i=0;i<17;i++){\n    a[i]=JSON.parse(JSON.stringify(tmp));\n    a[i]._id=i;\n}\nmsg.payload=a;\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 340,
        "y": 280,
        "wires": [
            [
                "2bc9c7cc438f2fe5"
            ]
        ]
    },
    {
        "id": "3cb7e42beaf12746",
        "type": "inject",
        "z": "2b18c57b69cd6210",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 140,
        "y": 280,
        "wires": [
            [
                "2ba7deac440e1960"
            ]
        ]
    },
    {
        "id": "c069d93da2105b27",
        "type": "function",
        "z": "2b18c57b69cd6210",
        "name": "function 3",
        "func": "let tmp={\n    id:1,\n    status:\"blue\",\n}\n\nmsg.payload={\n    \"command\": \"updateOrAddData\",\n    \"arguments\":[\n        {\n            \"_id\": 5,\n            \"status\": \"blue\",\n        }\n    ]\n}\n\nreturn msg;\n\n/*var id = flow.get(\"lastId\") || 0;\nif (id < 2) {\n    node.error(\"use only if minimum of 2 Lines existing!\")\n    return;\n}\n\nid = Math.floor(id / 2); //\nmsg.payload = {\n    command: \"updateOrAddData\",\n    arguments: [\n        [\n            {\n                \"id\": id,\n                \"timestamp\": msg.payload,\n                \"text\": \"updateOrAddData (update) (#\" + id + \")\"\n            }\n        ]\n    ],\n    returnPromise: true\n}\nreturn msg;*/",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 360,
        "y": 380,
        "wires": [
            [
                "fbc51469412e3398",
                "2bc9c7cc438f2fe5"
            ]
        ]
    },
    {
        "id": "b1356aa9b5db4e1a",
        "type": "inject",
        "z": "2b18c57b69cd6210",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 140,
        "y": 380,
        "wires": [
            [
                "c069d93da2105b27"
            ]
        ]
    },
    {
        "id": "fbc51469412e3398",
        "type": "debug",
        "z": "2b18c57b69cd6210",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 620,
        "y": 380,
        "wires": []
    },
    {
        "id": "2bc9c7cc438f2fe5",
        "type": "ui_table",
        "z": "2b18c57b69cd6210",
        "group": "6330219bb2ab7ec9",
        "name": "",
        "order": 0,
        "width": "14",
        "height": "10",
        "columns": [
            {
                "field": "_id",
                "title": "id",
                "width": "",
                "align": "left",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "status",
                "title": "Status Cutie",
                "width": "",
                "align": "left",
                "formatter": "color",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 0,
        "cts": false,
        "x": 610,
        "y": 280,
        "wires": []
    },
    {
        "id": "6330219bb2ab7ec9",
        "type": "ui_group",
        "name": "G1",
        "tab": "e3950d42c787dcee",
        "order": 1,
        "disp": true,
        "width": "14",
        "collapse": false,
        "className": ""
    },
    {
        "id": "e3950d42c787dcee",
        "type": "ui_tab",
        "name": "MAIN",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Admin Edit: Removed extra backticks around flow, allowing it to be imported.

your code is having some issue. please repost the code.
may be the ' at the begining and end of code.

meanwhile, have you checked the built in examples of ui-table ?


there is an example of add or update a table.

As far as I remember from a previous thread on this forum, ui-table currently only support updating the full table.
You can consider using the node @omrid01/node-red-dashboard-2-table-tabulator, which has much richer functionality, including single row updates

I believe that the OP is using node-red-node-ui-table with the original node-red-dashboard, not the new flowfuse dashboard. node-red-node-ui-table does allow updating rows in the table.

Yes I played with examples but no result

Do you mean the examples did not work?

OK, so if you are still on dashboard 1, and using its ui-table node, you need to send it a JSON with the updateRow command. If it doesn't work for you, please show us the full msg that you are sending.

Extracted the example relevant for your query.

ui-table

[{"id":"04847ace1184c492","type":"function","z":"34f9e5ef532f7a77","name":"clearData","func":"\nmsg.payload={\n    command:\"clearData\",\n    arguments: [],\n    returnPromise: true\n}\nreturn msg;","outputs":1,"noerr":0,"x":431,"y":400,"wires":[["13be5646f51eb12d"]],"info":"# clear data\n\nunfortunately this command (currently) do not send a promise back! So we have to pass it directly to the table handler"},{"id":"860e5b0c88d02dce","type":"ui_button","z":"34f9e5ef532f7a77","name":"","group":"c91332c0.50c11","order":7,"width":0,"height":0,"passthru":false,"label":"clear","tooltip":"clear all table data","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"","x":200,"y":400,"wires":[["04847ace1184c492"]]},{"id":"466630143aa8ec52","type":"inject","z":"34f9e5ef532f7a77","name":"clear","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":200,"y":434,"wires":[["04847ace1184c492"]]},{"id":"13be5646f51eb12d","type":"ui_table","z":"34f9e5ef532f7a77","group":"237da972.5d69a6","name":"","order":0,"width":"17","height":"9","columns":[{"field":"id","title":"id","width":"","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"timestamp","title":"Timestamp","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"text","title":"Text","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":750,"y":250,"wires":[[]]},{"id":"30338c541aac6867","type":"function","z":"34f9e5ef532f7a77","name":"updateOrAddData (update)","func":"var id=flow.get(\"lastId\") || 0;\nif (id<2) {\n    node.error(\"use only if minimum of 2 Lines existing!\")\n    return;\n}\n\nid=Math.floor(id/2); //\nmsg.payload={\n    command:\"updateOrAddData\",\n    arguments: [\n        [\n            {\n            \"id\":id,\n            \"timestamp\":msg.payload,\n            \"text\":\"updateOrAddData (update) (#\"+id+\")\"\n            }\n        ]\n    ],\n    returnPromise: true\n}\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":250,"wires":[["c0dc6f92180bafb6","13be5646f51eb12d"]],"info":"# updateOrAddData([row])\n\nupdates a the row with an id in the middle from 1 to lastId, hope it exists!\nIf not a row will be added"},{"id":"595136a789dbbc3a","type":"function","z":"34f9e5ef532f7a77","name":"table with n rows as array","func":"var numberOfRows = msg.payload;\nflow.set(\"lastId\",numberOfRows);\nmsg.payload=[];\nfor (let i=1; i<=numberOfRows; i++) {\n    msg.payload.push({\"id\":i,\"timestamp\":Date.now(),\"text\":\"this is line\"+i})\n}\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":144,"wires":[["3ebbc5f5119ad6cd","13be5646f51eb12d"]]},{"id":"c63feec9e1715d35","type":"ui_button","z":"34f9e5ef532f7a77","name":"","group":"c91332c0.50c11","order":5,"width":0,"height":0,"passthru":false,"label":"Update row","tooltip":"update the row in the middle (or add if a row with that id not exists)","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"date","topic":"","topicType":"str","x":220,"y":250,"wires":[["30338c541aac6867"]]},{"id":"030e12664a555d45","type":"inject","z":"34f9e5ef532f7a77","name":"update","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":275,"y":300,"wires":[["30338c541aac6867"]]},{"id":"c0dc6f92180bafb6","type":"debug","z":"34f9e5ef532f7a77","name":"updateOrAddData","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":490,"y":300,"wires":[]},{"id":"20439462afc7204c","type":"ui_button","z":"34f9e5ef532f7a77","name":"","group":"c91332c0.50c11","order":1,"width":0,"height":0,"passthru":false,"label":"Init 5 rows","tooltip":"init table by passing the hole table array (default way)","color":"","bgcolor":"","className":"","icon":"","payload":"5","payloadType":"num","topic":"","topicType":"str","x":230,"y":125,"wires":[["595136a789dbbc3a"]]},{"id":"8b902382130a19a5","type":"inject","z":"34f9e5ef532f7a77","name":"Init 5 rows","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":220,"y":175,"wires":[["595136a789dbbc3a"]]},{"id":"3ebbc5f5119ad6cd","type":"debug","z":"34f9e5ef532f7a77","name":"addRow","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":740,"y":150,"wires":[]},{"id":"c91332c0.50c11","type":"ui_group","name":"commands","tab":"379a501f.53b59","order":2,"disp":true,"width":"6","collapse":false},{"id":"237da972.5d69a6","type":"ui_group","name":"ui-table with commands","tab":"379a501f.53b59","order":1,"disp":true,"width":"17","collapse":false},{"id":"379a501f.53b59","type":"ui_tab","name":"ui-table command","icon":"fa-table","disabled":false,"hidden":false}]
1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.