diff --git a/docs/README.md b/docs/README.md
index 2178334..24804d8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -22,6 +22,7 @@
* [rowEvents](#rowEvents)
* [defaultSorted](#defaultSorted)
* [pagination](#pagination)
+* [filter](#filter)
* [onTableChange](#onTableChange)
### keyField(**required**) - [String]
@@ -193,6 +194,33 @@ paginator({
})
```
+### filter - [Object]
+`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
+
+```sh
+$ npm install react-bootstrap-table2-filter --save
+```
+
+After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily:
+
+```js
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+const columns = [ {
+ dataField: 'id',
+ text: 'Production ID'
+}, {
+ dataField: 'name',
+ text: 'Production Name',
+ filter: textFilter() // apply text filter
+}, {
+ dataField: 'price',
+ text: 'Production Price'
+} ];
+
+```
+
### onTableChange - [Function]
This callback function will be called when [`remote`](#remote) enabled only.
diff --git a/docs/columns.md b/docs/columns.md
index 52aaa17..0f13a82 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -31,20 +31,22 @@ Available properties in a column object:
* [validator](#validator)
* [editCellStyle](#editCellStyle)
* [editCellClasses](#editCellClasses)
+* [filter](#filter)
+* [filterValue](#filterValue)
Following is a most simplest and basic usage:
```js
const rows = [ { id: 1, name: '...', price: '102' } ];
const columns = [ {
- dataField: id,
- text: Production ID
+ dataField: 'id',
+ text: 'Production ID'
}, {
- dataField: name,
- text: Production Name
+ dataField: 'name',
+ text: 'Production Name'
}, {
- dataField: price,
- text: Production Price
+ dataField: 'price',
+ text: 'Production Price'
}
];
```
@@ -525,4 +527,24 @@ Or take a callback function
// it is suppose to return a string
}
}
-```
\ No newline at end of file
+```
+
+## column.filter - [Object]
+Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters:
+
+* Text(`textFilter`)
+
+We have a quick example to show you how to use `column.filter`:
+
+```
+import { textFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+{
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}
+```
+
+For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md
new file mode 100644
index 0000000..8cef968
--- /dev/null
+++ b/packages/react-bootstrap-table2-filter/README.md
@@ -0,0 +1,40 @@
+# react-bootstrap-table2-filter
+
+## Filters
+
+* Text (`textFilter`)
+
+You can get all of above filters via import and these filters are a factory function to create a individual filter instance.
+In addition, for some simple customization reasons, these factory function allow to pass some props.
+
+### Text Filter
+
+```js
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+const columns = [
+ ..., {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+
+```
+
+Following we list all the availabe props for `textFilter` function:
+
+```js
+import { Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const customTextFilter = textFilter({
+ placeholder: 'My Custom PlaceHolder', // custom the input placeholder
+ style: { ... }, // your custom styles on input
+ className: 'my-custom-text-filter', // custom classname on input
+ defaultValue: 'test', // default filtering value
+ delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
+ comparator: Comparator.EQ // default is Comparator.LIKE
+});
+```
\ No newline at end of file