ember-light-table-issue

components.expandable-table.js

import Ember from 'ember';
import Table from 'ember-light-table';

const { computed, Component, get, set } = Ember;

export default Component.extend({
  init() {
    this._super(...arguments);
    
    set(this, 'table', new Table(get(this, 'columns'), get(this, 'model')));
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  columns: [
    { label: 'foo', valuePath: 'foo'},
    { label: 'bar', valuePath: 'bar'},
  ],
  model: [
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
    {foo: 123, bar: 321 },
  ]
});

templates.application.hbs

{{expandable-table model=model columns=columns}}

templates.components.expandable-table.hbs

{{#light-table table height='50vh' as |t|}}
  {{t.head
    fixed=true}}

  {{#t.body
    canSelect=false
    canExpand=true
    multiRowExpansion=false
    as |body|}}

    {{#body.expanded-row as |row|}}
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad esse consectetur similique aspernatur quas necessitatibus hic eius corporis obcaecati quod, nisi, eligendi quibusdam tenetur. Deleniti aspernatur enim dolorem ullam assumenda.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad esse consectetur similique aspernatur quas necessitatibus hic eius corporis obcaecati quod, nisi, eligendi quibusdam tenetur. Deleniti aspernatur enim dolorem ullam assumenda.
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad esse consectetur similique aspernatur quas necessitatibus hic eius corporis obcaecati quod, nisi, eligendi quibusdam tenetur. Deleniti aspernatur enim dolorem ullam assumenda.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad esse consectetur similique aspernatur quas necessitatibus hic eius corporis obcaecati quod, nisi, eligendi quibusdam tenetur. Deleniti aspernatur enim dolorem ullam assumenda.
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad esse consectetur similique aspernatur quas necessitatibus hic eius corporis obcaecati quod, nisi, eligendi quibusdam tenetur. Deleniti aspernatur enim dolorem ullam assumenda.
    {{/body.expanded-row}}
  {{/t.body}}
{{/light-table}}

twiddle.json

{
  "version": "0.11.0",
  "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.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {
    "ember-light-table": "1.8.3"
  }
}