diff --git a/lib/assets/javascripts/utils/collateTable.js b/lib/assets/javascripts/utils/collateTable.js
new file mode 100644
index 0000000..5cd9b2b
--- /dev/null
+++ b/lib/assets/javascripts/utils/collateTable.js
@@ -0,0 +1,31 @@
+/* 
+  tablesorter is an external library located in vendor/tablesorter.
+
+  it does not provide us with icons though, so we add our own below along
+  with logic to change them to up/down arrows when the user sorts the column
+*/
+
+(function(ctx){
+  var swapIcons = (function(el){
+    if($(el).find("span.fa").hasClass('fa-sort') || $(el).find("span.fa").hasClass('fa-sort-asc')){
+      $(el).find("span.fa").removeClass('fa-sort').removeClass('fa-sort-asc').addClass('fa-sort-desc');
+    }else{
+      $(el).find("span.fa").removeClass('fa-sort-desc').addClass('fa-sort-asc');
+    }
+  });
+  
+  ctx.init = ctx.init || (function(options){
+    if($ && options && options.selector){
+      /* Bind the table to the external tablesorter JS (see vendor/tablesorter) */
+      $(options.selector).tablesorter(); 
+    
+      /* Tablesorter doesn't provide icons so we add our own here */
+      /* we also bind their click event to display the up/down arrow */
+      $(options.selector + " th.tablesorter-headerUnSorted:not(.sorter-false) div.tablesorter-header-inner")
+      .append('<span class="fa fa-sort" title="sort"></span>')
+      .click(function(e){
+        swapIcons(this);
+      });
+    }
+  });
+})(define('dmproadmap.utils.collateTable'));
\ No newline at end of file
diff --git a/lib/assets/javascripts/utils/filteriseTable.js b/lib/assets/javascripts/utils/filteriseTable.js
new file mode 100644
index 0000000..75eb1b5
--- /dev/null
+++ b/lib/assets/javascripts/utils/filteriseTable.js
@@ -0,0 +1,47 @@
+/* 
+  filteriseTable adds filter capabilities to an HTML table 
+  table rows are shown/hidden as the user enters text into the filter input field 
+  all rows are made visible when the user clicks the 'clear' icon
+*/
+(function(ctx){
+
+  var filter = (function(el){
+    var query = $(el).val(),
+        regex = new RegExp(query, 'i'),
+        matched = false;
+
+    if(query.length < 3){
+      $(el).closest("table").find("tbody tr").show();
+  
+    }else{
+      $.each($(el).closest("table").find("tbody tr"), function(idx, tr){
+        if($(tr).text().match(regex)){
+          $(tr).show();
+        }else{
+          $(tr).hide();
+        }
+      });
+    }
+  });
+
+  var clear = (function(el){
+    $(el).val('');
+    $(el).closest("table").find("tbody tr").show();
+  });
+
+  ctx.init = ctx.init || (function(options){
+    if($ && options && options.selector){
+      /* Bind the keyup  function to the input field's keyup event */
+      $(options.selector).keyup(function(e){
+        filter(this);
+      });
+
+      /* Bind the clear function to the clear icon's click event */
+      $(options.selector).siblings("#clear_filter").click(function(e){
+        e.preventDefault();
+        clear(options.selector);
+      });
+    }
+  });
+
+})(define('dmproadmap.utils.filteriseTable'));
\ No newline at end of file
diff --git a/lib/assets/javascripts/views/plans/index.js b/lib/assets/javascripts/views/plans/index.js
index cc6ac83..95f497b 100644
--- a/lib/assets/javascripts/views/plans/index.js
+++ b/lib/assets/javascripts/views/plans/index.js
@@ -1,4 +1,7 @@
 $(document).ready(function(){
+  dmproadmap.utils.collateTable.init({ selector: 'table.tablesorter' });
+  dmproadmap.utils.filteriseTable.init({ selector: '#filter' });
+
   // Update the plan's test status via ajax when the checkbox is clicked
   $("input[type='checkbox']").on('click, change', function(e){
     var self = this;