Series: Tables of Data

Sorting Tables with SortableMixin

Published on Mar 14, 2015

Learn how to use the SortableMixin to create a table that can sort based on several different criteria, based on user input.

Note: Ember.SortableMixin is now private. Try using Ember.computed.sort instead.


Links

Code

Transcript

Hey, welcome back. Today, we're going to take a break from exploring the Ember inspector and start a series on sorting and filtering. You may recognize this list as the list of hit YouTube videos that I compiled during some of my earlier videos last year. I've added a little bit more information about the day that they're created, and day and time that they were last updated.

Sorting with sortProperties, sortAscending, and arrangedContent

However, right now, they aren't organized very well. Let's say we want to organize the videos based on the time they were created. How would we do that? First, you can make an array controller. However, those are being phased out. So let's make a regular controller. Include the sortable mix-in. So you have your sort properties property in the controller, and it's an array. It sorts based on the first property. Then, if there are ties, it sorts based on the second property. We're just going to use one property today, and that property will be createdAt.

If we go back to our index page, we'll see that it's still not sorting. That's because, in our template, we're looping through the model of our array controller, but sort properties doesn't affect model property. It affects a property called arrangedContent, so if we replaced model with arrangedContent, then the content will sort correctly.

It's sorting, but what if we wanted to have the most recent at the top? For that, we'll need the sortAscending property. sortAscending is a Boolean that defaults to true, so if it's true, lower value goes first. We want the most recent videos up top. That is, the videos with the highest createdAt value. Then we'll need to make sortAscending false. Now we have the most recent up top.

User InterAction

But what if we want to sort by a different property? Maybe we want to sort by author's name. We could go into the code and edit it, but that's not an option for a site's users, who don't have access to the code. It would be great if we could let the users sort by any of our four properties. Fortunately, Ember lets us do that.

Let's make each of the table headers have an action which we'll call "sortBy." The action will take an argument, which is the property that we want to sort by. Let's replicate that for all the table headers. Then we'll create the action in post controller. This version is very simple. You set the sort properties to the property argument. Now, when we click the header, it sorts based on that criteria.

Note, however, that sortAscending is always staying the same. In this case, we've set it to false, so it always sorts in a descending manner. Let's change this. When we click on something for the first time, we want to sort in ascending manner. If we click on it a second time, we want the sort to change directions. We do this by a simple condition that is added into our action. For clicking a property a second time, then we toggle sortAscending. Otherwise, we set sortAscending to true. And we can see that it works.

Conclusion

Today, we learned how to use sortProperties, sortAscending, and arrangedContent to easily sort lists of data. Next time, we're going to provide visual feedback and a more intuitive interface using some advanced component techniques. I'll see you then.

Tables of Data

Subscribe to our mailing list