Multiple filters for Griddle v1

[hkeshani]

Is there a working example showing how to implement multiple filters for Griddle v.1, as was shown in the v. 0.x docs https://griddlegriddle.github.io/v0-docs/customization.html ?

[jovanni-hernandez]

This is also of great interest to me, I've been trying to figure out how to add multiple filters from a plugin I've made, but I don't see any obvious ways of doing so. It appears that the core functionality only allows one filter at a time. Also column based filtering would be amazing.

[davidpelayo]

I think this is a must have and looking forward to see how to plug-in into my griddle table. Anyone with some working example? Related?

[davidpelayo]

I've added by the way a modification in my forked repo in a way I can provide to a custom <Filter /> component an object to the setFilter action hook, being then responsibility of the plugins.Local's dataFilteredSelector to consider whether the filter is a plain string or an object.

Please any suggestion, enhancement or doubt, let's discuss it.

Therefore my custom Filter component:

class CustomFilter extends Component {
  constructor(props) {
    /* ... */

    this.state = {
      filter1: '',
      filter2: ''
    };
  }

  setFilter1(e) {
    this.setState({
      filter1: e.target.value
    }, () => {
      this.props.setFilter({
        filter1: this.state.filter1
      });
    });
  }

  setFilter2(e) {
    this.setState({
      filter2: e.target.value
    }, () => {
      this.props.setFilter({
        filter2: this.state.filter2
      });
    });
  }

  render() {
    return (
      <div className="custom__filters">
        <input
          type="text"
          name="filter"
          placeholder="Filter 1"
          value={this.state.filter1}
          onChange={this.setFilter1}
          style={this.props.style}
          className={cx(this.props.className, 'custom-filters__filter')} />
        <input
          type="text"
          name="filter"
          placeholder="Filter 2"
          value={this.state.filter2}
          onChange={this.setFilter2}
          style={this.props.style}
          className={cx(this.props.className, 'custom-filters__filter')} />
      </div>
    );
  }
}

CustomFilter.propTypes = {
  /* ... */
};

export default CustomFilter;

The dataFilteredSelector will consider we have two columns on our dataset identified by the keys: filter1 and filter2, filtering the data as follows:

export const filteredDataSelector = createSelector(
  dataSelector,
  filterSelector,
  (data, filter) => {
    return data.filter(row  => {
      return Object.keys(row.toJSON())
        .some(key => {
          if (typeof filter === 'string') {
            return row.get(key) && row.get(key).toString().toLowerCase().indexOf(filter.toLowerCase()) > -1
          }

          return row.get(key) && typeof filter[key] === 'string' && row.get(key).toString().toLowerCase().indexOf(filter[key].toLowerCase()) > -1;
        })
      })
  }
);

[hkeshani]

Thanks so much for this! I'll give it a try and report back.

[davidpelayo]

Related to #177. Related to #66.

[jtlindsey]

Any update on being able to filter by column? I'm catching the events ..onFilter but i'm not sure what to do with it when i get it. For server side i can filter, but for client side, I'm not sure if I should be modifying some existing functionality or using my own client side filter function. Any ideas?