Following on from @ben's excellent video demonstration of dragging items to reorder them, is it possible to add this to a BS5 generated table?
1 Like
Interesting question
Hoping for an interesting answer 
Really busy with non wappler related stuff but will give it some thought.
Never used it but would the brightyard gridstack extension not do what you need?
Thanks Brian. It might well do, I've not used it either. Looks good though.
@sitestreet you're asking for something like this?:
2 Likes
The Wappler UI doesnât support it so youâll have to make adjustments manually but you can change the tableâs repeat to a form repeat and put the table inside a server connect form. Youâll need to also set the handle css and sortable properties. I usually just add an empty form repeat to the page, use it as a reference and then remove it.
@George it would be useful if form repeat could be added to the âconvert toâ dropdown for divs. I use it with list groups, images, tables etc. not just form rows
1 Like
Yes, this is what I'm after.
To add a bit more to this... I have about 1200 rows which are displayed with pagination with 20 to a page. Would I need to update all 1200 records? This seems a bit of an overhead so I'm trying to work out a better way.
That would be brilliant.
Jon, the key thing to keep in mind is that a table generated from a Server Connect query is fundamentally a GET operation. Even though the rows are dynamic, the output is still static HTML at the moment itâs rendered. That means:
- The table displays data
- But it does not contain any writable fields
- And therefore it cannot submit changes back to the database
Sorting (dragâandâdrop reordering) only works when the new order can be saved, and that requires POSTing the updated rank values.
What you need to do instead
To make sorting persist:
-
Wrap the table in a Server Connect Form
This converts the interaction from a readâonly GET to a writable POST. -
Convert the repeat region to a Form Repeat
Each row then becomes part of the form submission. -
Add a hidden input for the rank/order field
Example:<input type="hidden" name="rank" dmx-bind:value="order_index">This is the value that gets updated when the user drags items.
-
Update the rank values on dragâandâdrop
Sortable updates the order; the form inputs capture it. -
Submit the form to save the new order
Your server action updates the database with the new ranks.
Why this is required
Sorting is not just a UI trick â itâs a dataâchanging operation.
To persist it, the UI must:
- Contain form inputs
- Be inside a form
- Submit to a server action
A plain table generated from a GET simply cannot do that.
2 Likes
Jon, great question â and this is exactly where most people hit the âahaâ moment with sortable lists.
Short answer:
No, you donât need to update all 1200 records. You only update the records whose order actually changed.
Pagination doesnât break sortable logic â it just changes how you apply it.
How sorting works when pagination is involved
When you paginate 1200 rows into pages of 20:
- You are not sorting the entire dataset at once
- You are only sorting the 20 items currently visible
- Only those 20 items receive new rank values
- Only those 20 items need to be saved
So the overhead is tiny.
Edit: In case you are wondering, I used AI to formulate the replies in a more understandable manner, but only after I gave the proper instructions.
1 Like
Just an observationâŚ
If the pagination is fixed to 20 per page, a user can never drag from item 21 to 20, for example. You might want to allow the user to choose between a few page lengths
1 Like
Yep, I plan to let them choose the number of rows per page (I usually provide a select containing options like 10, 20, 50, 100, 250, ALL) so the solution will need to allow for that.
The first thing I thought when reading your replies was "he used AI" 
Thanks for the helpful info. I will implement it and let you know how it goes.
2 Likes