如何在ReactTable中实现搜索?

时间:2019-06-24 09:36:25

标签: reactjs react-table

我具有可重用的表组件,包括搜索和分页。搜索功能未运行。

我的App.js

class App extends React.Component{

  constructor(props){
    super(props);

    this.state ={
      data: [
          { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
          { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
      ],
    };
    this.filterAll = this.filterAll.bind(this);
  }
   render(){
   const { data } = this.state;
   return(
    <div>
      <DataTable data={data} columns={columns}/>
    </div>
  );
 }
}

我的DataTable.js是在App.js中调用的组件

class DataTable extends React.Component{
  render(){
    return(
      <div>
        <div className="kodeTable">
            <input value={this.state.filterAll} onChange={this.filterAll} className="kodeFormSearch" placeholder="Cari Course"/>
          </div>
          <ReactTable
          data = {this.props.data}
          columns = {this.props.columns}
          onFilteredChange={this.onFilteredChange.bind(this)}
          />
      </div>
    );
  }
}

0 个答案:

没有答案