ember-table

components.table-wrapper.js

import Ember from 'ember';
import { get, set, computed } from '@ember/object';
import { A as emberArray } from '@ember/array';

export default Ember.Component.extend({
  
  sorts: [{valuePath: 'name', isAscending: true}],
  
  columns: [
		{
      name: 'Name',
      valuePath: 'name',
      isName: true
    }, 
    {
      name: '',
      isDelete: true,
      isSortable: false
    }
  ],
    
  rows: computed('localRows.[]', function() {
    return this.get('localRows');
	}),

	localRows: emberArray([
      {
        id: 1,
        name: "Foo"
      },
      {
        id: 2,
        name: "Bar"
      },
      {
        id: 3,
        name: "FizzBuzz"
      }
  ]),
  tempItemCounter: 3,

  actions: {
    add() {
      let newRow = {
        id: this.get('tempItemCounter'),
        name: this.get('newItem')
      }
      this.get('localRows').pushObject(newRow);
      this.set('newItem', '');
      this.incrementProperty('tempItemCounter');
    },
    
    deleteItem(row) {
      let rows = this.get('localRows')
      this.set('localRows', rows.without(row));
    },
    
    clickCell(rowMeta) {
      console.group('Click Cell');
      let currentIndex = +get(rowMeta, 'index');
      let numRows = this.get('rows').length;
      
			if (currentIndex < (numRows - 1)) {
		    let nextRow = rowMeta.get('next');
        console.log('next row:', get(nextRow, 'name'));
      } else {
        let firstRow = rowMeta.get('first');
        console.log('first row:', get(firstRow, 'name'));
      }
      
      
			if (currentIndex > 0) {
		    let prevRow = rowMeta.get('prev');
        console.log('prev row:', get(prevRow, 'name'));
      } else {
        let lastRow = rowMeta.get('last');
        console.log('last row:', get(lastRow, 'name'));
      }
      
      console.groupEnd();
      
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

helpers.row-index-helper.js

import { helper } from '@ember/component/helper';
import { isBlank } from '@ember/utils'

export function rowIndexHelper(rowindex) {
    if(isBlank(rowindex) || isBlank(rowindex[0])) {
        return '';
    }
    return `et-row-index-${rowindex[0]}`;
}

export default helper(rowIndexHelper);

templates.application.hbs

{{table-wrapper}}

templates.components.table-wrapper.hbs

<div>
{{input value=newItem onChange=(action (mut newItem))}}
<button {{action "add"}}>Add</button>
</div>

<p>
{{#ember-table as |table|}}
	{{#table.head 
  	columns=columns 
    sorts=sorts 
    onUpdateSorts=(action (mut sorts)) as |header|}}
    {{#header.row as |headerrow|}}
    	{{headerrow.cell}}
    {{/header.row}}
  {{/table.head}}
  {{#table.body rows=rows as |body|}}
	  {{#body.row     
    as |row|}}
    	{{#row.cell class=row.columnValue.cssClass as |cellValue columnValue rowValue cellMeta columnMeta rowMeta|}}
      
      {{#if columnValue.isName}}
	    <div id={{row-index-helper rowMeta.index}} {{action "clickCell" rowMeta}}>  {{cellValue}}</div>
      {{else if columnValue.isDelete}}
      	<button {{action 'deleteItem' rowValue rowMeta}}>Delete</button>
      {{/if}}
      
      {{/row.cell}}
    {{/body.row}}
  {{/table.body}}
{{/ember-table}}
</p>

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.5"
  }
}