Skip to content

Instantly share code, notes, and snippets.

@kimroen
Last active January 7, 2019 12:07
Show Gist options
  • Save kimroen/aa4a80fa916cb880119bd328466401f6 to your computer and use it in GitHub Desktop.
Save kimroen/aa4a80fa916cb880119bd328466401f6 to your computer and use it in GitHub Desktop.
New Twiddle
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);
}
})
});
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'
}
];
})
});
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();
}
}
}
});
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment