Dragable elements in dashboard

[olab]

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

[TotallyInformation]

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.

[Christian-Me]

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

(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

And here you are: [image] 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. [copy-paste] And in Node-RED: [ima…

Perhaps it could give you a little kickstart.

[olab]

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

[Christian-Me]

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.