Use Tabulator examples in Node-Red

[multixz]

Hello

I want to make a table with the help of http://tabulator.info/. I need addable rows and a safe buttom to store the whole table data. There are examples on http://tabulator.info/examples/4.9#adddel. But I don't quite understand how I can transfer the examples to node-red.

Could anyone help me, please.

[Steve-Mcl]

Ui-table users tabulator under the hood.

[multixz]

What do you mean with "Ui-table users tabulator under the hood." ?
Can you please be little bit more precise?

[Steve-Mcl]

"node-red-node-ui-table (node) - Node-RED" node-red-node-ui-table (node) - Node-RED

[multixz]

I know this documentation. Under the title advanced features it tells me I should switch to the documentation of Tabulator. But I don't understand how I can transfer the examples to nodered. That is what I have achieved:

[{"id":"5fdb3a46.58b504","type":"ui_table","z":"f6f2187d.f17ca8","group":"e2dc63b.75723a","name":"","order":0,"width":0,"height":0,"columns":[],"outputs":1,"cts":true,"x":630,"y":340,"wires":[[]]},{"id":"c63063cd.efae7","type":"inject","z":"f6f2187d.f17ca8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"\",\"volt\":\"Bathroom\",\"status\":0},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":1},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":2},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":3},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":4}]","payloadType":"json","x":220,"y":340,"wires":[["468bd21a.c4707c"]]},{"id":"468bd21a.c4707c","type":"change","z":"f6f2187d.f17ca8","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columns\":[{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Device\",\"field\":\"name\",\"width\":\"40%\",\"align\":\"center\",\"precision\":3},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Akku\",\"field\":\"volt\",\"width\":\"30%\",\"align\":\"right\",\"editor\":\"input\",\"validator\":[\"min:0\",\"max:100\",\"numeric\"]},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Status\",\"field\":\"status\",\"formatter\":\"function(cell, formatterParams, onRendered){var html=\\\"<i class=\\\\\\\"\\\";switch(cell.getValue()) {case 0: html+=\\\"fa fa-battery-empty\\\\\\\" style=\\\\\\\"color:red\\\\\\\"\\\"; break;case 1: html+=\\\"fa fa-battery-quarter\\\\\\\" style=\\\\\\\"color:orange\\\\\\\"\\\"; break;case 2: html+=\\\"fa fa-battery-half\\\\\\\" style=\\\\\\\"color:orange\\\\\\\"\\\"; break;case 3: html+=\\\"fa fa-battery-three-quarters\\\\\\\" style=\\\\\\\"color:orange\\\\\\\"\\\"; break;case 4: html+=\\\"fa fa-battery-full\\\\\\\" style=\\\\\\\"color:green\\\\\\\"\\\"; break;}html+='\\\\\\\"></i>';return html; }\",\"width\":\"30%\",\"align\":\"center\"}],\"layout\":\"fitColumns\",\"movableColumns\":false,\"groupBy\":\"\"},\"customHeight\":20}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":340,"wires":[["5fdb3a46.58b504","d5f4853.841ab78"]]},{"id":"d5f4853.841ab78","type":"debug","z":"f6f2187d.f17ca8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":300,"wires":[]},{"id":"e2dc63b.75723a","type":"ui_group","name":"Standard","tab":"fd1f858e.37a068","order":1,"disp":true,"width":"6","collapse":false},{"id":"fd1f858e.37a068","type":"ui_tab","name":"Tabletest","icon":"dashboard","disabled":false,"hidden":false}]

But how can I add rows to the table with a button?
And how can I get the whole table data?

regards Francesco

[Christian-Me]

Hi Francesco,

your task isn't easy, and asked before.

• you use the standard method, collecting your data in context and send the whole updated table to the dashboard in an array
• you use commands to like "addRow" to add new data. But then your data only exits in tabulator and will soon disappear as the dashboard is only passing the commands to tabulator. So you have to cache the data too.

But there is help

https://flows.nodered.org/flow/35d0480ce9151b2a722fa9d185a37825

You have to pass your data through this subflow. Everything under a specific property will be added to the table and stored. By sending msg.payload.command='getTable'; you will get all your data.

the ui-control is used to update/refresh your table on connects and tab changes

• Tabulator: the tabulator formatting JSON
• the msg property where your data comes in (NOT payload!) like msg.state.col1="This is row 1"
• a index property to identify rows (to be able to overwrite / update rows)
• maxRows and maxStore to limit rows in tabulator and in context store
• The Dashboard Tab name (to trigger redraws only if this tab is active)
• a json where and who to store your data.

I haven't imported your flow, sorry, no time.