Server paginated table usage (v2.3.0)

adapters.application.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  host: 'https://www.googleapis.com',
  namespace: 'books/v1/volumes'
});

adapters.book.js

import ApplicationAdapter from './application';

export default ApplicationAdapter.extend({
  query(store, type, {page = 1, maxResults = 10}) {
    const url = `${this.get('host')}/${this.get('namespace')}`;
    const startIndex = (page - 1) * maxResults;
    return this.ajax(url, 'GET', {data: {q: 'javascript', startIndex, maxResults}});
  }
});

components.my-table.js

import Ember from 'ember';
import SemanticUiTheme from 'app/themes/semanticui';
import ModelsTableServerPaginated from './models-table-server-paginated';
import layout from 'app/templates/components/my-table';

export default ModelsTableServerPaginated.extend({
  layout,
  useFilteringByColumns: false,
  expandedRowComponent: 'book-details',
  themeInstance: SemanticUiTheme.create(),
  filterQueryParameters: {
    page: 'page',
    pageSize: 'maxResults'
  },
  pageSizeValues: [10, 20, 40],
  columns: [
    {component: 'toggle-expand', mayBeHidden: false},
    {propertyName: 'id', useSorting: false},
    {propertyName: 'title', useSorting: false},
    {propertyName: 'authors', useSorting: false},
    {propertyName: 'pageCount', useSorting: false},
    {propertyName: 'maturityRating', useSorting: false},
    {propertyName: 'contentVersion', useSorting: false},
    {propertyName: 'language', useSorting: false},
    {propertyName: 'price', useSorting: false}
  ]
});

components.toggle-expand.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    collapseRow(index, record) {
      this.get('collapseRow')(index, record);
    },
    expandRow(index, record) {
      this.get('expandRow')(index, record);
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

controllers.index.js

import Ember from 'ember';
import SemanticUiTheme from '../themes/semanticui';

export default Ember.Controller.extend({
  expandedRowComponent: 'book-details',
  themeInstance: SemanticUiTheme.create({
    'expand-row': 'icon plus',
  	'collapse-row': 'icon minus',
  }),
  filterQueryParameters: {
    page: 'page',
    pageSize: 'maxResults'
  },
  pageSizeValues: [10, 20, 40],
  columns: [
    {component: 'toggle-expand', mayBeHidden: false},
    {propertyName: 'id', useSorting: false},
    {propertyName: 'title', useSorting: false},
    {propertyName: 'authors', useSorting: false},
    {propertyName: 'pageCount', useSorting: false},
    {propertyName: 'maturityRating', useSorting: false},
    {propertyName: 'contentVersion', useSorting: false},
    {propertyName: 'language', useSorting: false},
    {propertyName: 'price', useSorting: false}
  ]
});

models.book.js

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

export default Model.extend({
  pageCount: attr('number'),
  title: attr('string'),
  publishedDate: attr('date'),
  maturityRating: attr('string'),
  contentVersion: attr('string'),
  language: attr('string'),
  thumb: attr('string'),
  authors: attr('string'),
  categories: attr('string'),
  description: attr('string'),
  publisher: attr('string'),
  currencyCode: attr('string'),
  amount: attr('number'),
  price: Ember.computed('amount', 'currencyCode', function () {
    const amount = this.get('amount') || 'n/a';
    const currencyCode = this.get('currencyCode') || '';
  	return `${amount} ${currencyCode}`;
  })
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').query('book', {});
  }
});

serializers.application.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
});

serializers.book.js

import Ember from 'ember';
import ApplicationSerializer from './application';

export default ApplicationSerializer.extend({
  
  normalizeQueryResponse(a, b, payload) {
    payload.totalItems = payload.totalItems > 120 ? 120 : payload.totalItems; // use only first 120 items 
    payload.data = payload.items.map(item => {
      const dataItem = {
        id: item.id,
        type: 'book',
        attributes: item.volumeInfo
      };
      dataItem.attributes.authors = (dataItem.attributes.authors || []).join(', ');
      dataItem.attributes.categories = (dataItem.attributes.categories || []).join(', ');
      dataItem.attributes.thumb = (dataItem.attributes.imageLinks || {}).thumbnail;
      dataItem.attributes.amount = Ember.get(item, 'saleInfo.listPrice.amount');
      dataItem.attributes.currencyCode = Ember.get(item, 'saleInfo.listPrice.currencyCode');
      return dataItem;
    });
    payload.meta = {
      pagesCount: Math.round(payload.totalItems / payload.data.length),
      itemsCount: payload.totalItems
    };
    return payload;
  }

});

templates.application.hbs

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

templates.components.book-details.hbs

<div class="ui grid">
	<div class="row">
		<div class="column">
    	<h3>{{record.title}}</h3>
    </div>
	</div>
<div class="row">
	<div class="four wide column">
  	<img src={{record.thumb}} alt={{record.title}} />
  </div>
  <div class="twelve wide column">
  	<p>{{record.description}}</p>
    {{#if record.publisher}}
    	<p>Published by <strong>{{record.publisher}}</strong></p>
    {{/if}}
  	{{#if record.categories}}
	    <p>Categories: <strong>{{record.categories}}</strong></p>
      {{/if}}
  </div>
  </div>
</div>

templates.components.my-table.hbs

<div class="{{if isLoading "ui dimmer active inverted"}}">
  <div class={{if isLoading "ui large loader"}}></div>
  </div>
{{component
  themeInstance.components.columns-dropdown
  processedColumns=processedColumns
  columnDropdownOptions=columnDropdownOptions
  themeInstance=themeInstance
  messages=messages
  showAllColumns=(action "showAllColumns")
  hideAllColumns=(action "hideAllColumns")
  restoreDefaultVisibility=(action "restoreDefaultVisibility")
  toggleHidden=(action "toggleHidden")
}}
<div class='models-table-clear'></div>
{{component
  themeInstance.components.table
  visibleContent=visibleContent
  expandedItems=expandedItems
  selectedItems=selectedItems
  visibleProcessedColumns=visibleProcessedColumns
  processedColumns=processedColumns
  allColumnsAreHidden=allColumnsAreHidden
  themeInstance=themeInstance
  messages=messages
  expandedRowComponent=expandedRowComponent
  expandRow=(action "expandRow")
  collapseRow=(action "collapseRow")
  doubleClickOnRow=(action "doubleClickOnRow")
  hoverOnRow=(action "hoverOnRow")
  outRow=(action "outRow")
  clickOnRow=(action "clickOnRow")
}}
{{component
  themeInstance.components.footer
  firstIndex=firstIndex
  lastIndex=lastIndex
  recordsCount=arrangedContentLength
  pageSizeOptions=pageSizeOptions
  pageSize=pageSize
  currentPageNumber=currentPageNumber
  pagesCount=pagesCount
  showPageSize=showPageSize
  goToPage=(action "gotoCustomPage")
  themeInstance=themeInstance
  messages=messages
}}

templates.components.toggle-expand.hbs

{{#if isExpanded}}
  <a href="#" {{action "collapseRow" index record bubbles=false}} class={{themeInstance.collapseRow}}><i class="{{themeInstance.collapse-row}}"></i></a>
{{else}}
  <a href="#" {{action "expandRow" index record bubbles=false}} class={{themeInstance.expandRow}}><i class="{{themeInstance.expand-row}}"></i></a>
{{/if}}
{{yield}}

templates.index.hbs

{{my-table data=model}}

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",
    "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",
    "semantic-ui-ember": "2.0.1"
  }
}