Table_node doesn't keeps refresh itself

[colin0031]

Hello,

I m using "node-red-node-ui-table", its configured it in a way that to show 10 rows and I have to refresh the browser everytime to see the updated row(except first time when the table is empty).

Is there anyway to display the new rows automatically? without refreshing browser?

[E1cid]

Always good to search the forum and look at examples in import examples

[colin0031]

Hello,

I have gone through your post. It sounds promising, however after injecting first array into table node it doesn't show up.. needs to refresh browser.

Secondly I want to only display only 10 values but it keeps adding more and more rows, and its limiting back to 10 when I refresh the browser.

[
    {
        "id": "06364b1086f314a9",
        "type": "inject",
        "z": "146ab432f501375f",
        "name": "protective stops",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "55",
        "payloadType": "num",
        "x": 980,
        "y": 160,
        "wires": [
            [
                "7d5f919e98e7b54c"
            ]
        ]
    },
    {
        "id": "1c3f0ce56cf569c1",
        "type": "debug",
        "z": "146ab432f501375f",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1430,
        "y": 100,
        "wires": []
    },
    {
        "id": "47ae6592dd4f0794",
        "type": "ui_table",
        "z": "146ab432f501375f",
        "group": "aa46c0b775d6218d",
        "name": "",
        "order": 2,
        "width": "17",
        "height": "23",
        "columns": [],
        "outputs": 0,
        "cts": false,
        "x": 1510,
        "y": 160,
        "wires": []
    },
    {
        "id": "7d5f919e98e7b54c",
        "type": "function",
        "z": "146ab432f501375f",
        "name": "",
        "func": "flow.set(\"stops\",msg.payload)\nvar g=flow.get(\"stops\");\n\n\nlet tableData=flow.get(\"savedData\")||[];\nlet new_row = {\n    \"Job_no\"  : g,\n    \"Timestamp\":new Date()+3\n};\ntableData.unshift(new_row);\n\nif(tableData.length>10) tableData.pop();\n\nmsg.payload = {\n    command: \"addRow\",\n    arguments: [\n        new_row,\n        true\n    ],\n    returnPromise: true\n}\nflow.set(\"savedData\",tableData);\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1260,
        "y": 160,
        "wires": [
            [
                "47ae6592dd4f0794",
                "1c3f0ce56cf569c1"
            ]
        ]
    },
    {
        "id": "8ac248f6c2349128",
        "type": "change",
        "z": "146ab432f501375f",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "savedData",
                "tot": "flow"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1200,
        "y": 100,
        "wires": [
            [
                "47ae6592dd4f0794"
            ]
        ]
    },
    {
        "id": "cbd990a7eb63bf13",
        "type": "ui_ui_control",
        "z": "146ab432f501375f",
        "name": "",
        "events": "connect",
        "x": 1020,
        "y": 100,
        "wires": [
            [
                "8ac248f6c2349128"
            ]
        ]
    },
    {
        "id": "c0fd4c30e66149af",
        "type": "inject",
        "z": "146ab432f501375f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "json",
        "x": 1090,
        "y": 200,
        "wires": [
            [
                "47ae6592dd4f0794"
            ]
        ]
    },
    {
        "id": "aa46c0b775d6218d",
        "type": "ui_group",
        "name": "FOR TEST",
        "tab": "1e2a831c6d966e23",
        "order": 3,
        "disp": true,
        "width": "12",
        "collapse": false,
        "className": ""
    },
    {
        "id": "1e2a831c6d966e23",
        "type": "ui_tab",
        "name": "nodered example",
        "icon": "dashboard",
        "order": 35,
        "disabled": false,
        "hidden": false
    }
]

[E1cid]

I did not show the post as a solution, just as an example of how to handle adding rows. I also pointed out where examples of deleting rows could be found.

Here is an example of adding rows and deleting, each row has an id, used to delete it

[{"id":"d3a74fc7ec1a4dcf","type":"ui_ui_control","z":"b9860b4b9de8c8da","name":"","events":"connect","x":180,"y":4580,"wires":[["02d9152c4da07bf6"]]},{"id":"02d9152c4da07bf6","type":"change","z":"b9860b4b9de8c8da","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"saved_data","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":4580,"wires":[["eb9899fb546b228b"]]},{"id":"222ccd80df619936","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":4520,"wires":[["02d9152c4da07bf6"]]},{"id":"eb9899fb546b228b","type":"ui_table","z":"b9860b4b9de8c8da","group":"2d4fe667.28f8ba","name":"","order":24,"width":"12","height":"6","columns":[{"field":"date","title":"Date","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"distance","title":"Distance","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":490,"y":4640,"wires":[]},{"id":"6081faa4eda4973e","type":"function","z":"b9860b4b9de8c8da","name":"function 25","func":"let col3 = (Math.random()*20).toFixed(2);\n\nlet table_data = flow.get(\"saved_data\") || [];\nlet table_length = table_data.length\nlet table_start = table_data[0] || {id:-1};\nlet table_end = table_data[table_length - 1]\nlet new_row = {\n    \"id\": table_start.id + 1,\n    \"date\": new Date().toISOString(),\n    \"distance\": col3\n}\ntable_data.unshift(new_row);\n\nif (table_length > 9){\n    table_data.pop();\n    msg.payload = {\n        command: \"deleteRow\",\n        arguments: [table_end.id],\n        returnPromise: true\n    }\n    node.send(msg);\n}\n\nmsg.payload = {\n    command: \"addRow\",\n    arguments: [\n        new_row,\n        true\n    ],\n    returnPromise: true\n}\n\nflow.set(\"saved_data\", table_data);\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":4680,"wires":[["eb9899fb546b228b","61f646e276eea49a"]]},{"id":"ff659d158acf0bd4","type":"inject","z":"b9860b4b9de8c8da","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"one\":1,\"two\":2},{\"one\":4,\"two\":5}]","payloadType":"json","x":170,"y":4660,"wires":[["6081faa4eda4973e"]]},{"id":"2f7ae52116812434","type":"ui_button","z":"b9860b4b9de8c8da","name":"Add Row","group":"2d4fe667.28f8ba","order":25,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":180,"y":4700,"wires":[["6081faa4eda4973e"]]},{"id":"61f646e276eea49a","type":"debug","z":"b9860b4b9de8c8da","name":"debug 297","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":550,"y":4700,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]