New Twiddle

components.my-light-table.js

import Component from '@ember/component';
import { observer } from '@ember/object';

import DynamicTable from '../mixins/ember-light-table-data-mixin';

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

controllers.application.js

import Controller from '@ember/controller';
import { computed } from '@ember/object';

export default Controller.extend({
  columns: 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();
            }
        }
    }
});

templates.application.hbs

{{my-light-table}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-light-table": "1.13.2"
  }
}