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

**URL:** <https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [26 September 2022 15:33 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239 "2022-09-26T15:33:16Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![madhouse](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@madhouse](https://discourse.nodered.org/u/madhouse)\
**Post date:** [26 September 2022 15:33 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/1 "2022-09-26T15:33:16Z")

</div>

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.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [28 September 2022 11:53 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/2 "2022-09-28T11:53:02Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![madhouse](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@madhouse](https://discourse.nodered.org/u/madhouse)\
**Post date:** [28 September 2022 16:48 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/3 "2022-09-28T16:48:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [28 September 2022 17:24 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/4 "2022-09-28T17:24:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![madhouse](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@madhouse](https://discourse.nodered.org/u/madhouse)\
**Post date:** [29 September 2022 15:01 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/5 "2022-09-29T15:01:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![madhouse](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@madhouse](https://discourse.nodered.org/u/madhouse)\
**Post date:** [29 September 2022 21:22 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/6 "2022-09-29T21:22:02Z")

</div>

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?

```auto
[
    {
        "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...

---

<div class="post-metadata">

**Author:** ![madhouse](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@madhouse](https://discourse.nodered.org/u/madhouse)\
**Post date:** [1 October 2022 01:58 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/7 "2022-10-01T01:58:44Z")

</div>

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... 😄

---

<div class="post-metadata">

**Author:** ![JustinB](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/justinb/32/68068_2.png) [@JustinB](https://discourse.nodered.org/u/JustinB)\
**Post date:** [1 October 2022 11:16 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/8 "2022-10-01T11:16:35Z")

</div>

Should have gave you one of my recent topics

> [@How to build a database connection inside dashboard-template-node](https://discourse.nodered.org/t/how-to-build-a-database-connection-inside-dashboard-template-node/68234/23):
>
> 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 Every node from left to right (except database): [image] [image] And the code of the table(inside template node): \<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="table-messun…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [15 October 2022 11:16 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-etable-not-able-to-move-rows/68239/9 "2022-10-15T11:16:37Z")

</div>

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