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?
Always good to search the forum and look at examples in import examples
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
}
]
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}]
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy