# Dragable elements in dashboard

**URL:** <https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631>\
**Category:** Dashboard\
**Created:** [4 March 2020 19:13 UTC](https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631 "2020-03-04T19:13:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [4 March 2020 19:13 UTC](https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631/1 "2020-03-04T19:13:35Z")

</div>

I want to create a dashboard that contains two tables. The first table will contain data from an array.

I would like to be able to drag one or more table elements to another table and get the values as a payload in node red.

Does anyone have any idea how to achieve this

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 March 2020 18:10 UTC](https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631/2 "2020-03-05T18:10:49Z")

</div>

Sorry, have no idea how you could do that in Dashboard though doubtless it is possible with enough coding.

With uibuilder and VueJS, you could use one of the drag-drop components for Vue. I think that was raised in another thread some while back.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [5 March 2020 21:07 UTC](https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631/3 "2020-03-05T21:07:06Z")

</div>

If you are using ui-table it is probably possible but need a little bit of JavaScript knowledge (or the openness to learn) and to read the docs:

> **[Tabulator - Examples](https://tabulator.info/examples/4.5)**
>
> Interactive examples of all the features available in Tabulator tables and data grids

(there is a drag and drop example included)

I wrote a little example to demonstrate copy paste here:

> [@Using copy paste table data via dashboard](https://discourse.nodered.org/t/using-copy-paste-table-data-via-dashboard/21888/34):
>
> And here you are: You need only one callback function I included in a separate function note for better readability (do not wire this into your flow). The change node does the preparation of the table with a msg.ui\_control object. Because you need minimum one cell to paste into (you can`t paste into an empty table) I put in some dummy data It is not necessary to configure the the table node only tick "send data on click" to activate the output. And in Node-RED: [ima…

Perhaps it could give you a little kickstart.

---

<div class="post-metadata">

**Author:** ![olab](https://avatars.discourse-cdn.com/v4/letter/o/d07c76/32.png) [@olab](https://discourse.nodered.org/u/olab)\
**Post date:** [6 March 2020 18:48 UTC](https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631/4 "2020-03-06T18:48:17Z")

</div>

looks like the Tabulator has the functionality I need, but there are som work to configure it in Node-red for a newbie....

Can yo tell me how to name the table through ui\_control instead of

var table = new Tabulator(" **#example-table**", {  
data:tabledata,  
autoColumns:true,  
});

??

Kind regards

O

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [6 March 2020 20:33 UTC](https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631/5 "2020-03-06T20:33:51Z")

</div>

You right spotted the problem I already recognized this morning after I looked at the example code. I have to look in the code. Right now It is not possible (EDIT:) **not doable** ~~but certainly It is doable~~.

But another way is perhaps to find a way to query the css selector by placing a callback on the destination table, send the selector name to Node-RED and modify the configuration of the source table with an ui\_control message.

It would try the `tableBuilding` or `tableBuild` callback and place a `debugger;` statement there. Then inspect the this.table object and lookout for the selector. Then use `this.send` as described to send the data to Node-RED.  
Look at the copy past example how to install / use a callback.

EDIT:  
This is the selector of one of my tables: `#ui_table-8137`. I expect the id is given by the dashboard and therefore not changeable. So I would go the callback route.

---

<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:** [5 April 2020 20:38 UTC](https://discourse.nodered.org/t/dragable-elements-in-dashboard/22631/6 "2020-04-05T20:38:45Z")

</div>

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