Add sorting ability to list of entries

[phae]

User needs:

• to more efficiently be able to locate a post when browsing manually

So, we should add some basic filters to reorder the list of posts that have already gone live.

Minimum options for now.

Acceptance criteria:

• User can click a link to re-order the posts from newest to oldest, and visa versa
• User can click a link to re-order the posts in alphabetical and reverse-alphabetical
  Paginate published posts in overview #50 is prerequisite for this.

[loremipson]

Requesting some more flexibility here. What do you all think about accepting some optional yaml in the config that would result in both additional fields being displayed in the entry list, as well as making them sortable?

Something like:

collections:
  - name: posts
     label: Posts
     folder: src/posts
     create: true
     fields:
       - { name: title, label: Title, widget: string }
       - { name: publishedDate, label: Published Date, widget: datetime }
       - { name: editedDate, label: Edited Date, widget: datetime }
       - { name: body, label: Body, widget: markdown }
     sortableFields: ["title", "publishedDate", "editedDate"]

[mittalyashu]

I have created this. It is similar to what @phae said.

Check the source file.

[tomrutgers]

Looks good! I would split the ascending / descending functionality from the select box though. So a select box to select the sort modifier and one button to switch between ascending and descending.

[mittalyashu]

That will take too much of space from design prospective. Why not just keep inside a single component.

I know the title of the button is wrong, but the image is just to show the design.

[enriquemorenotent]

Is this request really 2 years old? This is so important!

[Herohtar]

@mittalyashu Taking more space is preferable to having a confusing UI component. "Ascending" and "Descending" are sort directions and should be separate from the list of fields to sort by. Not to mention that the way they're displayed there implies you can somehow select both at once.

[tomrutgers]

I agree with @Herohtar. Also: it does not have to take up extra space. If you move the asc/desc icon out of the select box and use it as a button you'd have the outcome I mean.

[mittalyashu]

Okay, I will try and do some brainstorming 😜.

[JasonHanley]

Very impressed with many aspects of this project, but from the perspective of someone evaluating different static CMS tools, having content show up in hard-coded reverse-alphabetical order is a fairly glaring deficiency, and makes it unsuitable for production use. Not being a React expert, I can't even find where in the source to change this.

I'd be happy just to have a simple config option control this, and that might be simpler to implement.
sort: [fieldname] [asc|desc]

In the meantime, is someone able to point me to the source where this is hard-coded?

[enriquemorenotent]

@JasonHanley That is an interesting thought. I never considered hacking it myself :D

I have not really taken time to analize it well, but my bet would be in this file:

https://github.com/netlify/netlify-cms/blob/master/packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js

Either line: #50 or #55. Not sure which one of those 2 methods is used, but I would bet that one of those 2 arrays (or maybe boths) need a sort function.

[erquhart]

Note that this is more complex than it seems - in many cases you're dealing with a paginated list, in which case more entries load as you scroll. Sorting would therefore have to be supported by the backend in use, or else we need to load all pages up front before sorting.

_{Sent with GitHawk}

[JasonHanley]

Ugh, I do see the trickiness, assuming you're using something like https://developer.atlassian.com/bitbucket/api/2/reference/resource/repositories/%7Busername%7D/%7Brepo_slug%7D/src/%7Bnode%7D/%7Bpath%7D to list the files in a folder.

The best you could do is sort by file name or file size. In that case, I don't see any way to avoid loading, parsing, and caching all entries upfront. It's a bit of a shame you have to load the entire file just to get the front matter.

[erquhart]

I spoke w/ @Benaiah recently about using sha's to pseudo cache. The big 3 Git hosts all provide some kind of commit diffing via API:

• GitHub
• GitLab
• Bitbucket

With the ability to see files that changed between two commits, we can create a sort of index in a data file in your repo, updating changed bits on load, and never needing to download all entries (except to create the original cache, or if the cache is somehow lost).

Still some work to do on the concept, but it does feel feasible.

[BIIGitHub]

Any updates on this??

[shushugah]

Bump, my file names are numeric based, and it's annoying that right now it sorts by, without any option to sort by date

1.md
10.md 
11.md
2.md
3.md

[marcneander]

Would love an update on this.

Currently no way to sort in a decent way? Best workaround I've found is using "{{year}}-{{month}}-{{day}}" or similar as slug. However, when updating an item NetlifyCMS is not updating filenames.

Am I doing something wrong or are we missing this very basic and crucial feature?

[erezrokah]

Best thing you can do is up vote the issue as we use it for prioritization. This is currently number 4: https://github.com/netlify/netlify-cms/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc

[bencao]

definitely an up vote for this feature.

[cloudcrestconsulting]

Any update on this?

[erezrokah]

This is next on our list. We needed to pay off some tech debt to make this happen (#3316)

[JeffML]

I would hope we could filter by draft/published status as well.

[erquhart]

Latest decisions:

• Implement for all backends
• Control sorting via UI!
  • This does not mean drag and drop, that's a whole other thing: Entry ordering - any interest? #475
• Defaults:
  • "Updated" - uses Git to sort files by most recently changed
  • Inferred fields - title and date
• Configuration can be used to sort by any field

[erezrokah]

Just to get a feel for it:

[chocobuckle]

@erquhart By "sort in ui", do you mean we'll be able to click and drag items to new positions?

[erezrokah]

I'd be happy just to have a simple config option control this, and that might be simpler to implement.
sort: [fieldname] [asc|desc]

@chocobuckle I think he means that you can control sorting from the UI as opposed to the comment I quoted. Drag and drop is more related to #475

[ChrisLasar]

Just in case you have note considered it yet: A couple of days ago I found a wonderful "a table enhancing plug-in for the jQuery Javascript library" on Github, which might add wonderful sorting, filtering and grouping features to the great NetlifyCMS solution. See https://github.com/DataTables/DataTables for more information.

[austincondiff]

In v3-ui-redesign we are working on exactly this. We’ve created this list view where you can click on the table headings and also drag items in a custom order.

Check it out here...
https://storybook.netlifycms.org/?path=/story/components-table--table

[wing5wong]

Will this implementation deal with a large list as well - say 200 + items

[austincondiff]

@wing5wong I plan to virtualize these rows with react-window. So it should handle 200+ items easily.

[didia]

Wow! Enfin! Congratulations on closing this one. It's been more than 3 years waiting for this! Good Job team!

[jacobpake]

Glad to be able to unsubscribe from this, thank you team

[equivalentideas]

Congrats on this implementation @erezrokah @erquhart it works really well 💐 :)

My team have a long lists of post and want to have the latest post first, because it's not always easy to remember the name of a post you're looking for to find it and edit it. Latest-post-first is how we present posts on the frontend, and it's not obvious to them why it would be different on the back-end.

Is it possible to set a date field to be the default from sortableFields and control the direction? or would that be a new feature?

[erezrokah]

@equivalentideas Thanks 😄
The reason for not to have a default sort was that sorting requires reading all entries (since it's done client side) which can take some time with large collections, and once a user sorts a collection, that preference is persisted so it's a one time thing.

With that said, since this is not the first time I've heard of that request it's looks like it would make sense to be able to opt in to a default sort method with the cost of a slow first load.
Does that makes sense? Do you mind opening a feature request with your suggestion?