Adding customFilterContainer ability to be passed customOptions.

build/Griddle.js

@@ -815,7 +815,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        };
 	    },
 	    getFilter: function getFilter() {
-	        return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
+	        return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { customFilterComponentOptions: this.props.customFilterComponentOptions, changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
 	    },
 	    getSettings: function getSettings() {
 	        return this.props.showSettings ? React.createElement('button', { type: 'button', className: this.props.settingsToggleClassName, onClick: this.toggleColumnChooser,
@@ -8010,14 +8010,25 @@ return /******/ (function(modules) { // webpackBootstrap
 	*/
 	"use strict";
 
+	var _extends = Object.assign || function (target) {
+	  for (var i = 1; i < arguments.length; i++) {
+	    var source = arguments[i];for (var key in source) {
+	      if (Object.prototype.hasOwnProperty.call(source, key)) {
+	        target[key] = source[key];
+	      }
+	    }
+	  }return target;
+	};
+
 	var React = __webpack_require__(2);
 
 	var CustomFilterContainer = React.createClass({
 	  displayName: "CustomFilterContainer",
 
 	  getDefaultProps: function getDefaultProps() {
 	    return {
-	      "placeholderText": ""
+	      "placeholderText": "",
+	      "customFilterComponentOptions": {}
 	    };
 	  },
 	  render: function render() {
@@ -8028,11 +8039,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	      return React.createElement("div", null);
 	    }
 
-	    return React.createElement(that.props.customFilterComponent, {
+	    return React.createElement(that.props.customFilterComponent, _extends({}, this.props.customFilterComponentOptions, {
 	      changeFilter: this.props.changeFilter,
 	      results: this.props.results,
 	      currentResults: this.props.currentResults,
-	      placeholderText: this.props.placeholderText });
+	      placeholderText: this.props.placeholderText }));
 	  }
 	});
 

docs/src/markdown/customization.md

@@ -445,6 +445,21 @@ var TestLineChart = React.createClass({
 
 Griddle supports custom filtering and custom filter components. In order to use a custom filter function set the property `useCustomFilterer` to true and pass in a function to the  `customFilterer` property. To use a custom filter component set `useCustomFilterComponent` to true and pass a component to `customFilterComponent`.
 
+<dl>
+  <dt>useCustomFilterComponent</dt>
+  <dd><strong>bool</strong> - Use custom filter component rather than default filter. default: false</dd>
+</dl>
+
+<dl>
+  <dt>customFilterComponent</dt>
+  <dd><strong>object</strong> - The custom filter component. default: {}</dd>
+</dl>
+
+<dl>
+  <dt>customFilterComponentOptions</dt>
+  <dd><strong>object</strong> - Any options to be passed to the custom filter component. default: {}</dd>
+</dl>
+
 #####Example:#####
 
 This example shows how to make a custom filter component with a custom filter function that does a case-insensitive search through the items. The component must call `this.props.changeFilter(val)` when the filter should be updated. In the example below we pass a string but any variable type can be used as long as the filter function is expecting it, for example an advanced query could be passed in using an object. The filter function signature takes the items to be filtered and the query to filter them by.

modules/customFilterContainer.jsx.js

@@ -3,14 +3,25 @@
 */
 "use strict";
 
+var _extends = Object.assign || function (target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        target[key] = source[key];
+      }
+    }
+  }return target;
+};
+
 var React = require('react');
 
 var CustomFilterContainer = React.createClass({
   displayName: "CustomFilterContainer",
 
   getDefaultProps: function getDefaultProps() {
     return {
-      "placeholderText": ""
+      "placeholderText": "",
+      "customFilterComponentOptions": {}
     };
   },
   render: function render() {
@@ -21,11 +32,11 @@ var CustomFilterContainer = React.createClass({
       return React.createElement("div", null);
     }
 
-    return React.createElement(that.props.customFilterComponent, {
+    return React.createElement(that.props.customFilterComponent, _extends({}, this.props.customFilterComponentOptions, {
       changeFilter: this.props.changeFilter,
       results: this.props.results,
       currentResults: this.props.currentResults,
-      placeholderText: this.props.placeholderText });
+      placeholderText: this.props.placeholderText }));
   }
 });
 

modules/griddle.jsx.js

@@ -247,7 +247,6 @@ var Griddle = React.createClass({
             this.props.externalSetPageSize(size);
             return;
         }
-
         //make this better.
         this.state.resultsPerPage = size;
         this.setMaxPage();
@@ -750,7 +749,7 @@ var Griddle = React.createClass({
         };
     },
     getFilter: function getFilter() {
-        return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
+        return this.props.showFilter && this.shouldUseCustomGridComponent() === false ? this.props.useCustomFilterComponent ? React.createElement(CustomFilterContainer, { customFilterComponentOptions: this.props.customFilterComponentOptions, changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText, customFilterComponent: this.props.customFilterComponent, results: this.props.results, currentResults: this.getCurrentResults() }) : React.createElement(GridFilter, { changeFilter: this.setFilter, placeholderText: this.props.filterPlaceholderText }) : "";
     },
     getSettings: function getSettings() {
         return this.props.showSettings ? React.createElement('button', { type: 'button', className: this.props.settingsToggleClassName, onClick: this.toggleColumnChooser,

scripts/customFilterContainer.jsx

@@ -6,7 +6,8 @@ var React = require('react');
 var CustomFilterContainer = React.createClass({
   getDefaultProps: function(){
     return {
-      "placeholderText": ""
+      "placeholderText": "",
+      "customFilterComponentOptions": {}
     }
   },
   render: function(){
@@ -18,6 +19,7 @@ var CustomFilterContainer = React.createClass({
       }
 
       return <that.props.customFilterComponent
+        {...this.props.customFilterComponentOptions}
         changeFilter={this.props.changeFilter}
         results={this.props.results}
         currentResults={this.props.currentResults}

scripts/griddle.jsx

@@ -760,7 +760,7 @@ var Griddle = React.createClass({
     getFilter: function(){
      return ((this.props.showFilter && this.shouldUseCustomGridComponent() === false) ?
         ( this.props.useCustomFilterComponent ?
-         <CustomFilterContainer changeFilter={this.setFilter} placeholderText={this.props.filterPlaceholderText} customFilterComponent={this.props.customFilterComponent} results={this.props.results} currentResults={this.getCurrentResults()} /> :
+         <CustomFilterContainer customFilterComponentOptions={this.props.customFilterComponentOptions} changeFilter={this.setFilter} placeholderText={this.props.filterPlaceholderText} customFilterComponent={this.props.customFilterComponent} results={this.props.results} currentResults={this.getCurrentResults()} /> :
          <GridFilter changeFilter={this.setFilter} placeholderText={this.props.filterPlaceholderText} />) :
         "");
     },