sorting component

components.my-sorter-sort-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNameBindings: ['caret'],
  
  click() {
    const prop = this.get('prop');
    const currentDirection = (this.get('sortKey').find(k => k.startsWith(prop)) || '').split(':')[1];
    const newKey = `${prop}:${currentDirection === 'asc' ? 'desc' : 'asc'}`;
    
    this.sendAction('sort', [newKey]);
  },
  
  caret: Ember.computed('sortKey', 'prop', function() {
    const sortKey = this.get('sortKey');
    const prop = this.get('prop');
    
    if (sortKey.includes(`${prop}:asc`)) {
      return 'caret-up';
    } else if (sortKey.includes(`${prop}:desc`)) {
     	return 'caret-down'; 
    }
  })
});

components.my-sorter.js

import Ember from 'ember';

export default Ember.Component.extend({
  sortKey: ['first:desc'],
  sortedContent: Ember.computed.sort('content', 'sortKey'),
  
  actions: {
    toggleSort(prop) {
      this.set('sortKey', prop);
      return;
      
      const currentKey = this.get('sortKey.firstObject');
      let newKey = `${prop}:asc`;
      if (currentKey === newKey) {
        newKey = `${prop}:desc`;
      }
      
      this.set('sortKey', [newKey]);
    }
  }
});

components.my-table.js

import Ember from 'ember';

export default Ember.Component.extend({

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  people: [
    { first: 'Alice', last: 'Z', active: true },
    { first: 'Bob', last: 'X', active: false },
    { first: 'Carol', last: 'Y', active: true }
  ]
});

helpers.array.js

import Ember from 'ember';

export function array(params/*, hash*/) {
  return params;
}

export default Ember.Helper.helper(array);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.caret-up::after, .caret-down::after {
  display: inline-block;
}

.caret-up::after {
  content: "▲";
}

.caret-down::after {
  content: "▼";
}

templates.application.hbs

{{my-table content=people}}

templates.components.my-sorter-sort-button.hbs

{{yield}}

templates.components.my-sorter.hbs

{{yield (hash 
	content=sortedContent 
  button=(component "my-sorter-sort-button"
  	sortKey=sortKey
  	sort=(action "toggleSort")))}}

templates.components.my-table.hbs

<table>
  {{#my-sorter sortKey=(array "active:asc" "first:asc" "last:asc") content=content as |sorted|}}
    <thead>
      <tr>
      	{{#sorted.button tagName="th" prop="first"}}First{{/sorted.button}}
      	{{#sorted.button tagName="th" prop="last"}}Last{{/sorted.button}}
        <th>Active</th>
      </tr>
    </thead>
    <tbody>

  		{{#each sorted.content as |row|}}
      	<tr>
      		<td>{{row.first}}</td>
      	  <td>{{row.last}}</td>
          <td>{{row.active}}</td>
      	</tr>
    	{{/each}}

    </tbody>
  {{/my-sorter}}
</table>
  

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}