How to reset filter fields in React Table?

10,488

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?

Share:
10,488
Angel Cuenca
Author by

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, 2022

Comments

  • Angel Cuenca
    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
    />