Sortable table using ember composable helper

Questions
#1

Can anyone tell me if it’s possible to make the sort order dynamic in ember-composable-helpers sort-by? I’m trying to make the table sortable on the action of the user. I’ve tried various ways but still couldn’t get it to work. Thanks

{{#each (sort-by "age:desc" users) as |user|}}
    {{user.firstName}} {{user.lastName}} ({{user.age}})
{{/each}}
#2

I made a little ember-twiddle which seems to work as expected. The template looks like this:

<button {{action (mut this.sort) "firstName"}}>First Name</button>
<button {{action (mut this.sort) "lastName"}}>Last Name</button>
<ul>
  {{#each (sort-by this.sort this.users) as |user|}}
    <li>{{user.firstName}} {{user.lastName}}</li>
  {{/each}}
</ul>
#3

Hi dknutsen

Thanks so much for your reply.

I don’t quite understand your solution here, could you please explain a bit more?

So it’s not possible to use the ember-composable-helper built-in sort-by?

Thanks

#4

Sorry should have mentioned, the only reason I defined a custom sort-by in the twiddle was because it seemed like the easiest way to use that helper (i literally just copied/pasted it from ember-composable-helpers so it should be the exact same thing). The template I showed above is really the only important part (as well as making sure the sort has a valid default initial value). All you should have to do is make the first arg you pass to sort-by a bound value, like i did in the twiddle (in that case I used this.sort. It could either be a regular property or a computed property (might be easier to handle the asc/desc case as a computed property). So in the twiddle I’m binding either “lastName” or “firstName” to this.sort which changes how the helper computes the sorted results.

Does that make more sense?

1 Like