Enhancement request: add an API to clear all filters

[victorbr]

Currently there exists an API to clear filtering per column but there is no simple API to clear them all. The example at http://allenfang.github.io/react-bootstrap-table/example.html#column-filter suggests to clear them one by one but that's inconvenient when the table is dynamic.

[AllenFang]

I'll spend some time to support it, for now you can try http://allenfang.github.io/react-bootstrap-table/docs.html#handleFilterData

but please take care your filter type, for example, if text filter that will be very simple, just assign empty string like following:

this.refs.table.handleFilterData({  // this.refs.table is a ref for BootstrapTable
    name: ''   // assume you have name field
});

But if it is a number filter, you should

this.refs.table.handleFilterData({  // this.refs.table is a ref for BootstrapTable
    name: '', // assume you have name field
    price: {  // assume you have price field
      number: '',
      comparator: ''
    }
});

[victorbr]

Thank you for the suggestion! In the end I was able to overcome it with a code like this:

export default class TableView extends Component {

    constructor(props) {
        super(props);
        this.clearFilters = this.clearFilters.bind(this);
    }

    clearFilters() {
        this.columns.forEach(ref => ref.cleanFiltered());
    }

    render() {
        // the rest omitted for clarity
        const addColumnToRefs = column => {
            if (column) {
                this.columns.push(column);
            }
        };
        const list = this.props.columns.map((col, index) => {
            return <TableHeaderColumn ref={addColumnToRefs} key={col.name}
                                      dataField={col.name} filter={col.filter}
                                      dataFormat={col.dataFormat}>{col.displayName}</TableHeaderColumn>
        });
    }
}

And now my class exposes an API clearFilters which I can call from anywhere.

[AllenFang]

That's also a good workaround :) I'll find some time to do this feature, but it's lower priority currently, thanks your feedback.

[phamj88]

I am using your example: this.refs.table.handleFilterData({ // this.refs.table is a ref for BootstrapTable name: '' // assume you have name field });

I see the filters being removed but the input values still show the previous text. Is this a bug? "react-bootstrap-table": "^3.2.0",

[AllenFang]

https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/column-filter/all-filters.js#L66-L73