For now just use ember-table (revisit this)

app/models/strain.js

@@ -1,4 +1,5 @@
 import DS from 'ember-data';
+import Ember from 'ember';
 
 export default DS.Model.extend({
   measurements     : DS.hasMany('measurements', { async: true }),
@@ -27,6 +28,6 @@ export default DS.Model.extend({
   }.property('species', 'strainName').readOnly(),
 
   fullNameMU: function() {
-    return `<em>${this.get('species.speciesName')}</em> ${this.get('strainNameMU')}`;
+    return Ember.String.htmlSafe(`<em>${this.get('species.speciesName')}</em> ${this.get('strainNameMU')}`);
   }.property('species', 'strainNameMU').readOnly(),
 });

app/pods/application/view.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+/* global FlakesFrame */
 
 export default Ember.View.extend({
   classNames: ['flakes-frame'],

app/pods/measurements/controller.js

@@ -1,6 +1,42 @@
 import Ember from 'ember';
+import ColumnDefinition from 'ember-table/models/column-definition';
 
 export default Ember.Controller.extend({
+  measurements: [],
+
+  measurementsEmpty: function() {
+    return this.get('measurements').length === 0;
+  }.property('measurements'),
+
+  tableColumns: Ember.computed(function() {
+    let strainCol = ColumnDefinition.create({
+      savedWidth: 200,
+      textAlign: 'text-align-left',
+      headerCellName: 'Strain',
+      contentPath: 'strain.fullNameMU',
+    });
+
+    let charCol = ColumnDefinition.create({
+      savedWidth: 200,
+      textAlign: 'text-align-left',
+      headerCellName: 'Characteristic',
+      contentPath: 'characteristic.characteristicName',
+    });
+
+    let valCol = ColumnDefinition.create({
+      savedWidth: 150,
+      textAlign: 'text-align-left',
+      headerCellName: 'Value',
+      contentPath: 'value',
+    });
+
+    return [strainCol, charCol, valCol];
+  }),
+
+  tableContent: Ember.computed('measurements', function() {
+    return this.get('measurements');
+  }),
+
   actions: {
     search: function() {
       this.store.find('measurement', {

app/pods/measurements/template.hbs

@@ -41,21 +41,14 @@
   </div>
 </div>
 
-<table class="flakes-table">
-  <thead>
-    <tr>
-      <th>Strain</th>
-      <th>Characteristic</th>
-      <th>Value</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each measurements as |measurement|}}
-      <tr>
-        <td>{{{measurement.strain.fullNameMU}}}</td>
-        <td>{{measurement.characteristic.characteristicName}}</td>
-        <td>{{{measurement.value}}}</td>
-      </tr>
-    {{/each}}
-  </tbody>
-</table>
+{{#if measurementsEmpty}}
+  <span>No results</span>
+{{else}}
+  {{
+    ember-table
+    columns=tableColumns
+    content=tableContent
+    columnMode='fluid'
+    hasFooter=false
+  }}
+{{/if}}

bower.json

@@ -15,6 +15,9 @@
     "flakes": "~1.0.0",
     "ember-simple-auth": "~0.8.0-beta.3",
     "moment": "~2.9.0",
-    "select2": "3.5.2"
+    "select2": "3.5.2",
+    "antiscroll": "git://github.com/azirbel/antiscroll.git#90391fb371c7be769bc32e7287c5271981428356",
+    "jquery-mousewheel": "~3.1.4",
+    "jquery-ui": "~1.11.4"
   }
 }

package.json

@@ -38,6 +38,7 @@
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.2",
     "ember-select-2": "1.3.0",
+    "ember-table": "0.5.0",
     "express": "^4.12.4",
     "glob": "^4.5.3",
     "jsonwebtoken": "^5.0.0",