Added ability to determine which columns can be utilized in filtering.

Author: pstephan1187

README.md

@@ -164,6 +164,20 @@ This is a boolean value that determines whether or not that column can be sorted
 }
 ```
 
+#### filterable
+
+This is a boolean value that determines whether or not that column should be utilized in filtering. Filtering is enabled by default on all columns except for component columns. Component columns do not currently support filtering. To disable filtering on any particular column, define `filterable` as `false`:
+
+```
+{
+	label: 'Email',
+	field: 'email',
+	filterable: false
+}
+```
+
+Filtering works such that the text in the filter input is split by white space, and each word is then checked against every filterable column. If each word appears at least once in any column, then that row passes and is displayed in the table.
+
 ### rows
 
 This is the data that is represented by each row in the table. It must be an array of objects where the key of each object is the value for your column.field entries. For example, if you have a column entry like this:

dist/vuejs-datatable.js

@@ -6,7 +6,7 @@ vm = new Vue({
 	el: 'body',
 	data: {
 		columns: [
-			{label: 'ID', field: 'id', align: 'center'},
+			{label: 'ID', field: 'id', align: 'center', filterable: false},
 			{label: 'Username', field: 'username'},
 			{label: 'First Name', field: 'first_name'},
 			{label: 'Last Name', field: 'last_name'},

examples/vue-1/app.js

@@ -100,7 +100,7 @@ Vue.component('custom-filter-bar', {
 
 window.getColumns = function(){
 	return [
-		{label: 'ID', field: 'id', align: 'center'},
+		{label: 'ID', field: 'id', align: 'center', filterable: false},
 		{label: 'Username', field: 'username'},
 		{label: 'First Name', field: 'first_name'},
 		{label: 'Last Name', field: 'last_name'},

examples/vue-2/app.js

@@ -41,6 +41,7 @@
 <script>
 module.exports = {
 	props: {
+		columns: [Object, Array],
 		rows: [Object, Array],
 		filterable: {
 			type: Boolean,
@@ -74,21 +75,35 @@ module.exports = {
 						}
 
 						var pass = false;
+						// var i = 0;
 
-						for(var c in row){
-							var column = row[c];
+						for(var i in this.columns){
+							var column_definition = this.columns[i];
+							var column_text = '';
 
-							if(column === null){
+							if(!column_definition.filterable){
 								continue;
 							}
 
-							column = '' + column + '';
+							if(column_definition.field){
+								column_text = row[column_definition.field];
+							}else if(typeof column_definition.callback === 'function'){
+								column_text = (column_definition.callback)(row);
+							}else{
+								continue;
+							}
+
+							if(!column_text){
+								continue;
+							}
+
+							column_text = ('' + column_text + '').trim();
 
-							if(typeof column.toLowerCase === 'function'){
-								column = column.toLowerCase();
+							if(typeof column_text.toLowerCase === 'function'){
+								column_text = column_text.toLowerCase();
 							}
 
-							if(column.indexOf(filter_word) !== -1){
+							if(column_text.indexOf(filter_word) !== -1){
 								var pass = true;
 							}
 						}
@@ -99,7 +114,7 @@ module.exports = {
 					}
 
 					return true;
-				}.bind(this));
+				}, this);
 			}
 
 			return rows;

examples/vue-2/build/app.js

@@ -10,6 +10,7 @@
 
 			<component :is="filterBar"
 				v-if="filterable || paginate"
+				:columns="column_props"
 				:rows="sorted_rows"
 				:filterable="filterable"
 				:paginate="paginate"
@@ -80,12 +81,16 @@ module.exports = {
 			return this.columns.map(function(column){
 				var sortable = typeof column.sortable === 'undefined' ? true : column.sortable;
 				sortable = column.component ? false : sortable;
+				
+				var filterable = typeof column.filterable === 'undefined' ? true : column.filterable;
+				filterable = column.component ? false : filterable;
 
 				return {
 					id: i++,
 					label: column.label || '',
 					align: column.align || 'left',
 					sortable: sortable,
+					filterable: filterable,
 					field: column.field || null,
 					callback: column.callback || null,
 					component: column.component || null