From 6eaffe19933f852eca3136aec572933c2bcacc62 Mon Sep 17 00:00:00 2001
From: AllenFang <ayu780129@hotmail.com>
Date: Sat, 23 Jun 2018 15:10:37 +0800
Subject: [PATCH] patch docs for table search

---
 docs/README.md                                | 41 +++++++++++
 docs/migration.md                             | 24 ++++++-
 .../react-bootstrap-table2-toolkit/README.md  | 71 +++++++++++++++++++
 3 files changed, 135 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-bootstrap-table2-toolkit/README.md

diff --git a/docs/README.md b/docs/README.md
index 14782fe..6112dcd 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -28,6 +28,7 @@
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
 * [filter](#filter)
+* [search](#search)
 * [onTableChange](#onTableChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
@@ -260,6 +261,46 @@ const columns = [ {
 <BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
 ```
 
+### <a name='search'>search - [Object]</a>
+Enable the search functionality.
+
+`search` allow user to searhc all the table data. However, search functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-toolkit` firstly.
+
+```sh
+$ npm install react-bootstrap-table2-toolkit --save
+```
+
+After installation of `react-bootstrap-table2-toolkit`, you can render search field easily:
+
+```js
+import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, searchFactory } = Search;
+//...
+
+<ToolkitContext.Provider>
+  <ToolkitContext.Consumer>
+    {
+      props => (
+        <div>
+          <h3>Input something at below input field:</h3>
+          <SearchBar { ...props.searchProps } />
+          <hr />
+          <BootstrapTable
+            keyField="id"
+            data={ products }
+            columns={ columns }
+            search={ searchFactory({
+              ...props.searchProps
+            }) }
+          />
+        </div>
+      )
+    }
+  </ToolkitContext.Consumer>
+</ToolkitContext.Provider>
+```
+
 ### <a name='onTableChange'>onTableChange - [Function]</a>
 This callback function will be called when [`remote`](#remote) enabled only.
 
diff --git a/docs/migration.md b/docs/migration.md
index 32d137d..c369afd 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -113,6 +113,28 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
 
 No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
 
+## Table Search
+the usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
+
+- [x] Custom search component and position
+- [x] Custom search value
+- [ ] Clear search
+- [ ] Multiple search
+- [ ] Strict search
+
 ## Remote
 
-> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
\ No newline at end of file
+> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
+
+
+## Row insert/Delete
+Not support yet
+
+## Expand row
+Not support yet
+
+## Keyboard Navigation
+Not support yet
+
+## Export CSV
+Not support yet
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
new file mode 100644
index 0000000..f7dc601
--- /dev/null
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -0,0 +1,71 @@
+# react-bootstrap-table2-toolkit
+
+`react-bootstrap-table2` support some additional features in [`react-bootstrap-table2-toolkit`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-toolkit).
+
+In the future, this toolkit will support other feature like row delete, insert and export csv etc. Right now we only support Table Search.   
+
+**[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
+
+**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)**
+
+-----
+
+## Install
+
+```sh
+$ npm install react-bootstrap-table2-toolkit --save
+```
+
+## Table Search
+
+```js
+import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, searchFactory } = Search;
+//...
+
+<ToolkitContext.Provider>
+  <ToolkitContext.Consumer>
+    {
+      props => (
+        <div>
+          <h3>Input something at below input field:</h3>
+          <SearchBar { ...props.searchProps } />
+          <hr />
+          <BootstrapTable
+            keyField="id"
+            data={ products }
+            columns={ columns }
+            search={ searchFactory({
+              ...props.searchProps
+            }) }
+          />
+        </div>
+      )
+    }
+  </ToolkitContext.Consumer>
+</ToolkitContext.Provider>
+```
+
+1. You need to enable the search functionality via `search` prop on `BootstrapTable` and pass the result of calling `searchFactory` with custom option and default `searchProps` provided by `ToolkitContext.Provider`
+
+2. `ToolkitContext` is a react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitContext.Consumer`
+
+3. You should render `SearchBar` with `searchProps` as well.
+
+### Options
+
+# searchFormatted - [bool]
+If you want to search on the formatted data, you are supposed to enable it. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
+
+```js
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ searchFactory({
+    ...props.searchProps,
+    searchFormatted: true
+  }) }
+/>
+```
\ No newline at end of file