Is React bootstrap table provide header TextFilter with clear button?

Question

I am using react-bootstrap-table to display data in table row-column format.

I have one requirement to filter data using header filter option with clear button.

like this

<TableHeaderColumn dataField='member' filter={ { type: 'TextFilter', delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>

But this filter display only Textbox. I want to add clear button also.

Is there any way to display clear button by enabling property in the filter? Or Do I need to write a custom filter for that?

<TableHeaderColumn dataField='member' filter={ { type: 'CustomFilter', getElement: getCustomFilter, delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>

Answer 1

I have developed the custom filter for Textbox with the clear button.

import React from "react";
import PropTypes from 'prop-types';
import {Form, InputGroup, FormControl, Glyphicon} from "react-bootstrap";

export default class TextWithClearButtonFilter extends React.Component {

  constructor(props) {
    super(props);
    this.filter = this.filter.bind(this);
    this.cleanFiltered = this.cleanFiltered.bind(this);

    this.state = {
      value: this.props.defaultValue || ''
    };

  }

 cleanFiltered() {

    if (this.state.value) {

        var value = this.props.defaultValue ? this.props.defaultValue : '';
        this.setState(function () {
            return { value: value };
        });

        this.props.filterHandler(value);
    }

  }

 filter(event) {

      var _this2 = this;

      if (this.timeout) {

        clearTimeout(this.timeout);
      }

      var filterValue = event.target.value;

      this.setState(function () {
        return { value: filterValue };
      });

      this.timeout = setTimeout(function () {
        if(filterValue){
            _this2.props.filterHandler(filterValue);
        } else {
            _this2.props.filterHandler(_this2.props.defaultValue);
        }
      }, _this2.props.delay);

  }

  render() {
    return (
      <div>
            <InputGroup bsSize="small">
                <FormControl
                    type="text"
                    placeholder="Search"
                    style={{width:90}}
                    onChange={this.filter}
                    value={this.state.value}
                />
                <InputGroup.Addon className="hoverHand" onClick={this.cleanFiltered}>
                    <Glyphicon glyph="remove" />
                </InputGroup.Addon>
            </InputGroup>
      </div>
    );
  }
}

TextWithClearButtonFilter.propTypes = {
  filterHandler: PropTypes.func.isRequired,
  defaultValue: PropTypes.string,
  delay: PropTypes.number
};

TextWithClearButtonFilter.defaultProps = {
  delay: 2000
};

export function getTextWithClearButtonFilter(filterHandler, customFilterParameters) {
  return (
    <TextWithClearButtonFilter filterHandler={filterHandler} />
  );
}

And Use this way

<TableHeaderColumn dataField='member' filter={ { type: 'CustomFilter', getElement: getTextWithClearButtonFilter, delay:1000, condition:'like'} }>Member Name</TableHeaderColumn>