simple-table example

components.simple-table.js

import Ember from 'ember';

export default Ember.Component.extend({
  tableClassNames:'table table-striped table-bordered table-hover table-responsive table-condensed',

  actions:{
    selectionChanged(selectedRows){
      this.set('selectedRows', selectedRows);
    },
    
    saveInvitation(name) {
      alert(name);
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

routes.application.js

import Ember from 'ember';

var sneijder = {name:'Wesley', surname:'Sneijder', age:32, nationality:'Dutch'};
var podolski = {name:'Lukas', surname: 'Podolski', age:31, nationality:'German'};
var muslera = {name:'Fernando', surname:'Muslera', age:30, nationality:'Uruguayan'};
var selcuk = {name:'Selcuk', surname: 'Inan', age:31, nationality: 'Turkish'};
var chedjou = {name:'Aurélien', surname:'Chedjou', age:31, nationality:'Cameroonian'};

var players = [sneijder, podolski, muslera, selcuk, chedjou];

export default Ember.Route.extend({
  model(){
    return players;
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
{{simple-table data=model}}
        </div>
    </div>
</div>

templates.components.simple-table.hbs

{{#data-table data=data selectionMode='multi' selectionChanged=(action 'selectionChanged') classNames=tableClassNames as |t|}}
    {{t.selectionColumn}}
    {{t.column propertyName='name' name='Name'}}
    {{t.column propertyName='surname' name='Surname' class='wide-column'}}
    {{t.column propertyName='age' name='Age' }}
    {{t.column propertyName='nationality' name='Nationality'}}
    {{#t.column as |col|}}
      {{#if col.header}}Actions{{/if}}
      {{#if col.body}}
        <button type="button" onclick={{action "saveInvitation" col.row.name}}>Save</button>
      {{/if}}
    {{/t.column}}
{{/data-table}}

twiddle.json

{
  "version": "0.10.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.5.1",
    "ember-data": "2.3.3",
    "ember-template-compiler": "2.5.1"
  },
  "addons": {
      "ember-bootstrap" : "0.8.0",
      "ember-contextual-table": "0.1.4"
  }
}