New Twiddle

components.bottom-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({
  
  classNames: ['bottom-table'],

  table: computed('columns', 'rows', function () {
    return new Table(this.columns, this.rows, { enableSync: true })
  }),
  
  currentSortColumn: 'firstName',
  
  columns: computed(function () {
    return [
      {
        label: 'Batch Edit Progress btn here',
        subColumns:
        [
          {
            label: 'All',
            width: '30px',
            align: 'center',
            component: 'light-table/headers/add-header',
            cellType: 'checkbox-cell',
          },
          {
            label: 'First Name',
            valuePath: 'firstName',
            // width: '150px',
          },
          {
            label: 'Last Name',
            valuePath: 'lastName',
            // width: '150px',
          },
          {
            label: 'Year',
            valuePath: 'grade',
            // width: '50px',
          }
        ]
      },
      {
        label: 'Reading Eggs',
        sortable: false,
        align: 'center',
        
        subColumns: [
        {
          label: 'Reading',
          valuePath: 'reading',
          // width: '100px',
        },
        {
          label: 'Spelling',
          valuePath: 'spelling',
          // width: '100px',
        },
        {
          label: 'Clinker Castle',
          valuePath: 'clinkerCastle',
          // width: '100px',
        },
        ]
      },
      {
        label: 'Reading Eggspress',
        sortable: false,
        align: 'center',
        
        subColumns: [
        {
          label: 'My Lessons',
          valuePath: 'myLessons',
          // width: '150px',
        },
        {
          label: 'English Skills Spelling',
          valuePath: 'englishSkillsSpelling',
          // width: '150px',
        },
        ]
      },
      {
        subColumns: [
          {
          	valuePath: 'id',
            cellType: 'button-cell',
            width: '60px',
          }
        ]
      }
    ]
  }),
  
  rows: computed(function () {
    return [
      {
        id: 1,
        firstName: 'Zabrina',
        lastName: 'Lagamayo',
        grade: '1',
        reading: '82',
        spelling: '1',
        clinkerCastle: '1',
        myLessons: '7',
        englishSkillsSpelling: '145',
      },
      {
        id: 2,
        firstName: 'Heather',
        lastName: 'Blake',
        grade: '1',
        reading: '110',
        spelling: '5',
        clinkerCastle: '5',
        myLessons: '5',
        englishSkillsSpelling: '109',
      },
      {
        id: 3,
        firstName: 'Jonno',
        lastName: 'Haines',
        grade: '2',
        reading: '116',
        spelling: '8',
        clinkerCastle: '7',
        myLessons: 'Placement Test',
        englishSkillsSpelling: '109',
      },
      {
        id: 4,
        firstName: 'Julian',
        lastName: 'Leviston',
        grade: '1',
        reading: '92',
        spelling: '3',
        clinkerCastle: '4',
        myLessons: '-',
        englishSkillsSpelling: '-',
      },
    ]
  }),
  
  actions: {
    sortColumn(column) {
      // set(this, 'currentSortColumn', column.valuePath)
      // const sortByType = this.columnSorting[this.currentSortColumn]
      // this.tableAction(sortByType, this.currentSortColumn)
    },
  },

});

components.light-table.cells.button-cell.js

import Cell from 'ember-light-table/components/cells/base';
import { set } from '@ember/object';

export default Cell.extend({
  actions: {
    buttonClicked() {
      if(this.row.expanded) {
        // Close this row
        set(this.row,'expanded',!this.row.expanded)
      } else {
        // Close all other rows
        this.table.rows.forEach(r => r.expanded ? set(r,'expanded',false) : null);
        // Open this row
        set(this.row,'expanded',!this.row.expanded)
      }
    }
  }
});

components.light-table.cells.checkbox-cell.js

import Cell from 'ember-light-table/components/cells/base';
import { set } from '@ember/object';

export default Cell.extend({
  classNames: ['cursor-pointer'],
  click() {
    set(this.row,'selected',!this.row.selected);
  }
});

components.light-table.headers.add-header.js

import Ember from 'ember';
import { get, set, computed } from '@ember/object';

export default Ember.Component.extend({
  allRowsSelected: computed('table.rows.length','table.selectedRows.length', function() {
    return this.table.rows.length === this.table.selectedRows.length;
  }),
  
  actions: {
    checkboxClicked() {
      // Select all or select none
      const allSelected = get(this,'allRowsSelected');
      this.table.rows.forEach(r => set(r,'selected',!allSelected));
    }
  }
});

