WIP

app/components/ccdb-pagination.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['row'],
+});

app/components/ccdb-table.js

@@ -8,6 +8,8 @@ export default Component.extend({
   columns: null,
   table: null,
 
+  classNames: ['row'],
+
   init() {
     this._super(...arguments);
     const table = new Table(this.get('columns'), this.get('model'));

app/components/filter-collections.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['row'],
+});

app/templates/components/ccdb-pagination.hbs

@@ -0,0 +1,36 @@
+<div class="col-md-12">
+  <div class="pull-left" style="padding-top: 26px;">
+    Showing 1-100 of 102 entries
+  </div>
+  <div class="pull-right">
+    <nav aria-label="Page navigation">
+      <ul class="pagination">
+        <li>
+          <a href="#">
+            <span aria-hidden="true">First</span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span aria-hidden="true">Previous</span>
+          </a>
+        </li>
+        <li><a href="#">1</a></li>
+        <li><a href="#">2</a></li>
+        <li><a href="#">3</a></li>
+        <li><a href="#">4</a></li>
+        <li><a href="#">5</a></li>
+        <li>
+          <a href="#">
+            <span aria-hidden="true">Next</span>
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            <span aria-hidden="true">Last</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>

app/templates/components/collections-container.hbs

@@ -1 +1,3 @@
+{{filter-collections}}
+{{ccdb-pagination}}
 {{ccdb-table model=model columns=columns}}

app/templates/components/filter-collections.hbs

@@ -0,0 +1,10 @@
+<div class='col-md-12'>
+  <div class="row">
+    <div class="col-md-3">
+      <select>
+        <option selected=selected>Perchlorate</option>
+        <option>Saint Lawrence Island</option>
+      </select>
+    </div>
+  </div>
+</div>

tests/integration/components/ccdb-pagination-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('ccdb-pagination', 'Integration | Component | ccdb pagination', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{ccdb-pagination}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#ccdb-pagination}}
+      template block text
+    {{/ccdb-pagination}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/filter-collections-test.js

@@ -0,0 +1,25 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('filter-collections', 'Integration | Component | filter collections', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{filter-collections}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#filter-collections}}
+      template block text
+    {{/filter-collections}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});