my Demo

components.foo-content.template.hbs

{{yield}}

components.foo-wrapper.template.hbs

<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>

components.my-light-table.component.js

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);
    } 
  })
});

components.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}}
        {{/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}}

controllers.application.js

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'
      }
    ];
  })
});

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: '',
    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) {
            
        }
    }
});

templates.application.hbs

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}}

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"
  }
}