Adds pager component for data table component

wherehows-web/app/components/dataset-table-pager.js

@@ -0,0 +1,56 @@
+import Ember from 'ember';
+
+const {
+  Component,
+  computed,
+  getProperties,
+  get
+} = Ember;
+
+export default Component.extend({
+  tagName: 'section',
+
+  pages: computed('data', 'limit', function() {
+    const { data, limit: rowsPerPage = 1 } = getProperties(
+      this,
+      'data',
+      'limit'
+    );
+    let numberOfPages = 1;
+
+    if (Array.isArray(data)) {
+      const needsExtraPage = data.length % rowsPerPage;
+      numberOfPages = Math.floor(data.length / rowsPerPage);
+      needsExtraPage && ++numberOfPages;
+    }
+
+    return [...Array(numberOfPages).keys()].map(x => x + 1);
+  }),
+
+  actions: {
+    onDecrementPage() {
+      let page = get(this, 'page');
+
+      if (page > 1) {
+        get(this, 'onPageChanged')(page - 1);
+      }
+    },
+
+    onIncrementPage() {
+      let page = get(this, 'page');
+      let max = Math.max(...get(this, 'pages'));
+
+      if (page < max) {
+        get(this, 'onPageChanged')(page + 1);
+      }
+    },
+
+    changePage(page) {
+      get(this, 'onPageChanged')(page);
+    },
+
+    changeLimit(limit) {
+      get(this, 'onLimitChanged')(limit);
+    }
+  }
+});

wherehows-web/app/templates/components/dataset-table-pager.hbs

@@ -0,0 +1,19 @@
+<article>
+  <p>Page:</p>
+  {{ember-selector values=pages selected=page selectionDidChange="changePage"}}
+</article>
+
+<article>
+  <p>Rows per page:</p>
+  {{ember-selector values=pageLengths selected=limit selectionDidChange="changeLimit"}}
+</article>
+
+<div>
+  <button {{action "onDecrementPage"}}>
+    <i aria-label="Sorting arrow" class="glyphicon glyphicon-arrow-left"></i>
+  </button>
+
+  <button {{action "onIncrementPage"}}>
+    <i aria-label="Sorting arrow" class="glyphicon glyphicon-arrow-right"></i>
+  </button>
+</div>