New Twiddle

components.list-table.js

import Ember from 'ember';
import Table from 'ember-light-table';

const {
  computed,
  get,
  isPresent,
  observer,
  set,
  setProperties
} = Ember;

export default Ember.Component.extend({
  tagName: 'section',
  classNameBindings: [
    ':list-table'
  ],

  columns: [],
  dir: 'asc',
  filterKey: '',
  rows: [],
  sort: null,
  table: null,
  title: null,
  transitionTo: 'transitionTo',

  filteredRows: computed('sortedRows', 'filterKey', 'columns', function() {
    let columns = get(this, 'columns');
    let filterKey = get(this, 'filterKey');
    let rows = get(this, 'sortedRows');

    let filteredRows = rows.filter((row) => {
      return columns.any((column) => {
        let value = get(row, get(column, 'valuePath'));
        let ret = false;
        if (isPresent(value)) {
          ret = value.toString().toLowerCase().indexOf(filterKey) !== -1;
        }
        return ret;
      });
    });
    return filteredRows;
  }),

  sortAsc: true,
  sortBy: '',
  sortDefinition: computed('sortAsc', 'sortBy', function() {
    let sortBy = get(this, 'sortBy');
    let sortOrder = get(this, 'sortAsc') ? 'asc' : 'desc';
    return [`${sortBy}:${sortOrder}`];
  }),
  sortedRows: computed.sort('rows', 'sortDefinition'),

  init() {
    this._super(...arguments);
    set(this, 'table', new Table(get(this, 'columns'), get(this, 'filteredRows')));
  },

  didUpdateAttrs() {
    this._super(...arguments);
    set(this, 'sortBy', '');
    get(this, 'table').setColumns(get(this, 'columns'));
  },

  filteredRowsDidChange: observer('filteredRows', function() {
    get(this, 'table').setRows(get(this, 'filteredRows'));
  }),

  actions: {
    sortByColumn(column) {
      if (column.sorted) {
        let obj = {
          sortAsc: column.ascending,
          sortBy: get(column, 'valuePath')
        };
        setProperties(this, obj);
      }
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

{{list-table
	title="Locations"
  columns=(array
  	(hash
    	label="id"
      valuePath="id"
    )
  	(hash
    	label="Name"
      valuePath="name"
		)
  )
  rows=(array
  	(hash
    	id="1"
      name="fooJ"
    )
    (hash
    	id="2"
      name="fooI"
    )
    (hash
    	id="3"
      name="fooH"
    )
    (hash
    	id="4"
      name="fooG"
    )
    (hash
    	id="5"
      name="fooF"
    )
    (hash
    	id="6"
      name="fooE"
    )
    (hash
    	id="7"
      name="fooD"
    )
    (hash
    	id="8"
      name="fooC"
    )
    (hash
    	id="9"
      name="fooB"
    )
    (hash
    	id="10"
      name="fooA"
    )
  )
}}

templates.components.list-table.hbs

{{#if title}}
  <h2 class="list-table-title">{{title}} {{#if filteredRows.length}}({{filteredRows.length}}){{/if}}</h2>
{{/if}}
{{input value=filterKey}}
{{#light-table table as |t|}}
  {{t.head
    iconAscending='fa fa-sort-asc'
    iconDescending='fa fa-sort-desc'
    onColumnClick=(action 'sortByColumn')
  }}

  {{#t.body canSelect=false as |body|}}
    {{#if isLoading}}
      {{#body.loader}}
        Loading...
      {{/body.loader}}
    {{/if}}

    {{#if table.isEmpty}}
      {{#body.no-data}}
        No data found.
      {{/body.no-data}}
    {{/if}}
  {{/t.body}}
{{/light-table}}

twiddle.json

{
  "version": "0.10.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.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {
  	"ember-light-table": "1.0.1"
  }
}