Use custom filter input component with Griddle

As exemplified in this demo you can specify a custom filter and custom component:

var _ = require('underscore'),    squish = require('object-squish');var customFilterFunction = function(items, query) {  return _.filter(items, (item) => {    var flat = squish(item);    for (var key in flat) {      if (String(flat[key]).toLowerCase().indexOf(query.toLowerCase()) >= 0)        return true;    }    return false;  });};var customFilterComponent = React.createClass({  getInitialState() {    return {      "query": ""    };  },  searchChange(event) {    this.setState({      query: event.target.value    });    // this line is important    this.props.changeFilter(this.state.query);  },  render() {    return (      <div className="filter-container">        <input type="text"               name="search"               placeholder="Search..."               onChange={this.searchChange} />      </div>    );  }});

Then you can initialize your Griddle table like this:

React.render(  <Griddle results={fakeData} showFilter={true}    useCustomFilterer={true} customFilterer={customFilterFunction}    useCustomFilterComponent={true} customFilterComponent={customFilterComponent}/>,  document.getElementById('griddle'));

The prop changeFilter gets passed to your customFilterComponent because it's the customFilterComponent prop of Griddle.

There is an example of custom filtering on the following page: http://griddlegriddle.github.io/Griddle/docs/customization/

See the "Component Customization" section.