How to reset filter fields in React Table?
Check it out:
1) When you initiate your parent component, make it stateful and give it a 'filtered' property with an empty array, like this:
constructor() {
super();
this.state = {
filtered: []
};
}
2) When you set up your React Table component, connect its "filtered" property to state, like this:
filtered={this.state.filtered}
3) Connect filtering to state, like this:
onFilteredChange={filtered => {this.setState({ filtered });}}
4) Hook up a button or whatever you want to reset the filters, with an onClick method like this:
onClick={()=>this.setState({ filtered: [] })}>
Easy, or what?
![Angel Cuenca](https://i.stack.imgur.com/HCFv6.png?s=256&g=1)
Angel Cuenca
Developer working in Guadalajara Mexico Backend: NodeJS, NestJs and bit of Java Frontend: Angular, ReactJS DB: MSSQL, PostgreSQL, Datastore Testing: In process... Every time I enjoy write more faster, I'm a Typemaster player on http://typeracer.com Never stop learning
Updated on June 16, 2022Comments
-
Angel Cuenca about 2 years
Is there an instruction for reset the filter fields in some moment ? To filter for any column works fine calling in
onFetchData
an Ajax call to get the data filtered. But some actions that I need after info filtered, re-render the table. In another function inside my class I execute:this.setState({ filter: [] });
But the info to filter after table is updated are still in the fields.
<ReactTable data={this.state.data} loading={this.state.loading} pages={this.state.pages} filterable columns={[ { Header: "First Name", id: "firstName", accessor: d => d.firstName, Filter: ({ filter, onChange }) => ( <input className="form-control input-sm" onChange={event => onChange(event.target.value)} value={filter ? filter.value : ''} /> ) }, { Header: "Last Name", accessor: "lastName", Filter: ({ filter, onChange }) => ( <input className="form-control input-sm" onChange={event => onChange(event.target.value)} value={filter ? filter.value : ''} /> ) } ]} onFilteredChange={(column, value) => { //Code }} onFetchData={(state, instance) => { //Ajax call }} defaultPageSize={10} className="-striped -highlight" manual />