New Twiddle

controllers.application.js

import Ember from 'ember';
import ColumnDefinition from '../models/my-column-def';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  columns: [ 
    ColumnDefinition.create({
        columnName: 'Company',
        valuePath: 'company',}),
    ColumnDefinition.create({
      columnName: 'City',
      valuePath: 'city'
    })], 
    rows: [
    Ember.Object.create({company: "Coke", city: "Atlanta"}),
    Ember.Object.create({company: "GE", city: "Boston"})
     ]
});
 

models.my-column-def.js

import EmberTableColumnDefinition from 'ember-table/models/column-definition';

/**
  A model representing a sortable column definition for ember-table
 */
export default EmberTableColumnDefinition.extend({
  /**
   * canAutoResize was deprecated with Ember-Table 2.0.0 so we implemented our own
     We also changed the default to true since that is what we mostly use
   @property {Boolean} canAutoResize
  */
  canAutoResize: true,
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
  {{#ember-table
    rows=rows
    columns=columns
    as |row|
  }}
    {{#ember-table-row
      row=row
      as |cell|
    }}
      {{cell.value}}
    {{/ember-table-row}}
  {{/ember-table}}
<br>
<br>
{{outlet}} 
<br>
<br>

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.2.2",
    "ember-template-compiler": "3.2.2",
    "ember-testing": "3.2.2"
  },
  "addons": {
    "ember-table": "2.0.0-alpha.2",
    "ember-data": "3.2.0"
  }
}