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

Dashboard
1

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}]
2

I just implemented the tabulator-table inside a ui-template node to have full functionality

<script type="text/javascript" src="/tabulator-tables/dist/js/tabulator.min.js"></script>
<link rel="stylesheet" href="/tabulator-tables/dist/css/tabulator_semanticui.min.css" />
<div id="example-table"></div>
<script>

    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);
</script>

Note to import the libraries inside the http-static-folder.

3

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.

4

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.

5

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.

6

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": "<link href=\"https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css\" rel=\"stylesheet\">\n <script type=\"text/javascript\" src=\"https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js\"></script>",
        "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": "<div id=\"example-table\"></div>\n<script>\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</script>",
        "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...

7

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:

8

Should have gave you one of my recent topics

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.