Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save vvelingkar-cci/139c2a1993071a909894728a707ece81 to your computer and use it in GitHub Desktop.
Save vvelingkar-cci/139c2a1993071a909894728a707ece81 to your computer and use it in GitHub Desktop.
my Demo
<div class="foo-wrapper">
<div class="foo-wrapper__foo-a">
{{yield (hash a=(component "foo-content"))}}
</div>
<div class="foo-wrapper__foo-b">
{{yield (hash b=(component "foo-content"))}}
</div>
<div class="foo-wrapper__foo-c">
{{yield (hash c=(component "foo-content"))}}
</div>
</div>
import Component from '@ember/component';
import { observer } from '@ember/object';
import DynamicTable from '../../mixins/ember-light-table-data-mixin';
export default Component.extend(DynamicTable, {
sort: '',
dir: '',
isLoading: true,
onDataTableLoad: 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}}
{{/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 Controller from '@ember/controller';
import { computed } from '@ember/object';
export default Controller.extend({
dir: 'asc',
sort: 'orderedAmount',
actions: {
changeSort({sortProp, sortDir}) {
console.log(sortDir, sortProp);
},
},
dataChild:[
{orderId: 1, itemCount: 5, itemsCity: 'Mumbai' },
{orderId: 2, itemCount: 1, itemsCity: 'Delhi' },
{orderId: 1, itemCount: 2, itemsCity: 'Kochi' },
{orderId: 3, itemCount: 1, itemsCity: 'Delhi' },
],
dataParent: [
{ orderId: 1, orderedAmount: 12.3, orderName: 'My First one' },
{ orderId: 2, orderedAmount: 11.0, orderName: 'My Second one' },
{ orderId: 3, orderedAmount: 16.0, orderName: 'My Third one' },
{ orderId: 4, orderedAmount: 23.2, orderName: 'My Fourth one' },
{ orderId: 5, orderedAmount: 122.5, orderName: 'My Fifth one' },
],
columnsParent: 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: '',
sort: '',
isLoading: false,
canLoadMore: true,
enableSync: true,
model: [],
meta: null,
columns: null,
table: null,
init(){
this._super(...arguments);
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) {
}
}
});
Light Table Demo!!
{{my-light-table canExpand=true onChangeSort=(action 'changeSort') dir=dir sort=sort columns=columnsParent model=dataParent}}
{{#foo-wrapper as |foo|}}
{{#foo.a}}This is the Foo A component{{/foo.a}}
{{#foo.b}}This is the Foo B component{{/foo.b}}
{{#foo.c}}This is the Foo C component{{/foo.c}}
{{/foo-wrapper}}
{
"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