components.top-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({
  
  classNames: ['top-table'],

  table: computed('columns', 'rows', function () {
    return new Table(this.columns, this.rows, { enableSync: true })
  }),
  
  columns: computed(function () {
    return [
      {
        subColumns:
        [
          {
            valuePath: 'grade',
            width: '150px'
          }
        ]
      },
      {
        label: 'Reading Eggs',
        sortable: false,
        align: 'center',
        
        subColumns: [
        {
          label: 'Reading',
          valuePath: 'reading',
          // width: '150px',
          sortable: false,
          align: 'center'
        },
        {
          label: 'Spelling',
          valuePath: 'spelling',
          // width: '150px',
          sortable: false,
          align: 'center'
        },
        {
          label: 'Clinker Castle',
          valuePath: 'clinkerCastle',
          // width: '150px',
          sortable: false,
          align: 'center'
        },
        ]
      },
      {
        label: 'Reading Eggspress',
        sortable: false,
        align: 'center',
        
        subColumns: [
        {
          label: 'My Lessons',
          valuePath: 'myLessons',
          // width: '150px',
          sortable: false,
          align: 'center'
        },
        {
          label: 'English Skills Spelling',
          valuePath: 'englishSkillsSpelling',
          // width: '150px',
          sortable: false,
          align: 'center'
        },
        ]
      },
    ]
  }),
  
  rows: computed(function () {
    return [
      {
        grade: 'Kindergarten',
        reading: '1-60',
        spelling: '1-32',
        clinkerCastle: '-',
        myLessons: '-',
        englishSkillsSpelling: '-',
      },
      {
        grade: 'Year 1',
        reading: '61-100',
        spelling: '33-64',
        clinkerCastle: '1-20',
        myLessons: '1-20',
        englishSkillsSpelling: '1-36',
      },
      {
        grade: 'Year 2',
        reading: '101-120',
        spelling: '65-96',
        clinkerCastle: '-',
        myLessons: '21-60',
        englishSkillsSpelling: '37-72',
      },
      {
        grade: 'Year 3',
        reading: '-',
        spelling: '-',
        clinkerCastle: '-',
        myLessons: '61-100',
        englishSkillsSpelling: '73-108',
      },
    ]
  }),

});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.cursor-pointer {
  cursor: pointer;
}

/* Top Table */

/* Headers */
.top-table th {
  padding: 10px;
  border: 1px solid white;
}

.top-table th.lt-group-column {
  background-color: #fdd08c;
}

.top-table th.lt-sub-column {
  background-color: #ffe7c5;
}

.top-table th:first-of-type {
  visibility: hidden;
}

/* Cells */
.top-table td {
  background-color: #fef3e2;
  padding: 5px;
  border: 1px solid white;
}

.top-table td:first-of-type {
  background-color: #ffe7c5;
}

/* Bottom Table */
.bottom-table .filter-header {
  padding: 10px;
  border: 1px solid white;
  background-color: #b2e0f4;
}

.bottom-table th {
  padding: 10px;
  border: 1px solid white;
}

.bottom-table th.lt-group-column {
  background-color: #b2e0f4;
}

.bottom-table th.lt-sub-column {
  background-color: #cceaf9;
}

.bottom-table tr:nth-of-type(even):not(.is-expanded):not(.lt-expanded-row) td {
  background-color: #cceaf9;
}

.bottom-table td {
  padding: 5px;
  border: 1px solid white;
}

.bottom-table tr.is-expanded {
  background-color: #ffe7c5;
}

.bottom-table tr.lt-expanded-row {
  background-color: #fef3e2;
}

templates.application.hbs

{{!-- Top table is to test that we can do the 'step' style (the top-left chunk bitten out of the table) --}}
{{top-table}}
<br />
{{bottom-table}}

templates.components.bottom-table.hbs

{{#light-table table responsive=true as |t|}}
  <div class="filter-header">
  	<div style="float:left;">class dropdown</div>
    <div style="float:right;">search input</div>
  </div>
  {{t.head onColumnClick=(action "sortColumn")}}
  {{#t.body canSelect=false as |body|}}
    {{#body.expanded-row as |row|}}
    	{{edit-progress row=row}}
    {{/body.expanded-row}}
    {{#if table.isEmpty}}
      {{#body.no-data}}
        No data
      {{/body.no-data}}
    {{/if}}
  {{/t.body}}
{{/light-table}}

templates.components.edit-progress.hbs

Put your edit form here..
My name is: {{row.firstName}}
<button {{action (mut row.expanded) false}}>
Please close me
</button>

templates.components.light-table.cells.button-cell.hbs

{{!-- <button {{action (mut row.expanded) (not row.expanded)}}> --}}
<button {{action 'buttonClicked'}}>
{{#if row.expanded}}
Close
{{else}}
Edit
{{/if}}
{{value}}
</button>

templates.components.light-table.cells.checkbox-cell.hbs

<input type="checkbox" checked={{row.selected}} class="cursor-pointer">

templates.components.light-table.headers.add-header.hbs

All
<input type="checkbox" checked={{allRowsSelected}} class="cursor-pointer" onclick={{action 'checkboxClicked'}}>

templates.components.top-table.hbs

{{#light-table table responsive=true as |t|}}
  {{t.head}}
  {{#t.body as |body|}}
    {{#if table.isEmpty}}
      {{#body.no-data}}
        No data
      {{/body.no-data}}
    {{/if}}
  {{/t.body}}
{{/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"
  }
}