[FEATURE] - change order of records by drag and drop

[DriveSoft]

Summary

Pretty often we need to add order for records by adding an "order" column in a table.

Basic Example

So we could specify in options.tsx a column which is going to be responsible for that feature, to keep the order in that column.

Example:

  SocialLinks: {
     title: "Social links",
     dndOrderColumn: "order",
     list: {
        display: ["name", "icon", "active"]
     },
     edit: {
        display: ["name", "icon", "active"]
     }
  }, 

Drawbacks

No response

Unresolved questions

No response

[cregourd]

Since v.4.0.0 you can do this by adding orderField in field options, this works with relation model and one-to-many relationship as the example below 👇

next-admin/apps/example/options.tsx

Lines 170 to 177 in 262024b

	categories: {
	relationOptionFormatter: (category) => {
	return `${category.name} Cat.${category.id}`;
	},
	display: "list",
	orderField: "order",
	relationshipSearchField: "category",
	},

⚠️ Note that this feature is only available in the listview

Let us know if you have any issue with this issue 🚀

[DriveSoft]

Cool, I did not know that.

But in my case I have a table SocialLinks which does not have any relationships, so I can see records only as a table on main screen and I would like to be able to change order of records on main screen, not on a form.

[cregourd]

Currently, Next-Admin doesn't do submit on list view, it's actually a display page.

As we understand, you need a submit button on list view and drag'n'drop system to change the order field automatically.

But this view is incompatible with current view, because drag'n'drop order can't work with list page using filter system, search or even pagination. So' this feature needs a new page, independent of list and form view

We are working on a new major release, where it might be easier to implement this kind of enhancement.

Let us know if you have some details about the implementation you need 🚀

[DriveSoft]

I got it.
Most of the time you need to change order for data with few records, so what if this feature will work only if there is only one page (with ability to set number of records on a page in model) and when data shows without any filter? :)

[cregourd]

Maybe it's better to keep the normal list view and add a "sort mode" that will remove the search, filter, sort (header columns) and pagination, adds a drag'n'drop and a button to save that save and exit from the "sort mode".

This way we keep the useful list manipulations in the "classic mode" and allow ordering