From 43444471e235049ecf11d03b6b6cc00bd5b291c2 Mon Sep 17 00:00:00 2001
From: Chun-MingChen <nick830314@gmail.com>
Date: Thu, 5 Apr 2018 15:05:36 +0800
Subject: [PATCH] details for props of select filter

---
 docs/filter-props.md | 74 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 65 insertions(+), 9 deletions(-)

diff --git a/docs/filter-props.md b/docs/filter-props.md
index 57bedc4..1d92f66 100644
--- a/docs/filter-props.md
+++ b/docs/filter-props.md
@@ -2,7 +2,7 @@
 id: filter-props
 title: Column Filter Props
 ---
-`react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props).
+`react-bootstrap-table2` separate the filter core code base to [react-bootstrap-table2-filter](https://www.npmjs.com/package/react-bootstrap-table2-filter). The following are guideline about how to use and the details of props of [filterFactory](#filterfactory-props) and [filters](#filters-props). For more information, please take refer to the samples as [link](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) here.
 
 ## Content Table
 
@@ -10,8 +10,8 @@ title: Column Filter Props
 * [FilterFactory Props](#filterfactory-props)
 * [Filters](#filters-props)
    * [textFilter](#1-textfilter)
-   * [numberFilter](#2-numberFilter)
-   * [selectFilter](#3-selectFilter)
+   * [selectFilter](#2-selectFilter)
+   * [numberFilter](#3-numberFilter)
 * [Comparator](#comparator)
 
 ## How to use
@@ -19,12 +19,12 @@ You should apply following **2** to enable `filter` functionality for `react-boo
 * `filterFactory`
 * `filters` (**3** types support)
    * textFilter
-   * numberFilter
    * selectFilter
+   * numberFilter
 
 ```js
 import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
   dataField: 'id',
@@ -35,7 +35,7 @@ const columns = [{
 }, {
   dataField: 'price',
   text: 'Product Price',
-  filter: numberFilter()
+  filter: textFilter()
 }];
 
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
@@ -74,7 +74,7 @@ const columns = [{
 ### textFilter.getFilter - [Function]
 * export `filter` function to allow users to access. For textFilter, `filter(value)` to filter columns dynamically.
 
-**Examples**
+**Example**
 ```js
 import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
@@ -107,5 +107,61 @@ const columns = [{
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 ```
 
-### (2). numberFilter
-### (3). selectFilter
+## (2). selectFilter
+**Required**:
+
+### selectFilter.options - [Object]
+* (Required) the options for the list of drop down.
+
+**Optional**:
+
+### selectFilter.className - [String]
+* custom class name on input
+
+### selectFilter.withoutEmptyOption - [Boolean]
+* When it was set to `true`, the drop down list would hide the default selection.
+### selectFilter.defaultValue - [String]
+* default filtering value
+
+### selectFilter.comparator - [Comparator]
+* What kind of comparator to compare. Default is `Comparator.EQ`
+
+### selectFilter.style - [Object]
+* your custom inline styles on `input`
+
+### selectFilter.getFilter - [Function]
+* export `filter` function to allow users to access. For selectFilter, `filter(value)` to filter columns dynamically.
+
+**Example**
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [
+  { ... }, { ... }, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    className: 'test-classname',
+    withoutEmptyOption: true,
+    defaultValue: 2,
+    comparator: Comparator.LIKE, // default is Comparator.EQ
+    style: { backgroundColor: 'pink' },
+    getFilter: (filter) => { // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+## (3). numberFilter