Utilizzare il componente di input del filtro personalizzato con Piastra

Question

Sto usando griddle un componente di reazione per creare una tabella.

La griglia supporta un attributo extra per mostrare un elemento di input del filtro, che manipola la tabella.

C'è un modo per utilizzare il proprio modulo/input indipendente con la piastra. In questo modo, quando viene inviato l'input di terze parti, posso attivare alcune funzioni nella piastra per aggiornare la tabella?

Ho esaminato lo docs e ho inserito un problema here nel progetto. Non ho idea di come realizzare questo.

Answer 1

C'è un esempio di filtraggio personalizzati nella pagina seguente: http://griddlegriddle.github.io/Griddle/customization.html

Vedere il "Filtro personalizzato e Filtro Component" sezione.

Answer 2

come esemplificato nella this demo è possibile specificare un filtro personalizzato e personalizzato dei componenti:

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

Quindi è possibile inizializzare il tavolo Piastra in questo modo:

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

Il puntello changeFilter viene passato al vostro customFilterComponent perché è il puntello customFilterComponent di Griddle.