Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save kimroen/ac8364aee75d5edab8deebfcd891dbc6 to your computer and use it in GitHub Desktop.
Save kimroen/ac8364aee75d5edab8deebfcd891dbc6 to your computer and use it in GitHub Desktop.
ember light table demo
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',
},
];
}),
});
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();
}
}
}
});
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);
}
})
});
{{#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}}
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return [
];
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{my-light-table}}
<br>
<br>
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment