Keyboard navigation demo (2.6.0)

components.models-table.row.js

import ModelsTableRow from 'ember-models-table/components/models-table/row';
import {on} from '@ember/object/evented';
import {get} from '@ember/object';
import {EKOnFocusMixin, EKMixin, keyDown} from 'ember-keyboard';

export default ModelsTableRow.extend(EKMixin, EKOnFocusMixin, {
  
  doubleClick() {
    this.send('editRow');
    this._super(...arguments);
  },
  
  cancelEditKeyDown: on(keyDown('Escape'), function() {
    this.send('cancelEditRow');
    get(this, 'record').rollbackAttributes();
  })
  
});

components.my-table.js

import {EKOnInitMixin,EKOnInsertMixin, EKMixin, keyDown, keyUp} from 'ember-keyboard';
import ModelsTable from 'ember-models-table/components/models-table';
import {on} from '@ember/object/evented';
import {get} from '@ember/object';

function getSortEventListener(num) {
  return on(keyDown(`ctrl+shift+Digit${num}`), function () {
    if (get(this, 'processedColumns.length') <= num) {
      this.send('sort', get(this, 'processedColumns').objectAt(num - 1));
    }
  });
}

function getToggleVisibilityEventListener(num) {
  return on(keyDown(`ctrl+shift+Numpad${num}`), function () {
    if (get(this, 'processedColumns.length') <= num) {
    	this.send('toggleHidden', get(this, 'processedColumns').objectAt(num - 1));
    }
  });
}

const MixinWithExtraListeners = {};

for(let i = 1; i <= 3; i++) {
  MixinWithExtraListeners[`sortByColumn${i}`] = getSortEventListener(i);
  MixinWithExtraListeners[`toggleColumn${i}`] = getToggleVisibilityEventListener(i);
}

export default ModelsTable.extend(EKMixin, EKOnInsertMixin, MixinWithExtraListeners, {
 
  leftKeyDown: on(keyDown('ctrl+ArrowLeft'), function () {
    const pageToMove = get(this, 'currentPageNumber') - 1;
    if (pageToMove >= 1) {
      this.send('gotoCustomPage', get(this, 'currentPageNumber') - 1);
    }
  }),

  rightKeyDown: on(keyDown('ctrl+ArrowRight'), function () {
    const pageToMove = get(this, 'currentPageNumber') + 1;
    const pagesCount = get(this, 'pagesCount');
    if (pageToMove <= pagesCount) {
      this.send('gotoCustomPage', get(this, 'currentPageNumber') + 1);
    }
  }),
  
  clearFiltersKeyDown: on(keyDown('ctrl+KeyQ'), function () {
    this.send('clearFilters');
  }),
  
  showAllColumnsKeyDown: on(keyDown('ctrl+shift+NumpadAdd'), function () {
    this.send('showAllColumns');
  }),
  
  hideAllColumnsKeyDown: on(keyDown('ctrl+shift+NumpadSubtract'), function () {
    this.send('hideAllColumns');
  }),

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Keyboard navigation demo',
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  columns: [
    {
      title: 'Tag', 
      propertyName: 'tagName'
    },
    {
      propertyName: 'publishedAt', 
      simple: true
    },
    {
      title: 'Author',
      propertyName: 'author.login'
    },
    {
      component: 'editRow',
      editable: false
    }
  ],
  actions: {
    onSaveRow(param) {
      return param.record.save();
    },

    onCancelRow( { record } ) {
      record.rollbackAttributes();
      return true;
    }
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
    return this.get('store').query('github-release', { repo: 'emberjs/ember.js', per_page: 100 });
  }
  
});

templates.application.hbs

<div class="container">
  <h1>{{appName}} (2.6.0)</h1>
  <p>Press <kbd>Ctrl + &rarr;</kbd> to move to the next page.</p>
  <p>Press <kbd>Ctrl + &larr;</kbd> to move to the next page.</p>
  <p>Press <kbd>Ctrl + q</kbd> to clear filters (focus should be outside of any input field).</p>
  <p>Press <kbd>Ctrl + Shift + 1</kbd> to sort table by first column.</p>
  <p>Press <kbd>Ctrl + Shift + 2</kbd> to sort table by second column.</p>
  <p>Press <kbd>Ctrl + Shift + 3</kbd> to sort table by third column.</p>
  <p>Press <kbd>Ctrl + Shift + Num 1</kbd> to toggle visibility for first column.</p>
  <p>Press <kbd>Ctrl + Shift + Num 2</kbd> to toggle visibility for second column.</p>
  <p>Press <kbd>Ctrl + Shift + Num 3</kbd> to toggle visibility for third column.</p>
  <p>Press <kbd>Ctrl + Shift + Num -</kbd> to hide all columns.</p>
  <p>Press <kbd>Ctrl + Shift + Num +</kbd> to show all columns.</p>
  <p>Do <kbd>double click</kbd> on row to enter edit mode.</p>
  <p>Press <kbd>Esc</kbd> to leave edit mode for all rows.</p>
  {{outlet}}
</div>

templates.index.hbs

{{my-table 
  data=model
  columns=columns 
  multipleColumnsSorting=false
  columnComponents=(hash
    editRow=(component "models-table/cell-edit-toggle" saveRowAction=(action "onSaveRow") cancelRowAction=(action "onCancelRow"))
  )
}}

twiddle.json

{
  "version": "0.14.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2",
    "bs-css": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
    "bs-js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
  },
  "addons": {
    "ember-data": "2.18.2",
    "ember-models-table": "2.6.0",
    "ember-keyboard": "3.0.2",
    "ember-data-github": "0.7.0"
  }
}