Griddleでカスタムフィルタ入力コンポーネントを使用

Question

私はgriddle反応コンポーネントを使用してテーブルを作成しています。

Griddleはテーブルを操作するフィルタ入力要素を表示するための特別な属性をサポートしています。

独自のフォーム/入力をグリッドで使用する方法はありますか？サードパーティの入力が提出されたときに、テーブルを更新するためにグリッド内の一部の機能をトリガできるようにするにはどうすればよいですか？

私はdocsを見て、プロジェクトにhereという問題を付けました。私はこれをどのように達成するか考えていません。

Answer 1

次のページのカスタムフィルタの例があります：http://griddlegriddle.github.io/Griddle/customization.html

は、「カスタムフィルタリングをし、成分フィルタ」を参照してくださいを。

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> 
    ); 
    } 
}); 

は、その後、あなたがこのようなあなたのグリドルテーブルを初期化することができます：小道具changeFilterはあなたのcustomFilterComponentに渡される

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

Answer 2

this demoに例示するように、カスタムフィルタやカスタムコンポーネントを指定することができますそれはcustomFilterComponent小道のGriddleです。