docs for column filter

Author: AllenFang

docs/README.md

@@ -22,6 +22,7 @@
 * [rowEvents](#rowEvents)
 * [defaultSorted](#defaultSorted)
 * [pagination](#pagination)
+* [filter](#filter)
 * [onTableChange](#onTableChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
@@ -193,6 +194,33 @@ paginator({
 })
 ```
 
+### <a name='filter'>filter - [Object]</a>
+`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'
+} ];
+<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
+```
+
 ### <a name='onTableChange'>onTableChange - [Function]</a>
 This callback function will be called when [`remote`](#remote) enabled only.
 

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
   }
 }
-```
+```
+
+## <a name='filter'>column.filter - [Object]</a>
+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.

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()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+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
+});
+```