diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
new file mode 100644
index 0000000..319dd27
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js
@@ -0,0 +1,66 @@
+/* eslint no-console: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table2';
+import fitlerFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ delay: 1000, // default is 500ms
+ style: {
+ backgroundColor: 'yellow'
+ },
+ className: 'test-classname',
+ placeholder: 'Custom PlaceHolder',
+ onClick: e => console.log(e)
+ })
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ delay: 1000, // default is 500ms
+ style: {
+ backgroundColor: 'yellow'
+ },
+ className: 'test-classname',
+ placeholder: 'Custom PlaceHolder',
+ onClick: e => console.log(e)
+ })
+}];
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
new file mode 100644
index 0000000..824ee2c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-default-value.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table2';
+import fitlerFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ defaultValue: '2103'
+ })
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ defaultValue: '2103'
+ })
+}];
+
+
+`;
+
+export default () => (
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
new file mode 100644
index 0000000..7c2740a
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table2';
+import fitlerFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter({
+ comparator: Comparator.EQ // default is Comparator.LIKE
+ })
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const sourceCode = `\
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter({
+ comparator: Comparator.EQ
+ })
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+
+`;
+
+export default () => (
+
+
Product Name filter apply Equal Comparator
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 5f4eb33..b2f0f15 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -34,6 +34,9 @@ import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
// column filter
import TextFilter from 'examples/column-filter/text-filter';
+import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value';
+import TextFilterComparator from 'examples/column-filter/text-filter-eq-comparator';
+import CustomTextFilter from 'examples/column-filter/custom-text-filter';
import CustomFilterValue from 'examples/column-filter/custom-filter-value';
// work on rows
@@ -127,6 +130,9 @@ storiesOf('Work on Header Columns', module)
storiesOf('Column Filter', module)
.add('Text Filter', () => )
+ .add('Text Filter with Default Value', () => )
+ .add('Text Filter with Comparator', () => )
+ .add('Custom Text Filter', () => )
// add another filter type example right here.
.add('Custom Filter Value', () => );