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>