New Twiddle

components.summary-table.js

// import Ember from 'ember';
import Component from '@ember/component'
import { Table } from 'ember-light-table'
import { computed, set } from '@ember/object'

export default Ember.Component.extend({

  table: computed('columns', 'rows', function () {
    return new Table(this.columns, this.rows, { enableSync: true })
  }),
  
  currentSortColumn: 'firstName',
  
  columnTitles: computed(function () {
    return ['firstName', 'lastName', 'grade', 'totalTime', 'totalLessonsCompleted']
  }),
  columns: computed('columnTitles', function () {
    return this.columnTitles.map((title, index) => {
      return {
        label: title,
        valuePath: this.columnTitles[index],
      }
    })
  }),
  
  rows: computed(function () {
    return [
      {
        firstName: 'Zabrina',
        lastName: 'Lagamayo',
        grade: '3',
        totalTime: '1',
        totalLessonsCompleted: '2',
      },
      {
        firstName: 'Heather',
        lastName: 'Blake',
        grade: '5',
        totalTime: '10',
        totalLessonsCompleted: '10',
      },
      {
        firstName: 'Jonno',
        lastName: 'Haines',
        grade: '7',
        totalTime: '6',
        totalLessonsCompleted: '4',
      },
      {
        firstName: 'Julian',
        lastName: 'Leviston',
        grade: '5',
        totalTime: '2',
        totalLessonsCompleted: '6',
      },
      {
        firstName: 'TJ',
        lastName: 'Juergens',
        grade: '5',
        totalTime: '2',
        totalLessonsCompleted: '8',
      },
      {
        firstName: 'Alan',
        lastName: 'Ng',
        grade: '4',
        totalTime: '5',
        totalLessonsCompleted: '8',
      },
      {
        firstName: 'Graham',
        lastName: 'Towse',
        grade: '5',
        totalTime: '2',
        totalLessonsCompleted: '12',
      },
      {
        firstName: 'Tim',
        lastName: 'Asquith',
        grade: '8',
        totalTime: '10',
        totalLessonsCompleted: '10',
      },
    ]
  }),

  totalAndAverageRows: computed(function () {
    const rows = [
      {
        firstName: 'Average',
        lastName: '',
        grade: '',
        totalTime: '40',
        totalLessonsCompleted: '20',
      },
      {
        firstName: 'Totals',
        lastName: '',
        grade: '',
        totalTime: '40',
        totalLessonsCompleted: '20',
      },
    ]
    return rows
  }),

  footTable: computed('columns', 'totalAndAverageRows', function () {
    return new Table(this.columns, this.totalAndAverageRows)
  }),
  
  actions: {
    sortColumn(column) {
      set(this, 'currentSortColumn', column.valuePath)
      const sortByType = this.columnSorting[this.currentSortColumn]
      this.tableAction(sortByType, this.currentSortColumn)
    },
  },

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

{{summary-table}}

templates.components.summary-table.hbs

{{#light-table table as |t|}}
  {{t.head onColumnClick=(action "sortColumn")}}
  {{#t.body as |body|}}
    {{#body.expanded-row as |row|}}
      {{#each rowAttributes as |rowAttribute|}}
        <p>
          {{row.rowAttribute}}
        </p>
      {{/each}}
    {{/body.expanded-row}}
    {{#if table.isEmpty}}
      {{#body.no-data}}
        No data
      {{/body.no-data}}
    {{/if}}
  {{/t.body}}
  {{#t.foot as |columns|}}
  {{log columns}}
    <tr>
      <td>
        text
      </td>
      <td>
        text
      </td>
      <td>
        text
      </td>
      <td>
        text
      </td>
      <td>
        text
      </td>
    </tr>
  {{/t.foot}}
{{/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.1"
  }
}