Custom sorting in the admin panel

[SuddenDev]

First of all: I really like payload. I only have started today trying out a few things and I have to stay you did an amazing job! I've tried many other headless CMS' (e.g. headless Wordpress, Strapi, Prismic, etc.) and I have to say that yours is easily one of the better developer experiences. What I love most is your simplicity in how to set it up and how to shape it into what you need!
Especially compared to Strapi it seems so lightweight and not bloated, while still having important features like localization and file upload.

One thing I do miss though is custom sorting collections or globals. Is this already on your roadmap? I think especially drag and drop would be really great with that.

Thank you for your great work! I think I'll stick around and I'm really excited for the roadmap!

[denolfe]

Hey @SuddenDev, thanks for the kind words! We definitely think there is room in the space for a different approach.

Regarding custom sorting, remembering custom sort and filter settings is on our roadmap (hopefully public soon). Any expectations from a feature like that? I'd be happy to add any input to our internal discussions for the feature.

[jmikrut]

Also, to follow up, you can currently sort documents by clicking on the up / down arrows in the List view's table headings:

And you also can customize which columns are available in the List view:

By toggling columns on and off, you can set the order of columns right now but we do plan to "save" column order in the future.

One other note - you can set default columns and column order on a collection by collection basis:

const CollectionName: CollectionConfig = {
  slug: 'collection-slug-here',
  admin: {
    defaultColumns: ['email', 'firstName', 'lastName', 'createdAt'],
  },
  fields: [
   // ...
  ],
};

[SuddenDev]

@jmikrut Thanks for the idea and insight on that! I was thinking more on changing the order so the user could change the order of their blog posts for example. A save feature would be great as a work around though! I mean you could setup a field that auto increments on the create hook or something and when the user changes that field manually it could be used for sorting in your application. Also more of a workaround I guess.

@denolfe Great to hear that it's already on your list! I think what I would like is to be able to just drag and drop entities in the list view, because from a UX point of view, users are accustomed to it. Maybe with a little handle at the beginning of each row?
Also moving multiple items at the same time might be cool, but that's a lot more complex i think.
At last, I've had clients who wanted different orders / sortings on different pages / categories for products for example, which sometimes really is not possible. I'm just mentioning this for giving an edge case as well.

[jmikrut]

Hey @SuddenDev — I want to make sure I'm understanding what you are looking for.

Great to hear that it's already on your list! I think what I would like is to be able to just drag and drop entities in the list view, because from a UX point of view, users are accustomed to it. Maybe with a little handle at the beginning of each row?

By this, do you mean arrange from top to bottom, the rows in the table? Depending on how the table is sorted, this could be problematic. The rows are sorted by a specified criteria, like createdAt, updatedAt, alphabetically by title, etc. So dragging and dropping would not take permanent effect. Am I understanding correctly?

Also, on another note:

At last, I've had clients who wanted different orders / sortings on different pages / categories for products for example, which sometimes really is not possible. I'm just mentioning this for giving an edge case as well.

This is 100% possible with Payload right now by using the sort property:

https://payloadcms.com/docs/queries/overview#sort

So you could easily fetch products, for example, having them be sorted by different criteria on different views within your app.

Let me know what you think about the above.

[SuddenDev]

Hey @jmikrut, sorry for my late reply.

By this, do you mean arrange from top to bottom, the rows in the table? Depending on how the table is sorted, this could be problematic. The rows are sorted by a specified criteria, like createdAt, updatedAt, alphabetically by title, etc. So dragging and dropping would not take permanent effect. Am I understanding correctly?

Yeah, that was how I was thinking it could work. You're right though, that this may interfere with the default sorting. Basically something like this: https://www.youtube.com/watch?v=TaigowizlLA (sorry for the crappy video, but it was the first to pop up.)
Here, there's an extra sorting for the custom order of the pages. This is not perfect either, but maybe it would be a workaround?

This is 100% possible with Payload right now by using the sort property:
https://payloadcms.com/docs/queries/overview#sort
So you could easily fetch products, for example, having them be sorted by different criteria on different views within your app.

Perfect! I will probably give this a try in the future. Thanks!
Cheers

[chadsparrow]

Hello!

Just wondering if there was any progress on something like the OP asked for. Here is my scenario. Much like the OP, I love Payload, but one thing I struggle with especially in ecommerce is those clients that want to physically say "we want this product to be listed at the top of the pagefirst, this product second, etc.."

I've been able to use a field like sortOrder and go 0,1,2,3 etc etc... but that's a lot of manual work, especially if I have to change the sortOrder numbers in the future. Ive even tried to look into hooks with no real solution anywhere on the interwebs to prepopulate the field based on the size of the collection and if they are manually changed a hook would go through and rewrite the sortOrder field for all in the collection to shuffle the numbers down (eg. I make a products sortOrder 5, when there is already 5 and 5-9 become 6-10, while my updated/new item's sortOrder stays @ 5.

Please let me know if there is a workaround for my use-case.

Much appreciated.

[ChrisGV04]

Yeah! This feature would be wonderful and it's a pain that it doesn't exist yet. Many customers of mine have requested it with frustration that they can't sort their data with a custom order (services, posts, job listings, portfolio projects, etc...)

Directus does this somewhat nicely. If you enable the "sort" property for a collection, the table view automatically adds a draggable icon to indicate that you can drag documents into a custom order and automatically updates the order field with the numeric value of the custom order.

It's very useful for collections with <15 active documents that you might want to order a certain way with drag-and-drop.

[GermanJablo]

Closing as duplicated of #1413