Use custom filter input component with Griddle

Question

I'm using griddle a react component to create a table.

Griddle supports a extra attribute to show a filter input element, which manipulates the table.

Is there a way to use your own independent form / input with griddle. So that when the third-party input is submitted I can trigger some function within griddle to update table?

I've looked at the docs and put an issue here on the project. I have no idea how to accomplish this.

Answer 1

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.

Answer 2

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

See the "Component Customization" section.