ember light table demo

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  columns: Ember.computed(function () {
        return [
          {
            label: 'OrderId',
            valuePath: 'orderId',
            align: 'right',
          },
          {
            label: 'Amount',
            valuePath: 'orderedAmount',
            align: 'right',
          },
          {
            label: 'Order Name',
            valuePath: 'orderName',
            align: 'right',
          },
          ];
    }),
});

mixins.ember-light-table-data-mixin.js

import Table from 'ember-light-table';
import { computed } from '@ember/object';

export default Ember.Mixin.create({
    page: 0,
    limit: 10,
    dir: 'asc',
    sort: '',

    isLoading: false,
    canLoadMore: true,
    enableSync: true,

    model: [],
    meta: null,
    columns: null,
    table: null,

    init(){
        this._super(...arguments);
        this.list = this.list || [];
        let table = new Table(this.get('columns'), this.get('model'), { enableSync: this.get('enableSync') });
        let sortColumn = table.get('allColumns').findBy('valuePath', this.get('sort'));
        // Setup initial sort column
        if (sortColumn) {
            sortColumn.set('sorted', true);
        }
        this.set('table', table);
    },

    actions: {
        onColumnClick(column) {
            this.set('isLoading', true);
            this.onChangeSort({sortProp: this.get('sort'), sortDir: this.get('dir')});
            if (column.sorted) {
                this.setProperties({
                    dir: column.ascending ? 'asc' : 'desc',
                    sort: column.get('valuePath'),
                    canLoadMore: true,
                    page: 0
                });
                this.get('model').clear();
            }
        }
    }
});

my-light-table.component.js

import Component from '@ember/component';
import Ember from 'ember';
import DynamicTable from '../mixins/ember-light-table-data-mixin';
import { observer } from '@ember/object';

export default Component.extend(DynamicTable, {
    sort: '',
    dir: 'asc',
    isLoading: true,
    onDataTableLoad: Ember.observer('dataTable', function() {
        if(this.get('dataTable')) {
            this.get('model').setObjects(this.get('dataTable').toArray());
            this.set('isLoading', false);
        }
    })
});

my-light-table.template.hbs

{{#light-table
    table
    height="35vh" as |t|}}

    {{t.head onColumnClick=(pipe (action 'onColumnClick'))
             iconSortable='fa fa-sort'
             iconAscending='fa fa-sort-asc'
             iconDescending='fa fa-sort-desc'
             fixed=true
    }}

    {{#t.body
        canExpand=canExpand
        canSelect=false
        multiRowExpansion=false
    as |body|
    }}

        {{#body.expanded-row as |row|}}
            {{yield row}}
        {{/body.expanded-row}}

        {{#if isLoading}}
            {{#body.loader}}
                {{c2fo-light-table/c2fo-light-table-loader}}
            {{/body.loader}}
            {{#if table.isEmpty}}
                {{#body.no-data}}
                    So far no Takers found.
                {{/body.no-data}}
            {{/if}}
        {{/if}}

    {{/t.body}}
{{/light-table}}

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return [
      
    ];
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{my-light-table}}
<br>
<br>

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",
    "ember-light-table": "^1.13.2"
  }
}