Table with edit / delete function

Hiho,

I am messing around with getting a simple table to work, where I can edit the cells and delete the rows. Are there any examples for this ?
Thx in advance !

Hi @WhiteLion

Please provide more info.

I assume you mean a "dashboard" table (HTML)? (if yes, please move this thread to Dashboard category on the forum)

Also, assuming dashboard

1 Like

If dashboard 2 then there was this thread that may help Dashboard 2 CRUD node

2 Likes

Yup. And one for MSSQL: Dashboard-2-sqlserverDatabase-crud - #6 by Steve-Mcl

2 Likes

Sry for not getting clear.
Currently I have not switched over to Dashboard 2 and using Dashboard in all flows. If its possible to mix both I would prefer to use a Dashboard 2 node to safe migration on this later. Its not for Database use but I would like to load and save values. I tried eTable and was messing around with my flow but at the end nothing worked:

[{"id":"b1ab4f7b.dac62","type":"ui_form","z":"56b2e27e709db22f","name":"Input Form","label":"Add/Edit Alert","group":"8a82b28c.4bc36","order":0,"width":"6","height":"2","options":[{"label":"Alert Name","value":"alertName","type":"text","required":true,"rows":null},{"label":"Alert Link","value":"alertLink","type":"text","required":true,"rows":null}],"formValue":{"alertName":"","alertLink":""},"payload":"","submit":"submit","cancel":"","topic":"","topicType":"str","splitLayout":false,"className":"","x":150,"y":4220,"wires":[["7b1f03f3.925bac"]]},{"id":"7b1f03f3.925bac","type":"function","z":"56b2e27e709db22f","name":"Add or Edit Row","func":"let row = {\n    \"Alert Name\": msg.payload.alertName,\n    \"Alert Link\": msg.payload.alertLink\n};\n\nif (msg.editing) {\n    msg.payload = {\n        command: \"updateRow\",\n        arguments: [msg.rowIndex, row]\n    };\n} else {\n    msg.payload = {\n        command: \"addRow\",\n        arguments: [row]\n    };\n}\n\nmsg.editing = false;\nreturn msg;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":4220,"wires":[["9f7eb2a6.123b5"]]},{"id":"9f7eb2a6.123b5","type":"ui_table","z":"56b2e27e709db22f","group":"8a82b28c.4bc36","name":"Alert Table","order":1,"width":"6","height":"6","columns":[{"field":"Alert Name","title":"Alert Name","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Alert Link","title":"Alert Link","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"Delete","title":"Delete","width":"","align":"center","formatter":null,"formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":630,"y":4220,"wires":[["a20453f9.32e0d"]]},{"id":"a20453f9.32e0d","type":"function","z":"56b2e27e709db22f","name":"Handle Table Interaction","func":"if (msg.payload.hasOwnProperty('event')) {\n    if (msg.payload.event === 'click') {\n        msg.rowIndex = msg.payload.rowIndex;\n        msg.payload = msg.payload.row;\n        msg.editing = true;\n        return [msg, null];\n    } else if (msg.payload.event === 'button' && msg.payload.field === 'Delete') {\n        msg.payload = {\n            command: \"deleteRow\",\n            arguments: [msg.payload.rowIndex]\n        };\n        return [null, msg];\n    }\n}\nreturn [null, null];","outputs":2,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":870,"y":4220,"wires":[["b1ab4f7b.dac62"],["9f7eb2a6.123b5"]]},{"id":"e15e0244.83a83","type":"inject","z":"56b2e27e709db22f","name":"Send every 10s","props":[{"p":"payload"}],"repeat":"10","crontab":"","once":true,"onceDelay":"2","topic":"","x":150,"y":4280,"wires":[["f5de82de.3319"]]},{"id":"f5de82de.3319","type":"change","z":"56b2e27e709db22f","name":"Get Table Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"command\":\"getData\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":4280,"wires":[["9f7eb2a6.123b5","548b54d8.9bcbcc"]]},{"id":"548b54d8.9bcbcc","type":"function","z":"56b2e27e709db22f","name":"Format JSON","func":"msg.payload = JSON.stringify(msg.payload);\nreturn msg;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":4280,"wires":[["4435644a.981eec"]]},{"id":"4435644a.981eec","type":"debug","z":"56b2e27e709db22f","name":"Output JSON","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":830,"y":4280,"wires":[]},{"id":"8a82b28c.4bc36","type":"ui_group","name":"Alerts","tab":"b9e83139.40de8","order":1,"disp":true,"width":"6","collapse":false},{"id":"b9e83139.40de8","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Thx! I will take a look at it.

both dashboards operate independently of each other so can both be installed together on one system.

I took a look at it and I a bit confused. Do I need Flowfuse to run this example only or Dashboard 2 at all. PS: I dont like to use Flowfuse.

No. It runs in Node-RED. There are some enhancements OOTB when you run Node-RED in flowfuse.

Can I ask why you state that please? FlowFuse invests a lot into node-red so it would be really helpful to understand why you feel this way?

1 Like

Of course, I am not experienced in all the possibilities of FlowFuse, but I am trying to interpret what this may mean for me in the future. What I see is: Dashboard 2, which is already a horror for me when I think of the migration from Dashboard 1, is now bound to FlowFuse. To something that I mostly don't need. FlowFuse is something that will be monitized in the future or even now. - Initially for companies and later perhaps also for private individuals? I've often had bad experiences with Fusion 360, for example, which was initially free, then became more and more restricted and is now virtually unusable unless you subscribe to a subscription model. I'm afraid Node Red has taken a similar path.

Hi @WhiteLion

Dashboard 2 is not in any way bound to FlowFuse - it is published under the same Apache 2 license that the original Dashboard is. The goal has always been to provide a viable alternative to Dashboard 1 following its deprecation; something Joe and the other community contributors continue to work hard on.

Node-RED itself is owned by the OpenJS Foundation - it has an open governance model that means it will always remain an open source project, developed by the community. Whilst companies, (including, but not limited to, FlowFuse), may look to provide commercial offerings around Node-RED, the core will remain available under that basis. This was one of the key principles when I started FlowFuse; that our companies success depends on the ongoing growth and success of the wider Node-RED community.

1 Like

If you go with Dashboard-2.0 (which I highly recommend), @omrid01/node-red-dashboard-2-table-tabulator will give you a table node where you can add, update, delete, search, select & style data, including the ability for in-cell editing.

1 Like

Hi @knolleary

Thank you for the detailed explanation. That calms me down a bit. Although I have to admit that I'm very frustrated because the switch to Dashboard 2.0 leaves me with a ton of writing to do. - At least that's how I see it at the moment. My project has basically grown over the years and includes many thousand nodes. Even if the migration script works. (Which it doesn't do for me), there are about 700 UI nodes left from Dashboard 1.0 that have to be converted manually and take more or less many weeks of work. I find the changeover to be very poorly managed in this respect. As much as I love Node Red and all that, I feel like giving up everything right now because of it.

There is no requirement to move from D1 any time soon. Though no further significant development is being done it should continue to work for a good time yet.

Who do you expect to be managing it? No-one has been paid to look after the original dashboard, it is an open source project. The company FlowFuse is spending a lot of money developing a new dashboard, as the foundation upon which D1 was built is obsolete and no longer supported. Flowfuse is generously making D2 available as another open source project.

2 Likes

As I understood it (I think it was in a video from Knolleary some time ago) D1 should only be supported for another 6 months. I interpreted this to mean that I then have to switch to DB 2.0.
It wasn't meant in a bad way and I would like to emphasize again that I think the community here and the whole project are very good. As I said, I was hoping that the update could be carried out on DB 2.0 and that the flows could then be migrated, for example through a migration that takes over all the properties of each D1 node and can transfer them to D2 (new properties could then be filled in manually) . I tried the migration script and it throws errors and some nodes (e.g. gauge) are not migrated at all - according to Github Issues, this shouldn't change. For me, I would also pay for Node Red if it were a one-time payment and not a subscription model. As I said, I'm complaining here, but the bottom line is that I'm of course very happy about everything that has been created with and around Node Red. Even if it may not come across that way in this thread.