Hey all. Running Node-Red v2.2.2 with Node.js v16.13.0. I'm running into an issue with node-red-contrib-ui-etable and it's ability to move rows using the drag-n-drop function in Tabulator. I'm trying to create a priority list that can be reprioritized by dragging the rows from one position to another. That's where the problem I'm having comes from. Tabulator works in my browser on their examples page to be able to reorder table items, so I'm under the assumption it's not my browser or Javascript. But I can't get the same functionality out of Node-Red and etable. Any ideas? Here's the simple flow I setup to check functionality. Oh, and before it's asked, I've tried node-red-node-ui-table to see if it would work and there's a lot of other issues I run into with that I can't get around, which is why I'm trying etable instead. [{"id":"aa6de1585066d22a","type":"tab","label":"Priority List","disabled":false,"info":"","env":[]},{"id":"0d0225b7590d0cf4","type":"ui_etable","z":"aa6de1585066d22a","payload":"[{\"rowHandle\":true,\"formatter\":\"handle\",\"headerSort\":false,\"frozen\":true},{\"title\":\"Task\",\"field\":\"task\",\"align\":\"center\",\"editor\":\"input\"}]","payloadType":"json","options":"{\"height\":\"311px\",\"moveablerows\":true}","group":"857146750973efd3","name":"","order":0,"width":0,"height":0,"columns":[],"outputs":1,"cts":false,"x":370,"y":120,"wires":[["9b1a1ef7bf79aefc"]]},{"id":"9b1a1ef7bf79aefc","type":"debug","z":"aa6de1585066d22a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":490,"y":120,"wires":[]},{"id":"c898693218c0f483","type":"inject","z":"aa6de1585066d22a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{},{},{}]","payloadType":"json","x":220,"y":120,"wires":[["0d0225b7590d0cf4"]]},{"id":"857146750973efd3","type":"ui_group","name":"Priority List","tab":"11d2a764d5a3d098","order":1,"disp":true,"width":"20","collapse":true,"className":""},{"id":"11d2a764d5a3d098","type":"ui_tab","name":"Priority List (Experimental)","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

Solved it. It turns out it's a lot easier to use HTTP nodes to send and receive the data in Node-Red and use AJAX to pull the data and the fetch() function to send it back. Seems much more native than most other solutions I've seen. Now I have a fully functional Tabulator table page with the ability to read from and write to the server. Just what I always wanted... :smile:

I just implemented the tabulator-table inside a ui-template node to have full functionality var table = new Tabulator("#example-table", { height:"500px", placeholder:"Keine Daten verfügbar!", layout:"fitColumns", columns:[ {title:"Register", field:"Register", width:150}, {title:"Beschreibung", field:"Beschreibung"}, {title:"Druck (Pascal)", field:"Druck"}, {title:"Offset", field:"Offset", width: 100, hozAlign:"center"}, {title:"Spannweite", field:"Spannweite", width: 130, hozAlign:"center"}, {title:"Minimalwert", field:"Minimalwert", width: 130, hozAlign:"center"}, ], }); (function(scope) { scope.$watch('msg', function(msg) { if(msg) { var tabledata = msg.payload; table.replaceData(tabledata); } }); })(scope); Note to import the libraries inside the http-static-folder.

It's interesting you bring that up. I've been trying to do that for the past little while, but I can't get it to work. I know I'm doing something wrong, probably several things. I've downloaded the tabulator-tables package via npm into the node-red directory, so they exist. But I guess I may have even done that wrong, since I don't know about the http-static-folder. Any chance you could give a quick rundown of how you prepped Node-Red to use Tabulator? Also, do you have a sample flow of this in action? I must admit, the ui-template node eludes me so it's a weakness I don't know how to use yet. I've tried researching it, but I can't figure out how to not only setup the template node, but how to inject data and commands to change the table with and how to handle callbacks so I can react to table interactions. If you had something that covered all of that, it would blow my project wide open.

It's actually not that hard. You just have to create a folder and go to the settings.js file of node-red. Somewhere in there (unfortunately I cant check that right now) you can find a parameter called httpStatic. Just uncomment it and give it the path of the folder you created. (Should look like - httpStatic: "/home/path/to/folder". Thats the folder where you are going to import the packages at. All you have to do now is to import it as you can see in the code snipped I gave you (first two rows). The div-tag is just a container where you will create the table in.

Ok. I actually have a table made now using the examples from the Tabulator page. Interestingly enough, there's an option for using online files, which helped. I tried using your setup as listed and all I had was entries down one side of my table section with no table. But, linking to the online files worked. Now comes my next dilemma. How do I interact with the table? Do I still send messages into the template node and then manipulate msg.payload in some function? How do I get messages out so I can interact with them? Have some function that returns msg? It can't be that simple, can it? Or is it all the same Javascript and I'm just overthinking this all? Yes, I know. My ignorance is showing. But it's early in the morning and I can't associate simple things... EDIT: After having some time to look at things, I'm even more confused now than I was before. Angular makes no sense. All I want to do is read the table data from a file on the Node-Red server and then write the data to the same file every time it's changed. Handling the data in Node-Red is simple. Getting it into the table and then back out again looks nearly impossible. I can guess how it gets sent in with your example above, but I can't find any help getting it back out again since I can't figure out how to have table changes trigger Angular actions to send out the data.

This is the flow I have so far. The table looks good and I think I can manipulate it in any way I want to display what I want. But I'm trying to just spit something (anything) out of the ui-template node and I keep drawing a blank. All I want to do in the end is to make an individual function I can call that will export the table data whenever it's called. I can get input to work, so I've nixed that out of the flow for now while I try and concentrate on output. Any suggestions? [ { "id": "aa6de1585066d22a", "type": "tab", "label": "Priority List", "disabled": false, "info": "", "env": [] }, { "id": "9b1a1ef7bf79aefc", "type": "debug", "z": "aa6de1585066d22a", "name": "", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 450, "y": 120, "wires": [] }, { "id": "4362c08c77c6ba47", "type": "ui_template", "z": "aa6de1585066d22a", "group": "857146750973efd3", "name": "", "order": 2, "width": 0, "height": 0, "format": " \n ", "storeOutMessages": true, "fwdInMessages": true, "resendOnRefresh": true, "templateScope": "global", "className": "", "x": 360, "y": 60, "wires": [ [] ] }, { "id": "470ac1e4fdb8833f", "type": "ui_template", "z": "aa6de1585066d22a", "group": "857146750973efd3", "name": "", "order": 2, "width": "0", "height": "0", "format": " \n \nvar tabledata = [\n {id:1, name:\"Billy Bob\", age:\"12\", gender:\"male\", height:1, col:\"red\", dob:\"\", cheese:1},\n {id:2, name:\"Mary May\", age:\"1\", gender:\"female\", height:2, col:\"blue\", dob:\"14/05/1982\", cheese:true},\n {id:3, name:\"Christine Lobowski\", age:\"42\", height:0, col:\"green\", dob:\"22/05/1982\", cheese:\"true\"},\n {id:4, name:\"Brendon Philips\", age:\"125\", gender:\"male\", height:1, col:\"orange\", dob:\"01/08/1980\"},\n {id:5, name:\"Margret Marmajuke\", age:\"16\", gender:\"female\", height:5, col:\"yellow\", dob:\"31/01/1999\"},\n {id:6, name:\"Billy Bob\", age:\"12\", gender:\"male\", height:1, col:\"red\", dob:\"\", cheese:1},\n {id:7, name:\"Mary May\", age:\"1\", gender:\"female\", height:2, col:\"blue\", dob:\"14/05/1982\", cheese:true},\n {id:8, name:\"Christine Lobowski\", age:\"42\", height:0, col:\"green\", dob:\"22/05/1982\", cheese:\"true\"},\n {id:9, name:\"Brendon Philips\", age:\"125\", gender:\"male\", height:1, col:\"orange\", dob:\"01/08/1980\"},\n {id:10, name:\"Margret Marmajuke\", age:\"16\", gender:\"female\", height:5, col:\"yellow\", dob:\"31/01/1999\"},\n];\n\nvar table = new Tabulator(\"#example-table\", {\n height:\"311px\",\n movableRows:true,\n data:tabledata,\n columns:[\n {rowHandle:true, formatter:\"handle\", headerSort:false, frozen:true, width:30, minWidth:30},\n {title:\"Name\", field:\"name\", width:150},\n {title:\"Progress\", field:\"progress\", formatter:\"progress\", sorter:\"number\"},\n {title:\"Gender\", field:\"gender\"},\n {title:\"Rating\", field:\"rating\", formatter:\"star\", formatterParams:{stars:6}, hozAlign:\"center\", width:120},\n {title:\"Favourite Color\", field:\"col\"},\n {title:\"Date Of Birth\", field:\"dob\", hozAlign:\"center\", sorter:\"date\"},\n {title:\"Driver\", field:\"car\", hozAlign:\"center\", formatter:\"tickCross\"},\n ],\n});\n\n//listen for row move\ntable.on(\"rowMoved\", function(row){\n this.send({payload:\"Row: \" + row.getData().name + \" has been moved\"});\n});\n ", "storeOutMessages": true, "fwdInMessages": false, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 300, "y": 120, "wires": [ [ "9b1a1ef7bf79aefc" ] ] }, { "id": "857146750973efd3", "type": "ui_group", "name": "Priority List", "tab": "11d2a764d5a3d098", "order": 1, "disp": true, "width": "20", "collapse": true, "className": "" }, { "id": "11d2a764d5a3d098", "type": "ui_tab", "name": "Priority List (Experimental)", "icon": "dashboard", "order": 4, "disabled": false, "hidden": false } ] Forgot how to append the flow to the bottom...

Should have gave you one of my recent topics [image] How to build a database connection inside dashboard-template-node Dashboard It's finally working. Thanks for all your effort! (And very sorry for the little dispute) A little summary for everybody who is interested: The flow [image] Every node from left to right (except database): [image] [image] [image] [image] And the code of the table(inside template node): <div id="table-messun…

Node-RED

Node-RED Forum

Node-red-contrib-ui-etable not able to move rows?

Dashboard

JustinB 1 October 2022 11:16 8

Should have gave you one of my recent topics

Topic		Replies	Views
How does it function : node-red-node-ui-table? Dashboard	3	786	12 October 2020
Use Tabulator examples in Node-Red General	5	4320	8 March 2021
Examples for node-red-node-ui-table Dashboard	92	48858	3 July 2020
Node-ui-table: Inconsistent load behavior, leading to changing no. of columns on refresh General	26	968	13 November 2023
New Table node for Dashboard v2.0 Dashboard dashboard-2	22	1353	22 April 2024

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.

Node-red-contrib-ui-etable not able to move rows?

Related topics