Added a Filter that can search by column

app/templates/nutrition-table.html

@@ -6,13 +6,24 @@
     <md-button ng-click="hideHead = !hideHead">{{hideHead ? 'Show Head' : 'Decapitate'}}</md-button>
     <md-button ng-click="blah = !blah">{{blah ? 'turn on' : 'turn off'}}</md-button>
     <md-button ng-click="loadStuff()">Load</md-button>
-    <md-button class="md-icon-button">
+    <md-button ng-click="showFilters=!showFilters" class="md-icon-button">
       <md-icon>filter_list</md-icon>
     </md-button>
     <md-button class="md-icon-button">
       <md-icon>more_vert</md-icon>
     </md-button>
   </div>
+  <div layout="column" ng-if="showFilters" layout-padding>
+    <h6 class=".md-title" layout="row">Filter by Column(s)</h6>
+    <div layout="row" layout-fill>
+      <div layout="column" ng-repeat="column in columns">
+        <md-input-container>
+          <label>Filter by {{column.name}}</label>
+          <input ng-model="column.filter" type="text">
+        </md-input-container>
+      </div>
+    </div>
+  </div>
 </md-toolbar>
 
 <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length">
@@ -27,7 +38,6 @@
     </md-button>
   </div>
 </md-toolbar>
-
 <md-table-container>
   <table data-md-table data-md-row-select="!hideCheckboxes" data-ng-model="selected" md-progress="promise">
     <!-- <thead md-head md-order="query.order">
@@ -56,7 +66,7 @@
       </tr>
     </thead>
     <tbody md-body>
-      <tr md-row md:select="dessert" data-md-on-select="log" md-on-deselect="deselect" x-md-auto-select="!blah" ng-disabled="dessert.calories.value > 400" data-ng-repeat="dessert in desserts.data | filter: filter.search | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
+      <tr md-row md:select="dessert" data-md-on-select="log" md-on-deselect="deselect" x-md-auto-select="!blah" ng-disabled="dessert.calories.value > 400" data-ng-repeat="dessert in desserts.data | mdTableColumnarFilter:columns | orderBy: query.order | limitTo: query.limit : (query.page -1) * query.limit">
         <td md-cell>{{dessert.name}}</td>
         <td md-cell>
           <md-select ng-model="dessert.type" placeholder="Other">

src/scripts/mdTableFilter.js

@@ -0,0 +1,36 @@
+'use strict';
+
+angular.module('md.data.table')
+    .filter('mdTableColumnarFilter', columnarFilter);
+
+function columnarFilter(){
+    //utility for nested strings in column orderBy / column searchBy
+    //this handles cases where the value is nested within the data object
+    //example is when the location of the column is orderBy/searchBy value "myData.obj.name"
+    var resolveValue = function(obj, prop) {
+        var _index = prop.indexOf('.');
+        if(_index > -1) {
+            return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
+        }
+
+        return obj[prop];
+    };
+
+
+    return function (values, columns) {
+        var result = values;
+        columns.forEach(function(col){
+            // if a column has an orderBy already use that. otherwise a searchBy can be specified.
+            var colId = col.orderBy ? col.orderBy : col.searchBy;
+            //if an orderBy or searchBy value is set and the column filter has a value, it will filter on that column
+            if(colId && col.filter){
+                //filter the current set of values
+                result = result.filter(function(row){
+                    var val = (resolveValue(row, colId));
+                    return val && val.toString().toLowerCase().indexOf(col.filter.toLowerCase()) !== -1;
+                });
+            }
+        });
+        return result;
+    };
+}