Sortable Table Component

components.sortable-table.js

import Ember from 'ember';

export default Ember.Component.extend({
  columns: [],
  evaluatedColumns: [],
  data: [],

  /*
    Currently, only works on one column.
    Can only sort one column at a time.
  */
  sortProps: [],
  sortedData: Ember.computed.sort('data', 'sortProps'),

  didInsertElement() {
    this._super(...arguments);

    this._setDefaultSortProps();
    this._evaluateColumnProperties();
  },

  _setDefaultSortProps() {
    let columns = this.get('columns');
    let firstProperty = columns.firstObject.property;

    this.set('sortProps', [firstProperty + ':asc']);
  },

  _evaluateColumnProperties() {
    let columns = this.get('columns');
    let evaluatedColumns = [];

    columns.forEach(column => {
      /*
        compute showOn, which decide whether or not the
        column is rendered
      */
      if (Ember.isPresent(column.showOn)) {
        let showOn = this.get(column.showOn);
        column.showOn = showOn;
      } else {
        column.showOn = true;
      }

      /*
        computer the sort indicator for each column
      */
      column.sortIndicator = this._sortIndicator(column.property);

      evaluatedColumns.push(column);
    });

    this.set('evaluatedColumns', evaluatedColumns);
  },

  _sortIndicator(field) {
    let currentSort = this.get('sortProps')[0];
    let sort = currentSort.split(':');
    let sortProperty = sort[0];
    let sortDirection = sort[1];

    if (sortProperty === field) {
      return (sortDirection === 'desc') ? '▼' : '▲';
    }

    return '';
  },

  _updateIndicatorForProperty(property) {
    let columns = this.get('evaluatedColumns');
    let sortIndicator = this._sortIndicator(property);

    columns.forEach(item => {
      if (item.property === property) {
        Ember.set(item, 'sortIndicator', sortIndicator);
      } else {
        Ember.set(item, 'sortIndicator', '');
      }
    });

  },

  actions: {
    toggleSort(property) {
      let currentSort = this.get('sortProps')[0];
      let sort = currentSort.split(':');
      let sortProperty = sort[0];
      let sortDirection = sort[1];

      if (property === sortProperty) {
        sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
        this.set('sortProps', [property + ':' + sortDirection]);
      } else {
        this.set('sortProps', [property + ':asc']);
      }

      this._updateIndicatorForProperty(property);
    },
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
    columns: [
    {property: 'userName', title: 'Name' },
    {property: 'userEmail', title: 'Email', showOn: 'model.requiresEmail'},
    {property: 'favoritePhoneBrand', title: 'Brand', showOn: 'model.requiresPhoneBrand'}
    
  ],
  
  model: {
   requiresEmail: true,
   requiresPhoneBrand: true,
   data: [
     { userName: 'Duarte', userEmail: '[email protected]', favoritePhoneBrand: 'Nexus' },
     { userName: 'Jobs', userEmail: '[email protected]', favoritePhoneBrand: 'Apple' },
     { userName: 'Ballmer', userEmail: '[email protected]', favoritePhoneBrand: 'Nexus' }
   ]
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

{{#sortable-table columns=columns model=model data=model.data as |item|}}
  <td>{{item.userName}}</td>
  <td>{{item.userEmail}}</td>
  <td>{{item.favoritePhoneBrand}}</td>
{{/sortable-table}}
<br>
<br>

templates.components.sortable-table.hbs

<table>
  <thead>
  	<tr>
    	{{#each evaluatedColumns as |column| }}
        {{#if column.showOn }}
        	<th> 
          	<a {{action 'toggleSort' column.property}}>
              {{column.title}} {{column.sortIndicator}}
            </a>
          </th>
        {{/if}}
      {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each sortedData as |item| }}
      <tr>
        {{yield item}}
      </tr>
     {{/each}}
  </tbody>
</table>

twiddle.json

{
  "version": "0.7.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": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember-template-compiler.js"
  }
}