From f34cb4bf6353b48240afa9f97d64fbf0a23fd2b0 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Mon, 26 Mar 2018 23:49:27 +0800
Subject: [PATCH 01/12] allow user to filter column without inputField

* wrap onFilter to HOF to allow filter dynamically
---
 .../src/wrapper.js                            | 57 +++++++++++--------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/react-bootstrap-table2-filter/src/wrapper.js b/packages/react-bootstrap-table2-filter/src/wrapper.js
index f48e031..9a64eb1 100644
--- a/packages/react-bootstrap-table2-filter/src/wrapper.js
+++ b/packages/react-bootstrap-table2-filter/src/wrapper.js
@@ -40,33 +40,42 @@ export default (Base, {
       }
     }
 
-    onFilter(column, filterVal, filterType) {
-      const { store, columns } = this.props;
-      const currFilters = Object.assign({}, this.state.currFilters);
-      const { dataField, filter } = column;
+    /**
+     * filter the table like below:
+     * onFilter(column, filterType)(filterVal)
+     * @param {Object} column
+     * @param {String} filterType
+     * @param {String} filterVal - user input for filtering.
+     */
+    onFilter(column, filterType) {
+      return (filterVal) => {
+        const { store, columns } = this.props;
+        const currFilters = Object.assign({}, this.state.currFilters);
+        const { dataField, filter } = column;
 
-      if (!_.isDefined(filterVal) || filterVal === '') {
-        delete currFilters[dataField];
-      } else {
-        // select default comparator is EQ, others are LIKE
-        const {
-          comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
-          caseSensitive = false
-        } = filter.props;
-        currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
-      }
-      store.filters = currFilters;
+        if (!_.isDefined(filterVal) || filterVal === '') {
+          delete currFilters[dataField];
+        } else {
+          // select default comparator is EQ, others are LIKE
+          const {
+            comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
+            caseSensitive = false
+          } = filter.props;
+          currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
+        }
+        store.filters = currFilters;
 
-      if (this.isRemoteFiltering() || this.isRemotePagination()) {
-        this.handleRemoteFilterChange();
-        // when remote filtering is enable, dont set currFilters state
-        // in the componentWillReceiveProps, 
-        // it's the key point that we can know the filter is changed
-        return;
-      }
+        if (this.isRemoteFiltering() || this.isRemotePagination()) {
+          this.handleRemoteFilterChange();
+          // when remote filtering is enable, dont set currFilters state
+          // in the componentWillReceiveProps,
+          // it's the key point that we can know the filter is changed
+          return;
+        }
 
-      store.filteredData = filters(store, columns, _)(currFilters);
-      this.setState(() => ({ currFilters, isDataChanged: true }));
+        store.filteredData = filters(store, columns, _)(currFilters);
+        this.setState(() => ({ currFilters, isDataChanged: true }));
+      };
     }
 
     render() {

From a1477e2ad38b29f66e9652634caa2d59ee5a6c18 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Tue, 27 Mar 2018 00:16:33 +0800
Subject: [PATCH 02/12] filter column by new onFilter

---
 .../src/components/number.js                        | 12 ++++++------
 .../src/components/select.js                        | 10 +++++-----
 .../src/components/text.js                          | 13 +++++++++----
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 3c2b612..5a99692 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -34,7 +34,7 @@ class NumberFilter extends Component {
     const comparator = this.numberFilterComparator.value;
     const number = this.numberFilter.value;
     if (comparator && number) {
-      onFilter(column, { number, comparator }, FILTER_TYPE.NUMBER);
+      onFilter(column, FILTER_TYPE.NUMBER)({ number, comparator });
     }
   }
 
@@ -53,7 +53,7 @@ class NumberFilter extends Component {
     }
     const filterValue = e.target.value;
     this.timeout = setTimeout(() => {
-      onFilter(column, { number: filterValue, comparator }, FILTER_TYPE.NUMBER);
+      onFilter(column, FILTER_TYPE.NUMBER)({ number: filterValue, comparator });
     }, delay);
   }
 
@@ -65,7 +65,7 @@ class NumberFilter extends Component {
     // if (comparator === '') {
     //   return;
     // }
-    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
   onChangeComparator(e) {
@@ -75,7 +75,7 @@ class NumberFilter extends Component {
     // if (value === '') {
     //   return;
     // }
-    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
   getComparatorOptions() {
@@ -116,7 +116,7 @@ class NumberFilter extends Component {
     this.setState(() => ({ isSelected: (number !== '') }));
     this.numberFilterComparator.value = comparator;
     this.numberFilter.value = number;
-    onFilter(column, { number, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number, comparator });
   }
 
   cleanFiltered() {
@@ -126,7 +126,7 @@ class NumberFilter extends Component {
     this.setState(() => ({ isSelected: (value !== '') }));
     this.numberFilterComparator.value = comparator;
     this.numberFilter.value = value;
-    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+    onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
   render() {
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 7e17afd..852938c 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -27,7 +27,7 @@ class SelectFilter extends Component {
   componentDidMount() {
     const value = this.selectInput.value;
     if (value && value !== '') {
-      this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+      this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
     }
   }
 
@@ -41,7 +41,7 @@ class SelectFilter extends Component {
     if (needFilter) {
       const value = this.selectInput.value;
       if (value) {
-        this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+        this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
       }
     }
   }
@@ -64,19 +64,19 @@ class SelectFilter extends Component {
     const value = (this.props.defaultValue !== undefined) ? this.props.defaultValue : '';
     this.setState(() => ({ isSelected: value !== '' }));
     this.selectInput.value = value;
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
   applyFilter(value) {
     this.selectInput.value = value;
     this.setState(() => ({ isSelected: value !== '' }));
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
   filter(e) {
     const { value } = e.target;
     this.setState(() => ({ isSelected: value !== '' }));
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.SELECT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
   render() {
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index ffbe702..154f308 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -17,10 +17,14 @@ class TextFilter extends Component {
       value: props.defaultValue
     };
   }
+
   componentDidMount() {
+    const { onFilter } = this.props;
+
     const defaultValue = this.input.value;
+
     if (defaultValue) {
-      this.props.onFilter(this.props.column, defaultValue, FILTER_TYPE.TEXT);
+      onFilter(this.props.column, FILTER_TYPE.TEXT)(defaultValue);
     }
   }
 
@@ -40,7 +44,7 @@ class TextFilter extends Component {
     const filterValue = e.target.value;
     this.setState(() => ({ value: filterValue }));
     this.timeout = setTimeout(() => {
-      this.props.onFilter(this.props.column, filterValue, FILTER_TYPE.TEXT);
+      this.props.onFilter(this.props.column, FILTER_TYPE.TEXT)(filterValue);
     }, this.props.delay);
   }
 
@@ -53,12 +57,12 @@ class TextFilter extends Component {
   cleanFiltered() {
     const value = this.props.defaultValue;
     this.setState(() => ({ value }));
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.TEXT);
+    this.props.onFilter(this.props.column, value, FILTER_TYPE.TEXT)();
   }
 
   applyFilter(filterText) {
     this.setState(() => ({ value: filterText }));
-    this.props.onFilter(this.props.column, filterText, FILTER_TYPE.TEXT);
+    this.props.onFilter(this.props.column, FILTER_TYPE.TEXT)(filterText);
   }
 
   handleClick(e) {
@@ -79,6 +83,7 @@ class TextFilter extends Component {
       defaultValue,
       ...rest
     } = this.props;
+
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
       <input

From 4dd39aeed8013385f79aaa21d3f773a68426b712 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Sun, 1 Apr 2018 13:51:11 +0800
Subject: [PATCH 03/12] export onFilter function to allow user to access

---
 .../src/components/number.js                    | 17 +++++++++++++++--
 .../src/components/select.js                    | 16 ++++++++++++++--
 .../src/components/text.js                      | 15 ++++++++++++---
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 5a99692..3b946cf 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -1,3 +1,4 @@
+/* eslint react/require-default-props: 0 */
 /* eslint no-return-assign: 0 */
 
 import React, { Component } from 'react';
@@ -30,12 +31,23 @@ class NumberFilter extends Component {
   }
 
   componentDidMount() {
-    const { column, onFilter } = this.props;
+    const { column, onFilter, getFilterBy } = this.props;
     const comparator = this.numberFilterComparator.value;
     const number = this.numberFilter.value;
     if (comparator && number) {
       onFilter(column, FILTER_TYPE.NUMBER)({ number, comparator });
     }
+
+    // export onFilter function to allow users to access
+    if (getFilterBy) {
+      getFilterBy((filterVal) => {
+        this.setState(() => ({ isSelected: (filterVal !== '') }));
+        onFilter(column, FILTER_TYPE.NUMBER)({
+          number: filterVal.number,
+          comparator: filterVal.comparator
+        });
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -224,7 +236,8 @@ NumberFilter.propTypes = {
   comparatorStyle: PropTypes.object,
   comparatorClassName: PropTypes.string,
   numberStyle: PropTypes.object,
-  numberClassName: PropTypes.string
+  numberClassName: PropTypes.string,
+  getFilterBy: PropTypes.func
 };
 
 NumberFilter.defaultProps = {
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 852938c..8ba74b2 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -25,9 +25,19 @@ class SelectFilter extends Component {
   }
 
   componentDidMount() {
+    const { column, onFilter, getFilterBy } = this.props;
+
     const value = this.selectInput.value;
     if (value && value !== '') {
-      this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
+      onFilter(column, FILTER_TYPE.SELECT)(value);
+    }
+
+    // export onFilter function to allow users to access
+    if (getFilterBy) {
+      getFilterBy((filterVal) => {
+        this.setState(() => ({ isSelected: filterVal !== '' }));
+        onFilter(column, FILTER_TYPE.SELECT)(filterVal);
+      });
     }
   }
 
@@ -90,6 +100,7 @@ class SelectFilter extends Component {
       comparator,
       withoutEmptyOption,
       caseSensitive,
+      getFilterBy,
       ...rest
     } = this.props;
 
@@ -121,7 +132,8 @@ SelectFilter.propTypes = {
   className: PropTypes.string,
   withoutEmptyOption: PropTypes.bool,
   defaultValue: PropTypes.any,
-  caseSensitive: PropTypes.bool
+  caseSensitive: PropTypes.bool,
+  getFilterBy: PropTypes.func
 };
 
 SelectFilter.defaultProps = {
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index 154f308..65b6c7d 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -19,13 +19,20 @@ class TextFilter extends Component {
   }
 
   componentDidMount() {
-    const { onFilter } = this.props;
-
+    const { onFilter, getFilterBy, column } = this.props;
     const defaultValue = this.input.value;
 
     if (defaultValue) {
       onFilter(this.props.column, FILTER_TYPE.TEXT)(defaultValue);
     }
+
+    // export onFilter function to allow users to access
+    if (getFilterBy) {
+      getFilterBy((filterVal) => {
+        this.setState(() => ({ value: filterVal }));
+        onFilter(column, FILTER_TYPE.TEXT)(filterVal);
+      });
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -81,6 +88,7 @@ class TextFilter extends Component {
       onFilter,
       caseSensitive,
       defaultValue,
+      getFilterBy,
       ...rest
     } = this.props;
 
@@ -110,7 +118,8 @@ TextFilter.propTypes = {
   placeholder: PropTypes.string,
   style: PropTypes.object,
   className: PropTypes.string,
-  caseSensitive: PropTypes.bool
+  caseSensitive: PropTypes.bool,
+  getFilterBy: PropTypes.func
 };
 
 TextFilter.defaultProps = {

From 09032349d0290365e307880b505350dc5467c616 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Sun, 1 Apr 2018 14:49:22 +0800
Subject: [PATCH 04/12] [example] example for programmatically filter by text,
 number and select

---
 .../programmatically-number-filter.js         | 85 ++++++++++++++++
 .../programmatically-select-filter.js         | 96 +++++++++++++++++++
 .../programmatically-text-filter.js           | 80 ++++++++++++++++
 .../stories/index.js                          |  8 +-
 4 files changed, 268 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
 create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js

diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js
new file mode 100644
index 0000000..76a26b8
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+let filterBy;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    getFilterBy: (filterByFunc) => {
+      filterBy = filterByFunc;
+    }
+  })
+}];
+
+const handleClick = () => {
+  filterBy({
+    number: 2103,
+    comparator: Comparator.GT
+  });
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+
+let filterBy;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    getFilterBy: (filterByFunc) => {
+      filterBy = filterByFunc;
+    }
+  })
+}];
+
+const handleClick = () => {
+  filterBy({
+    number: 2103,
+    comparator: Comparator.GT
+  });
+};
+
+<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+
+export default () => (
+  <div>
+  <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
new file mode 100644
index 0000000..b084db2
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
@@ -0,0 +1,96 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+let filterBy;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilterBy: (filterByFunc) => {
+      // filterBy was assigned to onFilter once the component has mount
+      filterBy = filterByFunc;
+    }
+  })
+}];
+
+const handleClick = () => {
+  filterBy('0');
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+let filterBy;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilterBy: (filterByFunc) => {
+      // filterBy was assigned to onFilter once the component has mount
+      filterBy = filterByFunc;
+    }
+  })
+}];
+
+const handleClick = () => {
+  filterBy('0');
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
+
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
new file mode 100644
index 0000000..2e7f01b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+let filterBy;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilterBy: (filterByFunc) => {
+      filterBy = filterByFunc;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const handleClick = () => {
+  filterBy('0');
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+let filterBy;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilterBy: (filterByFunc) => {
+      // filterBy was assigned to onFilter once the component has mount
+      filterBy = filterByFunc;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const handleClick = () => {
+  filterBy('0');
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 25d8538..7e3ba5e 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -48,6 +48,9 @@ import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import NumberFilter from 'examples/column-filter/number-filter';
 import NumberFilterWithDefaultValue from 'examples/column-filter/number-filter-default-value';
 import CustomNumberFilter from 'examples/column-filter/custom-number-filter';
+import ProgrammaticallyTextFilter from 'examples/column-filter/programmatically-text-filter';
+import ProgrammaticallySelectFilter from 'examples/column-filter/programmatically-select-filter';
+import ProgrammaticallyNumberFilter from 'examples/column-filter/programmatically-number-filter';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -166,7 +169,10 @@ storiesOf('Column Filter', module)
   .add('Custom Text Filter', () => <CustomTextFilter />)
   .add('Custom Select Filter', () => <CustomSelectFilter />)
   .add('Custom Number Filter', () => <CustomNumberFilter />)
-  .add('Custom Filter Value', () => <CustomFilterValue />);
+  .add('Custom Filter Value', () => <CustomFilterValue />)
+  .add('Programmatically Text Filter ', () => <ProgrammaticallyTextFilter />)
+  .add('Programmatically Select Filter ', () => <ProgrammaticallySelectFilter />)
+  .add('Programmatically Number Filter ', () => <ProgrammaticallyNumberFilter />);
 
 storiesOf('Work on Rows', module)
   .add('Customize Row Style', () => <RowStyleTable />)

From 377534512a35e0f850f9b91052c66db9cd04e3e9 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Sun, 1 Apr 2018 15:59:26 +0800
Subject: [PATCH 05/12] rename props and variable in samples for better
 readability

---
 .../programmatically-number-filter.js         | 22 +++++++++----------
 .../programmatically-select-filter.js         | 20 ++++++++---------
 .../programmatically-text-filter.js           | 19 ++++++++--------
 .../src/components/number.js                  |  8 +++----
 .../src/components/select.js                  | 10 ++++-----
 .../src/components/text.js                    | 10 ++++-----
 6 files changed, 45 insertions(+), 44 deletions(-)

diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js
index 76a26b8..12a5ebc 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js
@@ -6,7 +6,7 @@ import { productsGenerator } from 'utils/common';
 
 const products = productsGenerator(8);
 
-let filterBy;
+let priceFilter;
 
 const columns = [{
   dataField: 'id',
@@ -18,14 +18,15 @@ const columns = [{
   dataField: 'price',
   text: 'Product Price',
   filter: numberFilter({
-    getFilterBy: (filterByFunc) => {
-      filterBy = filterByFunc;
+    getFilter: (filter) => {
+      // pricerFilter was assigned once the component has been mounted.
+      priceFilter = filter;
     }
   })
 }];
 
 const handleClick = () => {
-  filterBy({
+  priceFilter({
     number: 2103,
     comparator: Comparator.GT
   });
@@ -35,7 +36,7 @@ const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
 
-let filterBy;
+let priceFilter;
 
 const columns = [{
   dataField: 'id',
@@ -47,24 +48,23 @@ const columns = [{
   dataField: 'price',
   text: 'Product Price',
   filter: numberFilter({
-    getFilterBy: (filterByFunc) => {
-      filterBy = filterByFunc;
+    getFilter: (filter) => {
+      // pricerFilter was assigned once the component has been mounted.
+      priceFilter = filter;
     }
   })
 }];
 
 const handleClick = () => {
-  filterBy({
+  priceFilter({
     number: 2103,
     comparator: Comparator.GT
   });
 };
 
-<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
-
 export default () => (
   <div>
-  <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
 
     <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
   </div>
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
index b084db2..96f00de 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
@@ -6,7 +6,7 @@ import { productsQualityGenerator } from 'utils/common';
 
 const products = productsQualityGenerator(6);
 
-let filterBy;
+let qualityFilter;
 
 const selectOptions = {
   0: 'good',
@@ -26,22 +26,22 @@ const columns = [{
   formatter: cell => selectOptions[cell],
   filter: selectFilter({
     options: selectOptions,
-    getFilterBy: (filterByFunc) => {
-      // filterBy was assigned to onFilter once the component has mount
-      filterBy = filterByFunc;
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
     }
   })
 }];
 
 const handleClick = () => {
-  filterBy('0');
+  qualityFilter('0');
 };
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
 
-let filterBy;
+let qualityFilter;
 
 const selectOptions = {
   0: 'good',
@@ -61,15 +61,15 @@ const columns = [{
   formatter: cell => selectOptions[cell],
   filter: selectFilter({
     options: selectOptions,
-    getFilterBy: (filterByFunc) => {
-      // filterBy was assigned to onFilter once the component has mount
-      filterBy = filterByFunc;
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
     }
   })
 }];
 
 const handleClick = () => {
-  filterBy('0');
+  qualityFilter('0');
 };
 
 export default () => (
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
index 2e7f01b..2db8698 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
@@ -6,7 +6,7 @@ import { productsGenerator } from 'utils/common';
 
 const products = productsGenerator(8);
 
-let filterBy;
+let nameFilter;
 
 const columns = [{
   dataField: 'id',
@@ -15,8 +15,9 @@ const columns = [{
   dataField: 'name',
   text: 'Product Name',
   filter: textFilter({
-    getFilterBy: (filterByFunc) => {
-      filterBy = filterByFunc;
+    getFilter: (filter) => {
+      // nameFilter was assigned once the component has been mounted.
+      nameFilter = filter;
     }
   })
 }, {
@@ -26,14 +27,14 @@ const columns = [{
 }];
 
 const handleClick = () => {
-  filterBy('0');
+  nameFilter('0');
 };
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
-let filterBy;
+let nameFilter;
 
 const columns = [{
   dataField: 'id',
@@ -42,9 +43,9 @@ const columns = [{
   dataField: 'name',
   text: 'Product Name',
   filter: textFilter({
-    getFilterBy: (filterByFunc) => {
-      // filterBy was assigned to onFilter once the component has mount
-      filterBy = filterByFunc;
+    getFilter: (filter) => {
+      // nameFilter was assigned once the component has been mounted.
+      nameFilter = filter;
     }
   })
 }, {
@@ -54,7 +55,7 @@ const columns = [{
 }];
 
 const handleClick = () => {
-  filterBy('0');
+  nameFilter('0');
 };
 
 export default () => (
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 3b946cf..c2d07ce 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -31,7 +31,7 @@ class NumberFilter extends Component {
   }
 
   componentDidMount() {
-    const { column, onFilter, getFilterBy } = this.props;
+    const { column, onFilter, getFilter } = this.props;
     const comparator = this.numberFilterComparator.value;
     const number = this.numberFilter.value;
     if (comparator && number) {
@@ -39,8 +39,8 @@ class NumberFilter extends Component {
     }
 
     // export onFilter function to allow users to access
-    if (getFilterBy) {
-      getFilterBy((filterVal) => {
+    if (getFilter) {
+      getFilter((filterVal) => {
         this.setState(() => ({ isSelected: (filterVal !== '') }));
         onFilter(column, FILTER_TYPE.NUMBER)({
           number: filterVal.number,
@@ -237,7 +237,7 @@ NumberFilter.propTypes = {
   comparatorClassName: PropTypes.string,
   numberStyle: PropTypes.object,
   numberClassName: PropTypes.string,
-  getFilterBy: PropTypes.func
+  getFilter: PropTypes.func
 };
 
 NumberFilter.defaultProps = {
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 8ba74b2..91ab934 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -25,7 +25,7 @@ class SelectFilter extends Component {
   }
 
   componentDidMount() {
-    const { column, onFilter, getFilterBy } = this.props;
+    const { column, onFilter, getFilter } = this.props;
 
     const value = this.selectInput.value;
     if (value && value !== '') {
@@ -33,8 +33,8 @@ class SelectFilter extends Component {
     }
 
     // export onFilter function to allow users to access
-    if (getFilterBy) {
-      getFilterBy((filterVal) => {
+    if (getFilter) {
+      getFilter((filterVal) => {
         this.setState(() => ({ isSelected: filterVal !== '' }));
         onFilter(column, FILTER_TYPE.SELECT)(filterVal);
       });
@@ -100,7 +100,7 @@ class SelectFilter extends Component {
       comparator,
       withoutEmptyOption,
       caseSensitive,
-      getFilterBy,
+      getFilter,
       ...rest
     } = this.props;
 
@@ -133,7 +133,7 @@ SelectFilter.propTypes = {
   withoutEmptyOption: PropTypes.bool,
   defaultValue: PropTypes.any,
   caseSensitive: PropTypes.bool,
-  getFilterBy: PropTypes.func
+  getFilter: PropTypes.func
 };
 
 SelectFilter.defaultProps = {
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index 65b6c7d..7468044 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -19,7 +19,7 @@ class TextFilter extends Component {
   }
 
   componentDidMount() {
-    const { onFilter, getFilterBy, column } = this.props;
+    const { onFilter, getFilter, column } = this.props;
     const defaultValue = this.input.value;
 
     if (defaultValue) {
@@ -27,8 +27,8 @@ class TextFilter extends Component {
     }
 
     // export onFilter function to allow users to access
-    if (getFilterBy) {
-      getFilterBy((filterVal) => {
+    if (getFilter) {
+      getFilter((filterVal) => {
         this.setState(() => ({ value: filterVal }));
         onFilter(column, FILTER_TYPE.TEXT)(filterVal);
       });
@@ -88,7 +88,7 @@ class TextFilter extends Component {
       onFilter,
       caseSensitive,
       defaultValue,
-      getFilterBy,
+      getFilter,
       ...rest
     } = this.props;
 
@@ -119,7 +119,7 @@ TextFilter.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   caseSensitive: PropTypes.bool,
-  getFilterBy: PropTypes.func
+  getFilter: PropTypes.func
 };
 
 TextFilter.defaultProps = {

From f54c1f77b41720953afbb0476ea1a52700f8f95e Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Wed, 4 Apr 2018 15:39:23 +0800
Subject: [PATCH 06/12] display filter condition correctly and make sure text
 filter to be String

---
 .../programmatically-select-filter.js         |  8 ++--
 .../programmatically-text-filter.js           |  4 +-
 .../src/components/number.js                  |  3 ++
 .../src/components/select.js                  |  2 +
 .../src/filter.js                             | 44 +++++++++++--------
 .../src/wrapper.js                            |  1 +
 6 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
index 96f00de..d368af5 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js
@@ -22,7 +22,7 @@ const columns = [{
   text: 'Product Name'
 }, {
   dataField: 'quality',
-  text: 'Product Quailty',
+  text: 'Product Quality',
   formatter: cell => selectOptions[cell],
   filter: selectFilter({
     options: selectOptions,
@@ -34,7 +34,7 @@ const columns = [{
 }];
 
 const handleClick = () => {
-  qualityFilter('0');
+  qualityFilter(0);
 };
 
 const sourceCode = `\
@@ -57,7 +57,7 @@ const columns = [{
   text: 'Product Name'
 }, {
   dataField: 'quality',
-  text: 'Product Quailty',
+  text: 'Product Quality',
   formatter: cell => selectOptions[cell],
   filter: selectFilter({
     options: selectOptions,
@@ -69,7 +69,7 @@ const columns = [{
 }];
 
 const handleClick = () => {
-  qualityFilter('0');
+  qualityFilter(0);
 };
 
 export default () => (
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
index 2db8698..f1080c0 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js
@@ -27,7 +27,7 @@ const columns = [{
 }];
 
 const handleClick = () => {
-  nameFilter('0');
+  nameFilter(0);
 };
 
 const sourceCode = `\
@@ -55,7 +55,7 @@ const columns = [{
 }];
 
 const handleClick = () => {
-  nameFilter('0');
+  nameFilter(0);
 };
 
 export default () => (
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index c2d07ce..ebf55e8 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -42,6 +42,9 @@ class NumberFilter extends Component {
     if (getFilter) {
       getFilter((filterVal) => {
         this.setState(() => ({ isSelected: (filterVal !== '') }));
+        this.numberFilterComparator.value = filterVal.comparator;
+        this.numberFilter.value = filterVal.number;
+
         onFilter(column, FILTER_TYPE.NUMBER)({
           number: filterVal.number,
           comparator: filterVal.comparator
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 91ab934..ba2d306 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -36,6 +36,8 @@ class SelectFilter extends Component {
     if (getFilter) {
       getFilter((filterVal) => {
         this.setState(() => ({ isSelected: filterVal !== '' }));
+        this.selectInput.value = filterVal;
+
         onFilter(column, FILTER_TYPE.SELECT)(filterVal);
       });
     }
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index e0d7a45..9f7812c 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -6,30 +6,37 @@ import { LIKE, EQ, NE, GT, GE, LT, LE } from './comparison';
 export const filterByText = _ => (
   data,
   dataField,
-  { filterVal = '', comparator = LIKE, caseSensitive },
+  { filterVal: userInput = '', comparator = LIKE, caseSensitive },
   customFilterValue
-) =>
-  data.filter((row) => {
-    let cell = _.get(row, dataField);
-    if (customFilterValue) {
-      cell = customFilterValue(cell, row);
-    }
-    const cellStr = _.isDefined(cell) ? cell.toString() : '';
-    if (comparator === EQ) {
-      return cellStr === filterVal;
-    }
-    if (caseSensitive) {
-      return cellStr.includes(filterVal);
-    }
-    return cellStr.toLocaleUpperCase().indexOf(filterVal.toLocaleUpperCase()) !== -1;
-  });
+) => {
+  // make sure filter value to be a string
+  const filterVal = userInput.toString();
+
+  return (
+    data.filter((row) => {
+      let cell = _.get(row, dataField);
+      if (customFilterValue) {
+        cell = customFilterValue(cell, row);
+      }
+      const cellStr = _.isDefined(cell) ? cell.toString() : '';
+      if (comparator === EQ) {
+        return cellStr === filterVal;
+      }
+      if (caseSensitive) {
+        return cellStr.includes(filterVal);
+      }
+
+      return cellStr.toLocaleUpperCase().indexOf(filterVal.toLocaleUpperCase()) !== -1;
+    })
+  );
+};
 
 export const filterByNumber = _ => (
   data,
   dataField,
   { filterVal: { comparator, number } },
   customFilterValue
-) =>
+) => (
   data.filter((row) => {
     if (number === '' || !comparator) return true;
     let valid = true;
@@ -81,7 +88,8 @@ export const filterByNumber = _ => (
       }
     }
     return valid;
-  });
+  })
+);
 
 export const filterFactory = _ => (filterType) => {
   let filterFn;
diff --git a/packages/react-bootstrap-table2-filter/src/wrapper.js b/packages/react-bootstrap-table2-filter/src/wrapper.js
index 9a64eb1..f13e615 100644
--- a/packages/react-bootstrap-table2-filter/src/wrapper.js
+++ b/packages/react-bootstrap-table2-filter/src/wrapper.js
@@ -63,6 +63,7 @@ export default (Base, {
           } = filter.props;
           currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
         }
+
         store.filters = currFilters;
 
         if (this.isRemoteFiltering() || this.isRemotePagination()) {

From a35701fabfc84675656a1f81fed1ba7c1c59116d Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Wed, 4 Apr 2018 16:23:59 +0800
Subject: [PATCH 07/12] [test] correct test for filter wrapper

---
 .../test/filter.test.js                       | 13 ++++++++++++
 .../test/wrapper.test.js                      | 20 +++++++++----------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/react-bootstrap-table2-filter/test/filter.test.js b/packages/react-bootstrap-table2-filter/test/filter.test.js
index ae66a38..2ffd36d 100644
--- a/packages/react-bootstrap-table2-filter/test/filter.test.js
+++ b/packages/react-bootstrap-table2-filter/test/filter.test.js
@@ -42,6 +42,19 @@ describe('filter', () => {
       filterFn = filters(store, columns, _);
     });
 
+    describe('when filter value is not a String', () => {
+      it('should transform to string and do the filter', () => {
+        currFilters.name = {
+          filterVal: 3,
+          filterType: FILTER_TYPE.TEXT
+        };
+
+        const result = filterFn(currFilters);
+        expect(result).toBeDefined();
+        expect(result).toHaveLength(2);
+      });
+    });
+
     describe(`when default comparator is ${LIKE}`, () => {
       it('should returning correct result', () => {
         currFilters.name = {
diff --git a/packages/react-bootstrap-table2-filter/test/wrapper.test.js b/packages/react-bootstrap-table2-filter/test/wrapper.test.js
index 3d86285..1442658 100644
--- a/packages/react-bootstrap-table2-filter/test/wrapper.test.js
+++ b/packages/react-bootstrap-table2-filter/test/wrapper.test.js
@@ -167,14 +167,14 @@ describe('Wrapper', () => {
 
       it('should setting store object correctly', () => {
         filterVals.forEach((filterVal) => {
-          instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+          instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
           expect(props.store.filtering).toBeFalsy();
         });
       });
 
       it('should setting state correctly', () => {
         filterVals.forEach((filterVal) => {
-          instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+          instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
           expect(instance.state.isDataChanged).toBeTruthy();
           expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
         });
@@ -185,12 +185,12 @@ describe('Wrapper', () => {
       const filterVal = '3';
 
       it('should setting store object correctly', () => {
-        instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
         expect(props.store.filters).toEqual(instance.state.currFilters);
       });
 
       it('should setting state correctly', () => {
-        instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
       });
@@ -203,7 +203,7 @@ describe('Wrapper', () => {
         props = createTableProps();
         props.remote = { filter: true };
         createFilterWrapper(props);
-        instance.onFilter(props.columns[1], filterVal, FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
       });
 
       it('should not setting store object correctly', () => {
@@ -222,27 +222,27 @@ describe('Wrapper', () => {
 
     describe('combination', () => {
       it('should setting store object correctly', () => {
-        instance.onFilter(props.columns[1], '3', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('3');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
-        instance.onFilter(props.columns[1], '2', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('2');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
-        instance.onFilter(props.columns[2], '2', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('2');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(2);
 
-        instance.onFilter(props.columns[2], '', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
 
-        instance.onFilter(props.columns[1], '', FILTER_TYPE.TEXT);
+        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('');
         expect(props.store.filters).toEqual(instance.state.currFilters);
         expect(instance.state.isDataChanged).toBeTruthy();
         expect(Object.keys(instance.state.currFilters)).toHaveLength(0);

From c64951fd6fb8d710c6018431420a4620943bc2ea Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Wed, 4 Apr 2018 16:51:54 +0800
Subject: [PATCH 08/12] [test] correct tests for filter components

* <Text />, <Select /> and <Numbner />
---
 .../src/components/text.js                    |  2 +-
 .../test/components/number.test.js            | 12 +++++-
 .../test/components/select.test.js            | 41 ++++++++++++++-----
 .../test/components/text.test.js              | 24 ++++++++---
 4 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index 7468044..3af8ae2 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -64,7 +64,7 @@ class TextFilter extends Component {
   cleanFiltered() {
     const value = this.props.defaultValue;
     this.setState(() => ({ value }));
-    this.props.onFilter(this.props.column, value, FILTER_TYPE.TEXT)();
+    this.props.onFilter(this.props.column, FILTER_TYPE.TEXT)(value);
   }
 
   applyFilter(filterText) {
diff --git a/packages/react-bootstrap-table2-filter/test/components/number.test.js b/packages/react-bootstrap-table2-filter/test/components/number.test.js
index 6ba66f7..e08573d 100644
--- a/packages/react-bootstrap-table2-filter/test/components/number.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/number.test.js
@@ -9,7 +9,11 @@ import * as Comparator from '../../src/comparison';
 
 describe('Number Filter', () => {
   let wrapper;
+
+  // onFilter(x)(y) = filter result
   const onFilter = sinon.stub();
+  const onFilterFirstReturn = sinon.stub();
+
   const column = {
     dataField: 'price',
     text: 'Product Price'
@@ -17,6 +21,9 @@ describe('Number Filter', () => {
 
   afterEach(() => {
     onFilter.reset();
+    onFilterFirstReturn.reset();
+
+    onFilter.returns(onFilterFirstReturn);
   });
 
   describe('initialization', () => {
@@ -110,8 +117,9 @@ describe('Number Filter', () => {
 
     it('should calling onFilter on componentDidMount', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(
-        column, { number: `${number}`, comparator }, FILTER_TYPE.NUMBER)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith({ number: `${number}`, comparator })).toBeTruthy();
     });
   });
 
diff --git a/packages/react-bootstrap-table2-filter/test/components/select.test.js b/packages/react-bootstrap-table2-filter/test/components/select.test.js
index 2ed39a6..0c4c80a 100644
--- a/packages/react-bootstrap-table2-filter/test/components/select.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/select.test.js
@@ -9,19 +9,27 @@ import { FILTER_TYPE } from '../../src/const';
 describe('Select Filter', () => {
   let wrapper;
   let instance;
+
+  // onFilter(x)(y) = filter result
   const onFilter = sinon.stub();
+  const onFilterFirstReturn = sinon.stub();
+
   const column = {
     dataField: 'quality',
     text: 'Product Quality'
   };
+
   const options = {
     0: 'Bad',
     1: 'Good',
-    2: 'Unknow'
+    2: 'Unknown'
   };
 
   afterEach(() => {
     onFilter.reset();
+    onFilterFirstReturn.reset();
+
+    onFilter.returns(onFilterFirstReturn);
   });
 
   describe('initialization', () => {
@@ -83,7 +91,9 @@ describe('Select Filter', () => {
 
       it('should calling onFilter on componentDidMount', () => {
         expect(onFilter.calledOnce).toBeTruthy();
-        expect(onFilter.calledWith(column, defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+        expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
       });
     });
   });
@@ -170,8 +180,9 @@ describe('Select Filter', () => {
 
       it('should update', () => {
         expect(onFilter.callCount).toBe(2);
-        expect(onFilter.calledWith(
-          column, instance.props.defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
       });
     });
 
@@ -198,8 +209,9 @@ describe('Select Filter', () => {
 
       it('should update', () => {
         expect(onFilter.callCount).toBe(2);
-        expect(onFilter.calledWith(
-          column, instance.props.defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
       });
     });
   });
@@ -226,7 +238,9 @@ describe('Select Filter', () => {
 
       it('should calling onFilter correctly', () => {
         expect(onFilter.callCount).toBe(2);
-        expect(onFilter.calledWith(column, defaultValue, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
       });
     });
 
@@ -249,6 +263,7 @@ describe('Select Filter', () => {
 
       it('should calling onFilter correctly', () => {
         expect(onFilter.callCount).toBe(1);
+        expect(onFilterFirstReturn.callCount).toBe(1);
       });
     });
   });
@@ -268,8 +283,10 @@ describe('Select Filter', () => {
     });
 
     it('should calling onFilter correctly', () => {
-      expect(onFilter.callCount).toBe(1);
-      expect(onFilter.calledWith(column, value, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(value)).toBeTruthy();
     });
   });
 
@@ -289,8 +306,10 @@ describe('Select Filter', () => {
     });
 
     it('should calling onFilter correctly', () => {
-      expect(onFilter.callCount).toBe(1);
-      expect(onFilter.calledWith(column, event.target.value, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(event.target.value)).toBeTruthy();
     });
   });
 });
diff --git a/packages/react-bootstrap-table2-filter/test/components/text.test.js b/packages/react-bootstrap-table2-filter/test/components/text.test.js
index 4a9c282..0885824 100644
--- a/packages/react-bootstrap-table2-filter/test/components/text.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/text.test.js
@@ -9,7 +9,11 @@ jest.useFakeTimers();
 describe('Text Filter', () => {
   let wrapper;
   let instance;
+
+  // onFilter(x)(y) = filter result
   const onFilter = sinon.stub();
+  const onFilterFirstReturn = sinon.stub();
+
   const column = {
     dataField: 'price',
     text: 'Price'
@@ -17,6 +21,9 @@ describe('Text Filter', () => {
 
   afterEach(() => {
     onFilter.reset();
+    onFilterFirstReturn.reset();
+
+    onFilter.returns(onFilterFirstReturn);
   });
 
   describe('initialization', () => {
@@ -58,7 +65,9 @@ describe('Text Filter', () => {
 
     it('should calling onFilter on componentDidMount', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, defaultValue, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
     });
   });
 
@@ -114,7 +123,9 @@ describe('Text Filter', () => {
 
     it('should calling onFilter correctly when props.defaultValue is changed', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, nextDefaultValue, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(nextDefaultValue)).toBeTruthy();
     });
   });
 
@@ -133,8 +144,9 @@ describe('Text Filter', () => {
 
     it('should calling onFilter correctly', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(
-        column, instance.props.defaultValue, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
     });
   });
 
@@ -154,7 +166,9 @@ describe('Text Filter', () => {
 
     it('should calling onFilter correctly', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, filterText, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(filterText)).toBeTruthy();
     });
   });
 

From a82e6113581f65dfce026221896985f3cdcafb4d Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Wed, 4 Apr 2018 17:43:39 +0800
Subject: [PATCH 09/12] [test] add test for pogrammatically filter

---
 .../test/components/number.test.js            | 30 ++++++++++++++++
 .../test/components/select.test.js            | 35 +++++++++++++++++++
 .../test/components/text.test.js              | 30 ++++++++++++++++
 3 files changed, 95 insertions(+)

diff --git a/packages/react-bootstrap-table2-filter/test/components/number.test.js b/packages/react-bootstrap-table2-filter/test/components/number.test.js
index e08573d..3586ec4 100644
--- a/packages/react-bootstrap-table2-filter/test/components/number.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/number.test.js
@@ -97,6 +97,36 @@ describe('Number Filter', () => {
     });
   });
 
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const comparator = Comparator.EQ;
+    const number = 123;
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <NumberFilter onFilter={ onFilter } column={ column } getFilter={ getFilter } />
+      );
+
+      programmaticallyFilter({ comparator, number });
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith({ comparator, number })).toBeTruthy();
+    });
+
+    it('should setState correctly when exported function was executed', () => {
+      expect(wrapper.state().isSelected).toBeTruthy();
+    });
+  });
+
   describe('when defaultValue.number and defaultValue.comparator props is defined', () => {
     const number = 203;
     const comparator = Comparator.EQ;
diff --git a/packages/react-bootstrap-table2-filter/test/components/select.test.js b/packages/react-bootstrap-table2-filter/test/components/select.test.js
index 0c4c80a..85f9686 100644
--- a/packages/react-bootstrap-table2-filter/test/components/select.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/select.test.js
@@ -98,6 +98,41 @@ describe('Select Filter', () => {
     });
   });
 
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const filterValue = 'foo';
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <SelectFilter
+          onFilter={ onFilter }
+          column={ column }
+          options={ options }
+          getFilter={ getFilter }
+        />
+      );
+      instance = wrapper.instance();
+
+      programmaticallyFilter(filterValue);
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(filterValue)).toBeTruthy();
+    });
+
+    it('should setState correctly when exported function was executed', () => {
+      expect(instance.state.isSelected).toBeTruthy();
+    });
+  });
+
   describe('when placeholder is defined', () => {
     const placeholder = 'test';
     beforeEach(() => {
diff --git a/packages/react-bootstrap-table2-filter/test/components/text.test.js b/packages/react-bootstrap-table2-filter/test/components/text.test.js
index 0885824..5a8d297 100644
--- a/packages/react-bootstrap-table2-filter/test/components/text.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/text.test.js
@@ -71,6 +71,36 @@ describe('Text Filter', () => {
     });
   });
 
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const filterValue = 'foo';
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <TextFilter onFilter={ onFilter } column={ column } getFilter={ getFilter } />
+      );
+      instance = wrapper.instance();
+
+      programmaticallyFilter(filterValue);
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(filterValue)).toBeTruthy();
+    });
+
+    it('should setState correctly when exported function was executed', () => {
+      expect(instance.state.value).toEqual(filterValue);
+    });
+  });
+
   describe('when placeholder is defined', () => {
     const placeholder = 'test';
     beforeEach(() => {

From dc1f4dcc38e6252001f3f4fbf97bb91106b7644e Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Thu, 5 Apr 2018 16:35:26 +0800
Subject: [PATCH 10/12] update travis.yml

---
 .travis.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 02a5492..cc7025e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -9,9 +9,10 @@ cache:
 
 branches:
   only:
-  # skip master branch when it's under development phase
-  # - master 
+  - master
   - develop
+  except:
+  - gh-pages-src
 
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s

From b172c6801c3775eff3ed40c4e0960faf96a34eba Mon Sep 17 00:00:00 2001
From: Allen <ayu780129@hotmail.com>
Date: Sun, 8 Apr 2018 21:17:24 +0800
Subject: [PATCH 11/12] fix #228

---
 gulpfile.babel.js              | 12 +++++--
 webpack.prod.config.babel.js   | 64 ----------------------------------
 webpack/editor.umd.babel.js    | 16 +++++++++
 webpack/filter.umd.babel.js    | 16 +++++++++
 webpack/next.umd.babel.js      | 16 +++++++++
 webpack/overlay.umd.babel.js   | 16 +++++++++
 webpack/paginator.umd.babel.js | 16 +++++++++
 webpack/webpack.umd.babel.js   | 45 ++++++++++++++++++++++++
 8 files changed, 134 insertions(+), 67 deletions(-)
 delete mode 100644 webpack.prod.config.babel.js
 create mode 100644 webpack/editor.umd.babel.js
 create mode 100644 webpack/filter.umd.babel.js
 create mode 100644 webpack/next.umd.babel.js
 create mode 100644 webpack/overlay.umd.babel.js
 create mode 100644 webpack/paginator.umd.babel.js
 create mode 100644 webpack/webpack.umd.babel.js

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 77b5c9f..f202fda 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -72,9 +72,15 @@ function styles() {
     .pipe(gulp.dest(PKG_PATH));
 }
 
-function umd() {
-  return gulp.src('./webpack.prod.config.babel.js')
-    .pipe(shell(['webpack --config <%= file.path %>']));
+function umd(done) {
+  gulp.parallel(
+    () => gulp.src('./webpack/next.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/editor.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/filter.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/overlay.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
+  )();
+  done();
 }
 
 const buildJS = gulp.parallel(umd, scripts);
diff --git a/webpack.prod.config.babel.js b/webpack.prod.config.babel.js
deleted file mode 100644
index 6a69ac0..0000000
--- a/webpack.prod.config.babel.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as path from 'path';
-import webpack from 'webpack';
-
-module.exports = {
-  entry: {
-    'react-bootstrap-table2/dist/react-bootstrap-table2': './packages/react-bootstrap-table2/index.js',
-    'react-bootstrap-table2/dist/react-bootstrap-table2.min': './packages/react-bootstrap-table2/index.js',
-    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor': './packages/react-bootstrap-table2-editor/index.js',
-    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min': './packages/react-bootstrap-table2-editor/index.js',
-    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter': './packages/react-bootstrap-table2-filter/index.js',
-    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min': './packages/react-bootstrap-table2-filter/index.js',
-    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay': './packages/react-bootstrap-table2-overlay/index.js',
-    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min': './packages/react-bootstrap-table2-overlay/index.js',
-    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator': './packages/react-bootstrap-table2-paginator/index.js',
-    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min': './packages/react-bootstrap-table2-paginator/index.js'
-  },
-  devtool: 'source-map',
-  output: {
-    path: path.join(__dirname, 'packages'),
-    filename: '[name].js',
-    library: 'ReactBootstrapTable',
-    libraryTarget: 'umd'
-  },
-  externals: [{
-    'react': {
-      root: 'React',
-      commonjs2: 'react',
-      commonjs: 'react',
-      amd: 'react'
-    }
-  }, {
-    'react-dom': {
-      root: 'ReactDOM',
-      commonjs2: 'react-dom',
-      commonjs: 'react-dom',
-      amd: 'react-dom'
-    }
-  }],
-  module: {
-    rules: [{
-      enforce: 'pre',
-      test: /\.js?$/,
-      exclude: /node_modules/,
-      loader: 'eslint-loader'
-    }, {
-      test: /\.js?$/,
-      use: ['babel-loader'],
-      exclude: /node_modules/
-    }]
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify('production')
-    }),
-    new webpack.SourceMapDevToolPlugin(),
-    new webpack.optimize.DedupePlugin(),
-    new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.optimize.AggressiveMergingPlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      include: /\.min\.js$/,
-      compress: { warnings: false }
-    })
-  ]
-};
diff --git a/webpack/editor.umd.babel.js b/webpack/editor.umd.babel.js
new file mode 100644
index 0000000..c1ad1d6
--- /dev/null
+++ b/webpack/editor.umd.babel.js
@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor': './packages/react-bootstrap-table2-editor/index.js',
+    'react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min': './packages/react-bootstrap-table2-editor/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Editor',
+    libraryTarget: 'umd'
+  }
+};
diff --git a/webpack/filter.umd.babel.js b/webpack/filter.umd.babel.js
new file mode 100644
index 0000000..c69c278
--- /dev/null
+++ b/webpack/filter.umd.babel.js
@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter': './packages/react-bootstrap-table2-filter/index.js',
+    'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min': './packages/react-bootstrap-table2-filter/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Filter',
+    libraryTarget: 'umd'
+  }
+};
diff --git a/webpack/next.umd.babel.js b/webpack/next.umd.babel.js
new file mode 100644
index 0000000..c2071f0
--- /dev/null
+++ b/webpack/next.umd.babel.js
@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2/dist/react-bootstrap-table-next': './packages/react-bootstrap-table2/index.js',
+    'react-bootstrap-table2/dist/react-bootstrap-table-next.min': './packages/react-bootstrap-table2/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2',
+    libraryTarget: 'umd'
+  }
+};
diff --git a/webpack/overlay.umd.babel.js b/webpack/overlay.umd.babel.js
new file mode 100644
index 0000000..ac6d198
--- /dev/null
+++ b/webpack/overlay.umd.babel.js
@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay': './packages/react-bootstrap-table2-overlay/index.js',
+    'react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min': './packages/react-bootstrap-table2-overlay/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Overlay',
+    libraryTarget: 'umd'
+  }
+};
diff --git a/webpack/paginator.umd.babel.js b/webpack/paginator.umd.babel.js
new file mode 100644
index 0000000..1779447
--- /dev/null
+++ b/webpack/paginator.umd.babel.js
@@ -0,0 +1,16 @@
+import * as path from 'path';
+import umdConfig from './webpack.umd.babel';
+
+module.exports = {
+  ...umdConfig,
+  entry: {
+    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator': './packages/react-bootstrap-table2-paginator/index.js',
+    'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min': './packages/react-bootstrap-table2-paginator/index.js'
+  },
+  output: {
+    path: path.join(__dirname, '../packages'),
+    filename: '[name].js',
+    library: 'ReactBootstrapTable2Paginator',
+    libraryTarget: 'umd'
+  }
+};
diff --git a/webpack/webpack.umd.babel.js b/webpack/webpack.umd.babel.js
new file mode 100644
index 0000000..31a6cdc
--- /dev/null
+++ b/webpack/webpack.umd.babel.js
@@ -0,0 +1,45 @@
+import webpack from 'webpack';
+
+module.exports = {
+  devtool: 'source-map',
+  externals: [{
+    'react': {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react'
+    }
+  }, {
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom'
+    }
+  }],
+  module: {
+    rules: [{
+      enforce: 'pre',
+      test: /\.js?$/,
+      exclude: /node_modules/,
+      loader: 'eslint-loader'
+    }, {
+      test: /\.js?$/,
+      use: ['babel-loader'],
+      exclude: /node_modules/
+    }]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.SourceMapDevToolPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.AggressiveMergingPlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      include: /\.min\.js$/,
+      compress: { warnings: false }
+    })
+  ]
+};

From e4b6993692bc1f7f3953f78e0bde8e18d7eae491 Mon Sep 17 00:00:00 2001
From: Allen <ayu780129@hotmail.com>
Date: Sun, 15 Apr 2018 17:29:17 +0800
Subject: [PATCH 12/12] fix #302 (#304)

---
 docs/row-selection.md                         |  6 +++---
 .../examples/row-selection/selection-hooks.js | 19 ++++++++++++++++---
 .../src/row-event-delegater.js                |  2 +-
 .../src/row-selection/selection-cell.js       |  4 ++--
 .../row-selection/selection-header-cell.js    |  4 ++--
 .../src/row-selection/wrapper.js              | 14 ++++++--------
 .../test/row-selection/wrapper.test.js        | 17 +++++------------
 7 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/docs/row-selection.md b/docs/row-selection.md
index b75aa1f..ac7eba7 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -158,12 +158,12 @@ const selectRow = {
 
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
-`row`, `isSelect` and `rowIndex`.
+`row`, `isSelect`, `rowIndex` and `e`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelect: (row, isSelect, rowIndex) => {
+  onSelect: (row, isSelect, rowIndex, e) => {
     // ...
   }
 };
@@ -175,7 +175,7 @@ This callback function will be called when select/unselect all and it only work
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, results) => {
+  onSelectAll: (isSelect, results, e) => {
     // ...
   }
 };
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
index 9b104c0..bc7c298 100644
--- a/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-hooks.js
@@ -22,14 +22,16 @@ const columns = [{
 const selectRow = {
   mode: 'checkbox',
   clickToSelect: true,
-  onSelect: (row, isSelect, rowIndex) => {
+  onSelect: (row, isSelect, rowIndex, e) => {
     console.log(row.id);
     console.log(isSelect);
     console.log(rowIndex);
+    console.log(e);
   },
-  onSelectAll: (isSelect, rows) => {
+  onSelectAll: (isSelect, rows, e) => {
     console.log(isSelect);
     console.log(rows);
+    console.log(e);
   }
 };
 
@@ -49,7 +51,18 @@ const columns = [{
 
 const selectRow = {
   mode: 'checkbox',
-  clickToSelect: true
+  clickToSelect: true,
+  onSelect: (row, isSelect, rowIndex, e) => {
+    console.log(row.id);
+    console.log(isSelect);
+    console.log(rowIndex);
+    console.log(e);
+  },
+  onSelectAll: (isSelect, rows, e) => {
+    console.log(isSelect);
+    console.log(rows);
+    console.log(e);
+  }
 };
 
 <BootstrapTable
diff --git a/packages/react-bootstrap-table2/src/row-event-delegater.js b/packages/react-bootstrap-table2/src/row-event-delegater.js
index a35de46..452d7ae 100644
--- a/packages/react-bootstrap-table2/src/row-event-delegater.js
+++ b/packages/react-bootstrap-table2/src/row-event-delegater.js
@@ -47,7 +47,7 @@ export default ExtendBase =>
           }
           if (selectable) {
             const key = _.get(row, keyField);
-            onRowSelect(key, !selected, rowIndex);
+            onRowSelect(key, !selected, rowIndex, e);
           }
         };
 
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index bba789e..3050cf2 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -28,7 +28,7 @@ export default class SelectionCell extends Component {
     return nextProps.selected !== selected;
   }
 
-  handleClick() {
+  handleClick(e) {
     const {
       mode: inputType,
       rowKey,
@@ -46,7 +46,7 @@ export default class SelectionCell extends Component {
       ? true
       : !selected;
 
-    onRowSelect(rowKey, checked, rowIndex);
+    onRowSelect(rowKey, checked, rowIndex, e);
   }
 
   render() {
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
index a2c6956..0105bf3 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
@@ -44,10 +44,10 @@ export default class SelectionHeaderCell extends Component {
     return nextProps.checkedStatus !== checkedStatus;
   }
 
-  handleCheckBoxClick() {
+  handleCheckBoxClick(e) {
     const { onAllRowsSelect } = this.props;
 
-    onAllRowsSelect();
+    onAllRowsSelect(e);
   }
 
   render() {
diff --git a/packages/react-bootstrap-table2/src/row-selection/wrapper.js b/packages/react-bootstrap-table2/src/row-selection/wrapper.js
index c2880bf..51472dc 100644
--- a/packages/react-bootstrap-table2/src/row-selection/wrapper.js
+++ b/packages/react-bootstrap-table2/src/row-selection/wrapper.js
@@ -41,7 +41,7 @@ export default Base =>
      * @param {String} rowKey - row key of what was selected.
      * @param {Boolean} checked - next checked status of input button.
      */
-    handleRowSelect(rowKey, checked, rowIndex) {
+    handleRowSelect(rowKey, checked, rowIndex, e) {
       const { selectRow: { mode, onSelect }, store } = this.props;
       const { ROW_SELECT_SINGLE } = Const;
 
@@ -59,7 +59,7 @@ export default Base =>
 
       if (onSelect) {
         const row = getRowByRowId(store)(rowKey);
-        onSelect(row, checked, rowIndex);
+        onSelect(row, checked, rowIndex, e);
       }
 
       this.setState(() => ({
@@ -68,18 +68,16 @@ export default Base =>
     }
 
     /**
-     * handle all rows selection on header cell by store.selected or given specific result.
-     * @param {Boolean} option - customized result for all rows selection
+     * handle all rows selection on header cell by store.selected
      */
-    handleAllRowsSelect(option) {
+    handleAllRowsSelect(e) {
       const { store, selectRow: {
         onSelectAll,
         nonSelectable
       } } = this.props;
       const selected = isAnySelectedRow(store)(nonSelectable);
 
-      // set next status of all row selected by store.selected or customizing by user.
-      const result = option || !selected;
+      const result = !selected;
 
       const currSelected = result ?
         selectableKeys(store)(nonSelectable) :
@@ -89,7 +87,7 @@ export default Base =>
       store.selected = currSelected;
 
       if (onSelectAll) {
-        onSelectAll(result, getSelectedRows(store));
+        onSelectAll(result, getSelectedRows(store), e);
       }
 
       this.setState(() => ({
diff --git a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js
index 59dc190..aa397ca 100644
--- a/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js
+++ b/packages/react-bootstrap-table2/test/row-selection/wrapper.test.js
@@ -162,14 +162,6 @@ describe('RowSelectionWrapper', () => {
       wrapper.instance().handleAllRowsSelect();
       expect(wrapper.state('selectedRowKeys')).toEqual([]);
     });
-
-    it('call handleAllRowsSelect function with a bool args should setting correct state.selectedRowKeys', () => {
-      wrapper.instance().handleAllRowsSelect(true);
-      expect(wrapper.state('selectedRowKeys')).toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));
-
-      wrapper.instance().handleAllRowsSelect(false);
-      expect(wrapper.state('selectedRowKeys')).toEqual([]);
-    });
   });
 
   describe('when selectRow.onSelect is defined', () => {
@@ -219,13 +211,14 @@ describe('RowSelectionWrapper', () => {
     });
 
     it('selectRow.onSelect callback should be called correctly when calling handleRowSelect function', () => {
-      wrapper.instance().handleAllRowsSelect();
+      const e = {};
+      wrapper.instance().handleAllRowsSelect(e);
       expect(onSelectAllCallBack.callCount).toEqual(1);
-      expect(onSelectAllCallBack.calledWith(true, data)).toBeTruthy();
+      expect(onSelectAllCallBack.calledWith(true, data, e)).toBeTruthy();
 
-      wrapper.instance().handleAllRowsSelect();
+      wrapper.instance().handleAllRowsSelect(e);
       expect(onSelectAllCallBack.callCount).toEqual(2);
-      expect(onSelectAllCallBack.calledWith(false, [])).toBeTruthy();
+      expect(onSelectAllCallBack.calledWith(false, [], e)).toBeTruthy();
     });
   });
 });