Drag and drop items in a table row order UI?

HI

I need to be able to change the order of items shown in a repeat table by dragging and dropping the order of the table row data.

Has anyone been able to do this in Wappler successfully?

Currently not available in Wappler but you may want to vote and follow this feature request.

2 Likes

Thanks! Done.

I did find this which does what I need, but would be so much better if I could just choose tick a box in the table properties window in Wappler :slight_smile: : https://bootstrap-table.com/docs/extensions/reorder-rows/

https://examples.bootstrap-table.com/#extensions/reorder-rows.html

I have used Sortable JS in Wappler using a lot of custom JS.
Drag-drop/Sorting etc have been a long demanded UI feature in the community. But no luck yet.

Haven’t seen much need for it in our projects, unless there is a very specific requirement. We just put in a “Order” column with numeric input for normal cases.

1 Like

I probably need this in every project and use the method from this demo by @t11 here. I think @ben has also created a demo.

I agree - it would be great if this were included in Wappler.

2 Likes

I’ve been praying every Wednesday evening for this and Kanban style functionality to arrive one Thursday

3 Likes

Is this still on the cards @George ?

Not on our top priority list at the moment.

Hi @Tom and @t11, I have been trying the sort script by Nikolaos but have some strange behaviour. As per his video, I am trying to update the database and then refresh the list. The TR that I have moved tends to jump one line as do all of the rest of the lines involved in the swap. I press the button again and it jumps another line etc etc. I cannot figure out what is happening.

A page refresh (the starting point)…

Move bottom line (119) to 2nd position…

Press “Update Order” and line ‘119’ has jumped, or I should say, line ‘118’ has now moved up from the last position to position 2…

Press “Update Order” again and line ‘119’ has jumped again, or I should say, this time line ‘117’ has now moved up from the last position to position 2…

Do you have an update to the script, have you made any changes or done it differently?

Hello,
no I do not have an update script but think it should be woriking. Do you have a live demo or maybe send me the files to check it out?

Thank you!

Sent you a PM. Feel free to play.

I’m going to have another look, taking things back to basics :smile:

Hi @t11

A question about your script?

Would this be suitable to use to simply change the order of a row item in a table.

So drag the order of a row and then trigger a server connect to save the new item order etc… or is it only used for images?

Hi @sid

I had a look at https://github.com/SortableJS/Sortable and looks pretty cool, but wonder how difficult it is to use to create a table row order drag and drop and save the new row order?

Does it require advanced js script knowledge?

Yes it does.
Not expert level stuff. But not very easy either. Requires ability to understand the library API and integrating it with Wappler side of things.

This is exactly what it does. It’s not for images particularly.

1 Like

A very useful feature, I seriously don’t understand how this is not yet native to wappler

3 Likes

It would be be worth some jscript wiz creating a server connect extension. I am sure there would be Wappler users willing to pay a fee to purchase such an extension.

HI @t11

Where would I find the script used in your video to set up reordering?

many thanks!

Setting up sortable is actually not a server connect process, except for a simple api to update the order. Until we get an app connect extension, it’s all manual to get the scripts setup and configured. But it is a great library for drag/drop.

Thanks @mebeingken

I think I might just leave this task to the end and focus on the stuff I can do now with the hope it might one day happen or as time passes I learn more and can implement it myself.