Server paginated table (BS4) (v2.3.0)

adapters.issue.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  host: 'https://api.github.com',
  namespace: 'repos/emberjs/ember.js',
  query(store, b, query) {
    store.serializerFor('issue').set('pageSize', query.per_page);
    const url = `${this.get('host')}/${this.get('namespace')}/issues`;
    return this.ajax(url, 'GET', {data: query}); 
  },
  loadRepoInfo(store) {
    return this.ajax(`${this.get('host')}/${this.get('namespace')}`, 'GET')
      .then(d => store.serializerFor('issue').set('issuesCount', d.open_issues_count));
  }
});

components.my-table.js

import Ember from 'ember';
import ModelsTableServerPaginated from './models-table-server-paginated';

export default ModelsTableServerPaginated.extend({
  doQuery(store, modelName, query) {
    const sup = this._super;
    return store.adapterFor('issue').loadRepoInfo(store)
    	.then(d => sup.call(this, store, modelName, query)
        .then(() => $('html, body').animate({ scrollTop: this.$('table').offset().top }, 1000)));
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Server paginated table (BS4)'
});

models.issue.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  number: attr('number'),
  title: attr('string'),
  state: attr('string'),
  comments: attr('number'),
  user: attr('string'),
  type: attr('string'),
  labels: attr('string'),
  state: attr('string')
});

routes.index.js

import Ember from 'ember';
import Bs4Theme from 'app/themes/bootstrap4';

export default Ember.Route.extend({
  beforeModel() {
    const store = this.get('store');
    return store.adapterFor('issue').loadRepoInfo(store);
  },
  model() {
    return this.get('store').query('issue', {per_page: 10});
  },
  setupController(controller) {
    this._super(...arguments);
    controller.set('columns', [
      {propertyName: 'number', title: 'ID', useSorting: false},
      {propertyName: 'type', useSorting: false},
      {propertyName: 'user', useSorting: false},
      {propertyName: 'title', useSorting: false},
      {propertyName: 'labels', useSorting: false},
      {propertyName: 'comments', useSorting: false}
    ]);
    controller.set('themeInstance', Bs4Theme.create());
    controller.set('filterQueryParameters', {
      pageSize: 'per_page',
      page: 'page'
    });
  }
});

serializers.issue.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
  issuesCount: 10,
  pageSize: 10,
  normalizeQueryResponse(a, b, payload) {
    const issuesCount = this.get('issuesCount');
    const newPayload = {
    	data: payload.map(item => {
        const itemData = {
        	id: item.id,
          type: 'issue',
          attributes: item
        };
        itemData.attributes.type = item.hasOwnProperty('pull_request') ? 'Pull Request' : 'Issue';
        itemData.attributes.user = item.user.login;
        itemData.attributes.labels = item.labels.mapBy('name').join(', ');
        return itemData;
      })
    };
    newPayload.meta = {
    	itemsCount: issuesCount,
      pagesCount: Math.round(issuesCount / this.get('pageSize'))
    };
    return newPayload;
  }
});

templates.application.hbs

<div class="container">
	<h1>{{appName}}</h1>
	{{outlet}}
</div>

templates.index.hbs

{{my-table
	data=model
  columns=columns
  themeInstance=themeInstance
  filterQueryParameters=filterQueryParameters
  useFilteringByColumns=false
  showGlobalFilter=false
  showColumnsDropdown=false
}}

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",
    "bs4css": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css",
    "popover": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js",
    "bs4js": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js",
    "fa": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-models-table": "2.3.0"
  }
}