Series: Tables of Data

highlight selected sort options

Published on Mar 20, 2015

In the first two parts of this series, we created a sorting interface. In this video, we add highlighting- a visual indicator of which sort is currently selected. We also use some shiny new Ember 1.11 syntax.


Links

Code

Transcript

In the last two episodes in this series, we’ve shown how to create a sorting interface. In episode one, the interface was workable but didn’t have any visual indicators. You had to know that you were supposed to click the header. In episode two, we created arrow buttons, which are obviously clickable and also offer more control for the user. In this episode, we’ll be making it easy to tell at a glance what the current sort order is by highlighting the selected option.

To highlight the arrows, we’ll use ‘gold’ class. It just changes the color of the text, or in this case, the unicode arrow. That’s what it looks like. Of course, we’re going to make it so it only highlights the currently selected option.

We only want to apply the highlight when certain conditions are true. We’ll start just caring about the sortProperty, so we’ll use the class isCurrentSort as the condition for both the up and the down arrow. We’re using ember 1.11, but if you’re using 1.10 or before you’ll have to use bind-attr. How do we determine whether isSelected sort is true or false? Let’s look at the information flow. We’re currently giving each component a sortProperty that sets it apart from the other components. We can feed in the sortProperties array and then use that to determine whether each current component has the current sort. Let’s implement this.

We’ll start with the controller, feeding in the sortProperties array as selectedSorts. I use the plural to indicate that it’s still an array. Then we’ll compare the first item in selectedSorts with sortProperty. This feeds back to the conditional classes we already put in place. So only one component is highlighted. Click an arrow in another component, and the highlight changes.

Let’s do the same things for the directionality of the sort. We’ll feed in isAscending to each of the components Then we’ll create upArrowHighlighted and downArrowHighlighted classes. Both of them will be determined by a combination of isCurrentSort and isAscending. We’ll make the gold class dependent on upArrowHighlighted and downArrowHighlighted. And now we have the current sort highlighted.

Even though the component calls are a bit more verbose now, it’s important to note that the conditional highlighting would have been much more verbose and convoluted had we not been using a component. The component let us separate scope and therefore reuse logic.

This is looking like a pretty complete feature, but there’s one more thing. When we refresh the page, it goes back to sorting by createdAt. In this week’s pro episode, we’ll use query parameters to save our sorting state in the url, and then replace our actions with links.

Tables of Data

Subscribe to our mailing list