Nested models-table (v2.3.0)

components.expand-row.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    collapseRow(index, record) {
     this.get('collapseRow')(index, record);
    },
    expandRow(index, record) {
      this.get('expandRow')(index, record);
    }
  }
});

components.expanded-row.js

import Ember from 'ember';
import SemanticUiTheme from 'app/themes/semanticui';

export default Ember.Component.extend({
  internalThemeInstance: SemanticUiTheme.extend({table: 'ui sortable selectable inverted table'}).create(),
  columns: [
    {propertyName: 'id', sortedBy: 'idNumeric'},
    {propertyName: 'name'}
  ]
});

controllers.index.js

import Ember from 'ember';
import SemanticUiTheme from '../themes/semanticui';

export default Ember.Controller.extend({
  themeInstance: SemanticUiTheme.create(),
  columns: [
    {component: 'expand-row', disableFiltering: true, mayBeHidden: false},
    {propertyName: 'id', sortedBy: 'idNumeric'},
    {propertyName: 'name'},
    {propertyName: 'colors'},
    {propertyName: 'combat-specialty'}
  ]
});

models.klan.js

import Ember from 'ember';
import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string'),
  colors: attr('string'),
  'combat-specialty': attr('string'),
  logo: attr('string'),
  warbosses: hasMany('warboss'),
  idNumeric: Ember.computed('id', function () {
    return parseInt(this.get('id'), 10);
  })
});

models.warboss.js

import Ember from 'ember';
import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  name: attr('string'),
  klan: belongsTo('klan'),
  idNumeric: Ember.computed('id', function () {
    return parseInt(this.get('id'), 10);
  })
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
    const store = this.get('store');
    store.pushPayload({
      data: [
        {
          id: '1',
          type: 'klan',
          attributes: {
            name: 'Blood Axes',
            colors: 'Green and drab colours',
            'combat-specialty': 'Camouflage, Stealth',
            logo: 'https://vignette.wikia.nocookie.net/warhammer40k/images/5/5a/Blood_Axes_Icon.png/revision/latest?cb=20140726025402'
          },
          relationships: {
            warbosses: {
              data: [
                {id: '1', type: 'warboss'},
                {id: '2', type: 'warboss'},
                {id: '3', type: 'warboss'}
              ]
            }
          }
        },
        {
          id: '2',
          type: 'klan',
          attributes: {
            name: 'Goffs',
            colors: 'Black with checks and dags',
            'combat-specialty': 'Shock Assault',
            logo: 'https://vignette.wikia.nocookie.net/warhammer40k/images/a/aa/Goff_Icon.jpg/revision/latest?cb=20140713230526'
          },
          relationships: {
            warbosses: {
              data: [
                {id: '4', type: 'warboss'},
                {id: '5', type: 'warboss'},
                {id: '6', type: 'warboss'},
                {id: '7', type: 'warboss'}
              ]
            }
          }
        },
        {
          id: '3',
          type: 'klan',
          attributes: {
            name: 'Bad Moons',
            colors: 'Golden Yellow and Black',
            'combat-specialty': 'Ranged Combat, Dakka (Excessive Firepower)',
            logo: 'https://vignette.wikia.nocookie.net/warhammer40k/images/d/d9/Bad_Moon_Icon.png/revision/latest?cb=20140726221010'
          },
          relationships: {
            warbosses: {
              data: [
                {id: '8', type: 'warboss'},
                {id: '9', type: 'warboss'},
                {id: '10', type: 'warboss'},
                {id: '11', type: 'warboss'},
                {id: '12', type: 'warboss'},
                {id: '13', type: 'warboss'},
              ]
            }
          }
        }
      ]
    });
    store.pushPayload({
      data: [
        {
          id: '1',
          type: 'warboss',
          attributes: {
            name: 'Baddfrag the Tank Boss'
          }
        },
        {
          id: '2',
          type: 'warboss',
          attributes: {
            name: 'Snikrot'
          }
        },
        {
          id: '3',
          type: 'warboss',
          attributes: {
            name: 'Gorsnik Magash'
          }
        },
        {
          id: '4',
          type: 'warboss',
          attributes: {
            name: 'Ghazghkull Mag Uruk Thraka'
          }
        },
        {
          id: '5',
          type: 'warboss',
          attributes: {
            name: 'Goffboss Drogg'
          }
        },
        {
          id: '6',
          type: 'warboss',
          attributes: {
            name: 'Gutrak Dethhead'
          }
        },
        {
          id: '7',
          type: 'warboss',
          attributes: {
            name: 'Krugg'
          }
        },
        {
          id: '8',
          type: 'warboss',
          attributes: {
            name: 'Badrukk'
          }
        },
        {
          id: '9',
          type: 'warboss',
          attributes: {
            name: 'Big Mek Mogrok'
          }
        },
        {
          id: '10',
          type: 'warboss',
          attributes: {
            name: 'Gashrakk Da Flash'
          }
        },
        {
          id: '11',
          type: 'warboss',
          attributes: {
            name: 'Nazdreg Ug Urdgrub',
          }
        },
        {
          id: '12',
          type: 'warboss',
          attributes: {
            name: 'Nekkruncha'
          }
        },
        {
          id: '13',
          type: 'warboss',
          attributes: {
            name: 'Ozdakka'
          }
        }
      ]
    });
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').peekAll('klan');
  },
});

templates.application.hbs

<div class="ui container">
	{{outlet}}
</div>

templates.components.expand-row.hbs

{{#if isExpanded}}
  <a href="#" {{action "collapseRow" index record bubbles=false}} class={{themeInstance.collapseRow}}>Hide warbosses</a>
{{else}}
  <a href="#" {{action "expandRow" index record bubbles=false}} class={{themeInstance.expandRow}}>Show warbosses</a>
{{/if}}
{{yield}}

templates.components.expanded-row.hbs

<div class="ui two column grid">
	<div class="row">
    <div class="column two">
    	<h3>{{record.name}} Warbosses</h3>
    </div>
  </div>
  <div class="row">
  	<div class="column">
    	<img src={{record.logo}} alt={{record.name}}>
    </div>
    <div class="column">
      {{models-table
        data=record.warbosses
        columns=columns
        themeInstance=internalThemeInstance
        showColumnsDropdown=false
        showGlobalFilter=false
        useFilteringByColumns=false
        showComponentFooter=false
      }}
    </div>
  </div>
</div>

templates.index.hbs

<h2>Klans</h2>
{{models-table
	data=model
  columns=columns
  themeInstance=themeInstance
	expandedRowComponent=(component "expanded-row")
}}

twiddle.json

{
  "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-models-table": "2.3.0",
    "semantic-ui-ember": "2.0.1"
  }
}