New Twiddle

components.my-table.js

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

export default Ember.Component.extend({
  
  columns: null,
  editingRowId: null,
  editingCellValue: null,
  
  init () {
        this._super(...arguments);

        this.columns = [
            {
                name: 'Foo Bars Table',
                valuePath: 'bars'
            }
        ];
    },
  
    rows: computed('foos.@each.{bars}', function() {
        console.log('+++++ rows update');

        return get(this, 'foos').toArray();
    }),

  	actions: {
      clickCell(cellValue, rowValue, rowMeta) {
        if (get(rowMeta, 'isEditing') === true) {
            return;
        }

        set(this, 'editingRowId', get(rowValue, 'id'));
        set(this, 'editingCellValue', cellValue);
        
        get(this, 'bumpInstructions')();
      },
        
      blurBars(editedCellValue, rowValue) {
          set(this, 'editingRowId', null);
          
          get(this, 'onRowChange')(rowValue, editedCellValue);
        
        	get(this, 'bumpInstructions')();
        }
    }
  
    
});

controllers.application.js

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

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  showTable: false,
  
  instructionsCounter: 0,
  
  rows: [
            { id: 1, bars: 'bar 1'},
            { id: 2, bars: 'bar 2'},
            { id: 3, bars: 'bar 3'}
        ],
  
  actions: {
    toggleTable() {
      this.toggleProperty('showTable');
      this.incrementProperty('instructionsCounter');
    },
    
    rowChange(rowValue, editedValue) {
      set(rowValue, 'bars', editedValue);
    },
    
    bumpInstructions() {
      this.incrementProperty('instructionsCounter');
    }
  },
  
  instructions: computed('instructionsCounter', function() {
    switch(get(this, 'instructionsCounter')) {
      case 0:
		    return "Click Toggle Table to show component with ember table.  Open the developer tools so you can follow console output.";
      case 1:
		    return "Click on one of the rows and edit the value";
      case 2:
      case 3:
        return "Change the value and then click HERE";
      case 4:
        return "Now the value is changed.  Click Toggle Table to close the component.";
      case 5:
        return "Click Toggle Table again.";
      case 6:
        return "Again, click on one of the rows and edit the value";
      case 7:
      case 8:
        return "Change value and click HERE to finally see the error in the console.";
      default:
        return '';
    }
  })
});

helpers.eq.js

import Ember from 'ember';

export function eq(params/*, hash*/) {
  return params[0] === params[1];
}

export default Ember.Helper.helper(eq);

templates.application.hbs

<p><button onClick={{action "toggleTable"}}>Toggle Table</button></p>

{{#if showTable}}
	{{my-table rows=rows onRowChange=(action "rowChange") bumpInstructions=(action "bumpInstructions")}}
{{/if}}

<h4>Instructions to reproduce:</h4>
<p>{{instructions}}</p>
    

templates.components.my-table.hbs

    {{#ember-table as |table|}}
        {{#table.head
            columns=columns
            enableResize=false
            enableReorder=false
        as |header|}}
            {{#header.row as |headerrow|}}
                {{headerrow.cell}}
            {{/header.row}}
        {{/table.head}}

        {{#table.body rows=rows as |body|}}
            {{#body.row as |row|}}
                {{#row.cell as |cellValue columnValue rowValue cellMeta columnMeta rowMeta|}}


                <div onClick={{action 'clickCell' cellValue row.rowValue row.rowMeta}}>

                    {{#if (eq editingRowId rowValue.id)}}
                    {{#paper-input
                            textarea=true
                            value=editingCellValue
                            onChange=(action (mut editingCellValue))
                            onBlur=(action 'blurBars' editingCellValue rowValue)
                            as |input|}}
                        {{/paper-input}}
                    {{else}}
                        {{cellValue}}
                    {{/if}}
                </div>

                {{/row.cell}}
            {{/body.row}}
        {{/table.body}}

    {{/ember-table}}
    

twiddle.json

{
  "version": "0.15.0",
  "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.0.0",
    "ember-template-compiler": "3.0.0",
    "ember-testing": "3.0.0"
  },
  "addons": {
    "ember-data": "3.2.0",
    "ember-table": "2.0.0-beta.4",
    "ember-paper": "1.0.0-beta.5"
  }
}