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}}