Allow to do custom actions

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 /custom-actions', function(assert) {
+  server.create('user', {firstName: 'Joe'});
+  visit('/custom-actions');
+
+  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(), '/custom-actions');
+    });
+  });
+});

tests/dummy/app/controllers/custom-actions.js

@@ -0,0 +1,59 @@
+import Ember from 'ember';
+import CheckboxColumn from 'ember-data-table-light/columns/checkbox';
+import Table from 'ember-light-table';
+
+const {
+  Controller
+} = Ember;
+
+export default Controller.extend({
+  collapseCodeSnippet: true,
+  activeTab: 0,
+
+  init() {
+    this._super(...arguments);
+    this.set('table', new Table(this.get('columns')));
+  },
+
+  columns: [
+    CheckboxColumn,
+    {
+      label: 'First Name',
+      valuePath: 'firstName',
+      width: '150px'
+    },
+    {
+      label: 'Last Name',
+      valuePath: 'lastName',
+      width: '150px'
+    },
+    {
+      label: 'Address',
+      valuePath: 'address'
+    },
+    {
+      label: 'State',
+      valuePath: 'state'
+    },
+    {
+      label: 'Country',
+      valuePath: 'country'
+    },
+    {
+      cellComponent: 'custom-actions',
+      hideable: false
+    }
+  ],
+
+  actions: {
+    deleteUser(row) {
+      row.get('content').destroyRecord().then(()=> {
+        this.get('table').removeRow(row);
+      });
+    },
+
+    setActiveTab(tab) {
+      this.set('activeTab', tab);
+    }
+  }
+});

tests/dummy/app/controllers/index.js

@@ -8,6 +8,7 @@ const {
 export default Controller.extend({
   collapseCodeSnippet: true,
   activeTab: 0,
+
   columns: [
     CheckboxColumn,
     {

tests/dummy/app/router.js

@@ -7,6 +7,7 @@ const Router = Ember.Router.extend({
 
 Router.map(function() {
   this.route('editable');
+  this.route('custom-actions');
 });
 
 export default Router;

tests/dummy/app/templates/application.hbs

@@ -21,6 +21,9 @@
         {{#link-to 'editable' tagName="li"}}
           {{link-to 'Editable' 'editable'}}
         {{/link-to}}
+        {{#link-to 'custom-actions' tagName="li"}}
+          {{link-to 'Custom Actions' 'custom-actions'}}
+        {{/link-to}}
       </ul>
       <ul class="nav navbar-nav navbar-right">
         <li><a href="docs">Documentation</a></li>

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

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

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

@@ -0,0 +1,34 @@
+<div class="panel-group" role="tablist" aria-multiselectable="true">
+  <div class="panel panel-default">
+    <div class="panel-heading" role="tab" id="table-1">
+      <a role="button" {{action (toggle "collapseCodeSnippet" this)}} href="#code-snippet" aria-expanded="true" aria-controls="code-snippet">
+        <h4 class="panel-title">Custom Actions Example <span class="code-icon fa fa-code pull-right"></span></h4>
+      </a>
+    </div>
+    {{#bs-collapse collapsed=collapseCodeSnippet id="code-snippet" class="panel-collapse" role="tabpanel" aria-labelledby="table-1"}}
+      <div class="panel-body code-snippet">
+       <ul class="nav nav-tabs" role="tablist">
+         <li role="presentation" class="{{if (eq activeTab 0) 'active'}}">
+           <a {{action "setActiveTab" 0}} href="#component" aria-controls="component" role="tab">component.js</a>
+         </li>
+         <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="custom-actions-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' tableActions=(hash deleteUser=(action 'deleteUser')) columns=columns table=table height='50vh'}}
+      {{!-- END-SNIPPET --}}
+    </div>
+  </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-table.js

@@ -0,0 +1,53 @@
+import Ember from 'ember';
+import CheckboxColumn from 'ember-data-table-light/columns/checkbox';
+import Table from 'ember-light-table';
+
+const {
+  Controller
+} = Ember;
+
+export default Controller.extend({
+
+  init() {
+    this._super(...arguments);
+    this.set('table', new Table(this.get('columns')));
+  },
+
+  columns: [
+    CheckboxColumn,
+    {
+      label: 'First Name',
+      valuePath: 'firstName',
+      width: '150px'
+    },
+    {
+      label: 'Last Name',
+      valuePath: 'lastName',
+      width: '150px'
+    },
+    {
+      label: 'Address',
+      valuePath: 'address'
+    },
+    {
+      label: 'State',
+      valuePath: 'state'
+    },
+    {
+      label: 'Country',
+      valuePath: 'country'
+    },
+    {
+      cellComponent: 'custom-actions',
+      hideable: false
+    }
+  ],
+
+  actions: {
+    deleteUser(row) {
+      row.get('content').destroyRecord().then(()=> {
+        this.get('table').removeRow(row);
+      });
+    }
+  }
+});

tests/dummy/snippets/custom-actions.hbs

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

tests/dummy/snippets/simple-table.js

@@ -1,7 +1,14 @@
 import Ember from 'ember';
 import CheckboxColumn from 'ember-data-table-light/columns/checkbox';
 
-export default Ember.Component.extend({
+const {
+  Controller
+} = Ember;
+
+export default Controller.extend({
+  collapseCodeSnippet: true,
+  activeTab: 0,
+
   columns: [
     CheckboxColumn,
     {
@@ -26,5 +33,11 @@ export default Ember.Component.extend({
       label: 'Country',
       valuePath: 'country'
     }
-  ]
+  ],
+
+  actions: {
+    setActiveTab(tab) {
+      this.set('activeTab', tab);
+    }
+  }
 });