Allow to do custom actions

Update demo

addon/components/data-table.js

@@ -195,6 +195,16 @@ const DataTable = Component.extend(EmberDataTableMixin, TablePaginationMixin, Ta
    */
   columns: [],
 
+  /**
+   * Table actions.
+   *
+   * @property tableActions
+   * @type {Object}
+   * @public
+   */
+  tableActions: null,
+
+
   /**
    * Table object for ember-light-table.
    *
@@ -217,7 +227,9 @@ const DataTable = Component.extend(EmberDataTableMixin, TablePaginationMixin, Ta
       !isEmpty(this.get('columns'))
     );
 
-    this.table = new Table(this.get('columns'));
+    if (this.table === null) {
+      this.table = new Table(this.get('columns'));
+    }
     this._setupState();
     this._fetchData();
   },

addon/templates/components/data-table.hbs

@@ -17,7 +17,7 @@
   {{/if}}
 {{/data-table.header}}
 
-{{#light-table table height=height as |t|}}
+{{#light-table table tableActions=tableActions height=height as |t|}}
   {{t.head
     iconAscending='fa fa-sort-asc'
     iconDescending='fa fa-sort-desc'

tests/acceptance/index-test.js

@@ -0,0 +1,21 @@
+import { test } from 'qunit';
+import moduleForAcceptance from '../../tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('Acceptance | index');
+
+test('visiting /', function(assert) {
+  server.create('user', {firstName: 'Joe'});
+  visit('/');
+
+  andThen(function() {
+    assert.equal($('td:contains(Joe)').length, 1);
+    assert.equal(server.db.users.length, 1);
+    click('.delete');
+
+    andThen(function() {
+      assert.equal($('td:contains(Joe)').length, 0);
+      assert.equal(server.db.users.length, 0);
+      assert.equal(currentURL(), '/');
+    });
+  });
+});

tests/dummy/app/controllers/index.js

@@ -1,5 +1,6 @@
 import Ember from 'ember';
 import CheckboxColumn from 'ember-data-table-light/columns/checkbox';
+import Table from 'ember-light-table';
 
 const {
   Controller
@@ -8,6 +9,12 @@ const {
 export default Controller.extend({
   collapseCodeSnippet: true,
   activeTab: 0,
+
+  init() {
+    this._super(...arguments);
+    this.set('table', new Table(this.get('columns')));
+  },
+
   columns: [
     CheckboxColumn,
     {
@@ -31,10 +38,19 @@ export default Controller.extend({
     {
       label: 'Country',
       valuePath: 'country'
+    },
+    {
+      cellComponent: 'custom-actions'
     }
   ],
 
   actions: {
+    deleteUser(row) {
+      row.get('content').destroyRecord().then(()=> {
+        this.get('table').removeRow(row);
+      });
+    },
+
     setActiveTab(tab) {
       this.set('activeTab', tab);
     }

tests/dummy/app/templates/components/custom-actions.hbs

@@ -0,0 +1 @@
+<a class='delete' {{action tableActions.deleteUser row}}>Delete</a>

tests/dummy/app/templates/index.hbs

@@ -14,16 +14,20 @@
          <li role="presentation" class="{{if (eq activeTab 1) 'active'}}">
            <a {{action "setActiveTab" 1}} href="#template" aria-controls="template" role="tab">template.hbs</a>
          </li>
+         <li role="presentation" class="{{if (eq activeTab 2) 'active'}}">
+           <a {{action "setActiveTab" 2}} href="#template" aria-controls="component" role="tab">custom-actions.hbs</a>
+         </li>
        </ul>
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane fade {{if (eq activeTab 0) 'active in'}}" id="component">{{code-snippet name="simple-table.js"}}</div>
          <div role="tabpanel" class="tab-pane fade {{if (eq activeTab 1) 'active in'}}" id="template">{{code-snippet name="simple-table.hbs"}}</div>
+         <div role="tabpanel" class="tab-pane fade {{if (eq activeTab 2) 'active in'}}" id="template">{{code-snippet name="custom-actions.hbs"}}</div>
        </div>
       </div>
     {{/bs-collapse}}
     <div class="panel-body table-container fixed-header">
       {{!-- BEGIN-SNIPPET simple-table --}}
-      {{data-table 'user' columns=columns height='50vh'}}
+      {{data-table 'user' tableActions=(hash deleteUser=(action 'deleteUser')) columns=columns table=table height='50vh'}}
       {{!-- END-SNIPPET --}}
     </div>
   </div>

tests/dummy/mirage/config.js

@@ -46,6 +46,8 @@ export default function() {
     schema.users.find(request.params.id).update(data.user);
   });
 
+  this.del('/users/:id');
+
   /*
     Shorthand cheatsheet:
 

tests/dummy/snippets/custom-actions.hbs

@@ -0,0 +1 @@
+<a class='delete' {{action tableActions.deleteUser row}}>Delete</a>

tests/dummy/snippets/simple-table.js

@@ -2,6 +2,11 @@ import Ember from 'ember';
 import CheckboxColumn from 'ember-data-table-light/columns/checkbox';
 
 export default Ember.Component.extend({
+  init() {
+    this._super(...arguments);
+    this.set('table', new Table(this.get('columns')));
+  },
+
   columns: [
     CheckboxColumn,
     {
@@ -25,6 +30,17 @@ export default Ember.Component.extend({
     {
       label: 'Country',
       valuePath: 'country'
+    },
+    {
+      cellComponent: 'custom-actions'
+    }
+  ],
+
+  actions: {
+    deleteUser(row) {
+      row.get('content').destroyRecord().then(()=> {
+        this.get('table').removeRow(row);
+      });
     }
-  ]
+  }
 });