Ember Datatables

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  data1: [{
    'name': 'John Smith',
    'salary': '$2000',
    'position': 'developer'
  }, {
    'name': 'Alex',
    'salary': '$2000',
    'position': 'developer'
  }, {
    'name': 'Leonardo',
    'salary': '$2000',
    'position': 'developer'
  }]
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function() {
  	Ember.run.later(this, function() {
      this.controller.set('data1', [{
        'name': 'John Smith 1',
        'salary': '$2000',
        'position': 'developer'
      }, {
        'name': 'Alex 1',
        'salary': '$2000',
        'position': 'developer'
      }, {
        'name': 'Leonardo 1',
        'salary': '$2000',
        'position': 'developer'
      }]);
      
      var api = new $.fn.dataTable.Api('#myTable');
      api.row.clear();
      
      api.draw();
      
    }, 5000);
  }
});

templates.application.hbs

<h1>Please find data table below</h1>
{{outlet}}
{{#data-table id="myTable"}}
  <thead>
    <tr>
      <th>Name</th>
      <th>Salary</th>
      <th>Position</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Salary</th>
      <th>Position</th>
    </tr>
  </tfoot>
  <tbody>
    {{#each data1 as |data|}}
    	<tr>
        <td>{{data.name}}</td>
        <td>{{data.salary}}</td>
        <td>{{data.position}}</td>
      </tr>
    {{/each}}
  </tbody>
{{/data-table}}

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-datatables": "0.1.0"
  }
}