Publish

- react-bootstrap-table2-example@1.0.16
 - react-bootstrap-table2-filter@1.1.3
 - react-bootstrap-table2-paginator@2.0.2
 - react-bootstrap-table2-toolkit@1.2.1
 - react-bootstrap-table-next@2.1.1

.gitignore

@@ -15,3 +15,10 @@ lerna-debug.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# gh-pages
+storybook-static
+
+# build
+lib
+dist

.npmignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+*~
+*.sublime-project
+*.sublime-workspace
+*.idea
+*.iml

.travis.yml

@@ -9,9 +9,10 @@ cache:
 
 branches:
   only:
-  # skip master branch when it's under development phase
-  # - master 
+  - master
   - develop
+  except:
+  - gh-pages-src
 
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s

CONTRIBUTING.md

@@ -12,6 +12,7 @@ Additionally, asking questions and requesting new features are welcomed via [iss
 # Pull Requests
 Check [here](./docs/development.md) for getting started with development.
 
+* PR base is `develop` branch
 * We recommend filing an [issue](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues) before you implement any new features.
 * Please ensure that all the test suites have passed before submitting a PR. Besides, always test the actual business logic.
 * If your PR is trying to fix a bug, please describe the details as much as you could and tag the bug number with hashtag.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 react-bootstrap-table2
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,25 +1,52 @@
 # react-bootstrap-table2
-Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
-## The problems/features I want to solve
-* Performance
-* Fully compatiable with bootstrap 3 and 4(`react-bootstrap-table@4.0.0` already done) 
-* Clean Code and Testing
-* Decrease the size of bundled file
-* **Split module/functionality from core module, make core module more lightweight**
-* Use [`storybook`](https://github.com/storybooks/storybook) to build examples
-* Support the aggregation(summary) view
-* Support the table footer
-* Support column/row span on header and body
-* Support sticky header
-* Support table section([react-bootstrap-table#721](https://github.com/AllenFang/react-bootstrap-table/pull/721))
-* Handle events well
-* Fix unalign issues
-* Make **stateless** table more easy to use(`react-bootstrap-table` alread have `remote` mode but have some bugs)
-* Customizable table
-* Support the nested data([react-bootstrap-table#50](https://github.com/AllenFang/react-bootstrap-table/issues/50◊))
-* Consider to support column resize
-* Consider to make animation on `react-bootstrap-table2` more easy
+[![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)  
+Rebuilt of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
-## The feature may lost on react-bootstrap-table
-* Have a great chance that I don't support the vertical scrollbar on table
+> Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
+
+`react-bootstrap-table2` separates some functionalities from its core modules to other modules as listed in the following:
+
+- [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+- [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+- [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+- [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+- [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+- [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+
+Not only does this reduce the bundle size of your apps but also helps us have a cleaner design to avoid handling too much logic in the kernel module(SRP).
+
+## Migration
+
+If you are coming from the legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please check out the [migration guide](./docs/migration.md).
+
+## Usage
+
+See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
+
+## Online Demo
+
+See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
+
+## Development
+
+Please check the [development guide](./docs/development.md).
+
+## Running storybook example on your local machine
+
+```sh
+# Clone the repo
+$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+
+# change dir to the cloned repo
+$ cd react-bootstrap-table2
+
+# Install all dependencies with yarn
+$ yarn install
+
+# Start the stroybook server, then go to localhost:6006
+$ yarn storybook
+
+```
+
+**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

docs/README.md

@@ -9,18 +9,27 @@
 
 #### Optional
 * [remote](#remote)
+* [bootstrap4](#bootstrap4)
 * [loading](#loading)
 * [caption](#caption)
 * [striped](#striped)
 * [bordered](#bordered)
 * [hover](#hover)
 * [condensed](#condensed)
+* [id](#id)
+* [tabIndexCell](#tabIndexCell)
+* [classes](#classes)
+* [wrapperClasses](#wrapperClasses)
+* [headerClasses](#headerClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
+* [expandRow](#expandRow)
 * [rowStyle](#rowStyle)
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
+* [hiddenRows](#hiddenRows)
 * [defaultSorted](#defaultSorted)
+* [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
 * [filter](#filter)
 * [onTableChange](#onTableChange)
@@ -40,7 +49,13 @@ This is a chance that you can connect to your remote server or database to manip
 For flexibility reason, you can control what functionality should be handled on remote via a object return:
 
 ```js
-remote={ { filter: true } }
+remote={ {
+  filter: true,
+  pagination: true,
+  filter: true,
+  sort: true,
+  cellEdit: true
+} }
 ```
 
 In above case, only column filter will be handled on remote.
@@ -53,20 +68,23 @@ A special case for remote pagination:
 remote={ { pagination: true, filter: false, sort: false } }
 ```
 
-In pagination case, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(`filter`, `sort` etc) as remote mode, because `react-bootstrap-table` only know the data of current page, but filtering, searching or sort need to work on overall datas.
+There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
+
+### <a name='bootstrap4'>bootstrap4 - [Bool]</a>
+`true` to indicate your bootstrap version is 4. Default version is 3.
 
 ### <a name='loading'>loading - [Bool]</a>
 Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
-When `loading` is `true`, `react-bootstrap-table` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table` will ignore the overlay rendering.
+When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
 
 ### <a name='overlay'>overlay - [Function]</a>
-`overlay` accept a factory funtion which should returning a higher order component. By default, `react-bootstrap-table-overlay` can be a good option for you:
+`overlay` accept a factory function which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
 
 ```sh
-$ npm install react-bootstrap-table-overlay
+$ npm install react-bootstrap-table2-overlay
 ```
 ```js
-import overlayFactory from 'react-bootstrap-table-overlay';
+import overlayFactory from 'react-bootstrap-table2-overlay';
 
 <BootstrapTable
   data={ data }
@@ -94,12 +112,30 @@ Same as bootstrap `.table-hover` class for adding mouse hover effect (grey backg
 ### <a name='condensed'>condensed - [Bool]</a>
 Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
 
+### <a name='id'>id - [String]</a>
+Customize id on `table` element.
+
+### <a name='tabIndexCell'>tabIndexCell - [Bool]</a>
+Enable the `tabIndex` attribute on `<td>` element.
+
+### <a name='classes'>classes - [String]</a>
+Customize class on `table` element.
+
+### <a name='wrapperClasses'>wrapperClasses - [String]</a>
+Customize class on the outer element which wrap up the `table` element. 
+
+### <a name='headerClasses'>headerClasses - [String]</a>
+Customize class on the header row(`tr`). 
+
 ### <a name='cellEdit'>cellEdit - [Object]</a>
 Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 
 ### <a name='selectRow'>selectRow - [Object]</a>
 Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail.
 
+### <a name='expandRow'>expandRow - [Object]</a>
+Makes table rows expandable, please see [expandRow definition](./row-expand.md) for more detail.
+
 ### <a name='rowStyle'>rowStyle = [Object | Function]</a>
 Custom the style of table rows:
 
@@ -139,13 +175,21 @@ Custom the events on row:
 
 ```js
 const rowEvents = {
-  onClick: (e) => {
+  onClick: (e, row, rowIndex) => {
     ....
   }
 };
 <BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
 ```
 
+### <a name='hiddenRows'>hiddenRows - [Array]</a>
+Hide rows, this props accept an array of row keys:
+
+```js
+const hiddenRows = [1, 4];
+<BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
+```
+
 ### <a name='defaultSorted'>defaultSorted - [Array]</a>
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.
 
@@ -156,8 +200,11 @@ const defaultSorted = [{
 }];
 ```
 
+### <a name='defaultSortDirection'>defaultSortDirection - [String]</a>
+Default sort direction when user click on header column at first time, available value is `asc` and `desc`. Default is `desc`.
+
 ### <a name='pagination'>pagination - [Object]</a>
-`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly.
+`pagination` allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionally.
 
 ```sh
 $ npm install react-bootstrap-table2-paginator --save
@@ -182,6 +229,7 @@ paginator({
   totalSize, // Total data size. It's necessary when remote is enabled
   pageStartIndex: 0, // first page will be 0, default is 1
   paginationSize: 3,  // the pagination bar size, default is 5
+  showTotal: true, // display pagination information
   sizePerPageList: [ {
     text: '5', value: 5
   }, {
@@ -199,15 +247,16 @@ paginator({
   prePageTitle: 'Go to previous', // the title of previous page button
   firstPageTitle: 'Go to first', // the title of first page button
   lastPageTitle: 'Go to last', // the title of last page button
-  hideSizePerPage: true, // hide the size per page dorpdown
+  hideSizePerPage: true, // hide the size per page dropdown
   hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
   onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
   onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
+  paginationTotalRenderer: (from, to, size) => { ... }  // custom the pagination total
 })
 ```
 
 ### <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.
+`filter` allow user to filter data by column. However, filter functionality 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
@@ -249,13 +298,23 @@ There's only two arguments will be passed to `onTableChange`: `type` and `newSta
 
 * `filter`
 * `pagination`
+* `sort`
+* `cellEdit`
 
 Following is a shape of `newState`
 
 ```js
 {
   page,  // newest page
-  sizePerPage,  //newest sizePerPage
-  filters // an object which have current filter status per column
+  sizePerPage,  // newest sizePerPage
+  sortField,  // newest sort field
+  sortOrder,  // newest sort order
+  filters, // an object which have current filter status per column
+  data, // when you enable remote sort, you may need to base on data to sort if data is filtered/searched
+  cellEdit: {  // You can only see this prop when type is cellEdit
+    rowId,
+    dataField,
+    newValue
+  }
 }
 ```

docs/cell-edit.md

@@ -1,12 +1,18 @@
+# Cell Editing
+Before start to use cell edit, please remember to install `react-bootstrap-table2-editor`
+
+```sh
+$ npm install react-bootstrap-table2-editor --save
+```
+
 # Properties on cellEdit prop
 * [mode (**required**)](#mode)
 * [blurToSave](#blurToSave)
 * [nonEditableRows](#nonEditableRows)
 * [timeToCloseMessage](#timeToCloseMessage)
+* [autoSelectText](#autoSelectText)
 * [beforeSaveCell](#beforeSaveCell)
 * [afterSaveCell](#afterSaveCell)
-* [onUpdate](#onUpdate)
-* [editing](#editing)
 * [errorMessage](#errorMessage)
 * [onErrorMessageDisappear](#onErrorMessageDisappear)
 
@@ -21,9 +27,7 @@ Following is the shape of `cellEdit` object:
   mode: 'click',
   blurToSave: true,
   timeToCloseMessage: 2500,
-  editing: false|true,
   errorMessage: '',
-  onUpdate: (rowId, dataField, newValue) => { ... },
   beforeSaveCell: (oldValue, newValue, row, column) => { ... },
   afterSaveCell: (oldValue, newValue, row, column) => { ... },
   onErrorMessageDisappear: () => { ... },
@@ -40,6 +44,11 @@ Default is `false`, enable it will be able to save the cell automatically when b
 ### <a name='nonEditableRows'>cellEdit.nonEditableRows - [Function]</a>
 `cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`)
 
+### <a name='autoSelectText'>cellEdit.autoSelectText - [Bool]</a>
+Default is false, when enable it, `react-bootstrap-table2` will help you to select the text in the text input automatically when editing.
+
+> NOTE: This props only work for `text` and `textarea`.
+
 ### <a name='timeToCloseMessage'>cellEdit.timeToCloseMessage - [Function]</a>
 If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
 
@@ -53,6 +62,24 @@ const cellEdit = {
 }
 ```
 
+If you want to perform a async `beforeSaveCell`, you can do it like that:
+
+```js
+const cellEdit: {
+  // omit...
+  beforeSaveCell(oldValue, newValue, row, column, done) {
+    setTimeout(() => {
+      if (confirm('Do you want to accep this change?')) {
+        done(); // contine to save the changes
+      } else {
+        done(false); // reject the changes
+      }
+    }, 0);
+    return { async: true };
+  }
+};
+```
+
 ### <a name='afterSaveCell'>cellEdit.afterSaveCell - [Function]</a>
 This callback function will be called after updating cell.
 
@@ -63,74 +90,9 @@ const cellEdit = {
 };
 ```
 
-### <a name='onUpdate'>cellEdit.onUpdate - [Function]</a>
-If you want to control the cell updating process by yourself, for example, connect with `Redux` or saving data to backend database, `cellEdit.onUpdate` is a great chance you can work on it.   
-
-Firsylt, `react-bootstrap-table2` allow `cellEdit.onUpdate` to return a promise:
-
-```js
-const cellEdit = {
-  // omit...
-  onUpdate: (rowId, dataField, newValue) => {
-    return apiCall().then(response => {
-      console.log('update cell to backend successfully');
-      // Actually, you dont do any thing here, we will update the new value when resolve your promise
-    })
-    .catch(err => throw new Error(err.message));
-  }
-};
-```
-
-If your promise is resolved successfully, `react-bootstrap-table2` will default help you to update the new cell value.   
-If your promise is resolved failure, you can throw an `Error` instance, `react-bootstrap-table2` will show up the error message (Same behavior like [`column.validator`](./columns.md#validator)).   
-
-In some case, backend will return a new value to client side and you want to apply this new value instead of the value that user input. In this situation, you can return an object which contain a `value` property:
-
-```js
-const cellEdit = {
-  // omit...
-  onUpdate: (rowId, dataField, newValue) => {
-    return apiCall().then(response => {
-      return { value: response.value };  // response.value is from your backend api
-    })
-    .catch(err => throw new Error(err.message));
-  }
-};
-```
-
-If your application integgrate with `Redux`, you may need to dispatch an action in `cellEdit.onUpdate` callback. In this circumstances, you need to return `false` explicity which `react-bootstrap-table2` will stop any operation internally and wait rerender by your application.
-
-In a simple redux application, you probably need to handle those props by your application:
-
-* [`cellEdit.editing`](#editing): Is cell still on editing or not? This value should always be `true` when saving cell failure.
-* [`cellEdit.errorMessage`](#errorMessage): Error message when save the cell failure.
-* [`cellEdit.onErrorMessageDisappear`](#onErrorMessageDisappear): This callback will be called when error message alert closed automatically.
-* `cellEdit.onUpdate`
-
-```js
-const cellEdit = {
-  editing: this.props.editing,
-  errorMessage: this.props.errorMessage,
-  onErrorMessageDisappear: () => {
-    // cleanErrorMessage is an action creator
-    this.props.dispatch(cleanErrorMessage());
-  },
-  onUpdate: (rowId, dataField, newValue) => {
-    // updateCell is an action creator
-    this.props.dispatch(updateCell(rowId, dataField, newValue)));
-    return false;  // Have to return false here
-  }
-};
-```
-
-Please check [this](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/develop/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js) exmaple to learn how use `cellEdit` with a redux application
-
-### <a name='editing'>cellEdit.editing - [Bool]</a>
-This only used when you want to control cell saving externally, `cellEdit.editing` will be a flag to tell `react-bootstrap-table2` whether currecnt editing cell is still editing or not. Because, it's possible that some error happen when you saving cell, in this situation, you need to configre this value as `false` to keep the cell as edtiable and show up an error message.
-
 ### <a name='errorMessage'>cellEdit.errorMessage - [String]</a>
-Same as [`cellEdit.editing`](#editing). This prop is not often used. Only used when you keep the error message in your application state.
+This prop is not often used. Only used when you want to keep the error message in your application state and also handle the cell editing on remote mode.
 
 ### <a name='onErrorMessageDisappear'>cellEdit.onErrorMessageDisappear - [Function]</a>
-This callback function will be called when error message discard.
+This callback function will be called when error message discard so that you can sync the newest error message to your state if you have.
 

docs/columns.md

@@ -7,11 +7,14 @@ Available properties in a column object:
 * [text (**required**)](#text)
 
 #### Optional
+* [isDummyField](#isDummyField)
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
+* [sortCaret](#sortCaret)
+* [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
 * [title](#title)
@@ -27,12 +30,28 @@ Available properties in a column object:
 * [headerAttrs](#headerAttrs)
 * [headerSortingClasses](#headerSortingClasses)
 * [headerSortingStyle](#headerSortingStyle)
+* [footer](#footer)
+* [footerFormatter](#footerFormatter)
+* [footerClasses](#footerClasses)
+* [footerStyle](#footerStyle)
+* [footerTitle](#footerTitle)
+* [footerEvents](#footerEvents)
+* [footerAlign](#footerAlign)
+* [footerAttrs](#footerAttrs)
 * [editable](#editable)
 * [validator](#validator)
 * [editCellStyle](#editCellStyle)
 * [editCellClasses](#editCellClasses)
+* [editorStyle](#editorStyle)
+* [editorClasses](#editorClasses)
+* [editor](#editor)
+* [editorRenderer](#editorRenderer)
 * [filter](#filter)
 * [filterValue](#filterValue)
+* [csvType](#csvType)
+* [csvFormatter](#csvFormatter)
+* [csvText](#csvText)
+* [csvExport](#csvExport)
 
 Following is a most simplest and basic usage:
 
@@ -73,7 +92,12 @@ dataField: 'address.city'
 ```
 
 ## <a name='text'>column.text (**required**) - [String]</a>
-`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
+`text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
+
+## <a name='isDummyField'>column.isDummyField - [Bool]</a>
+Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use `isDummyField`. If column is dummy, the [`column.dataField`](#dataField) can be any string value, cause of it's meaningless.
+
+There's only one different for dummy column than normal column, which is dummy column will compare the whole row value instead of cell value when call `shouldComponentUpdate`.
 
 ## <a name='hidden'>column.hidden - [Bool]</a>
 `hidden` allow you to hide column when `true` given.
@@ -86,12 +110,16 @@ dataField: 'address.city'
 * `rowIndex`
 * [`formatExtraData`](#formatExtraData)
 
+> Attention:
+> Don't use any state data or any external data in formatter function, please pass them via [`formatExtraData`](#formatExtraData).
+> In addition, please make formatter function as pure function as possible as you can.
+
 ## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
 `headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
 
-* `column`: column object itself
-* `colIndex`
-* `components`: it's an object which contain all of other react element, like sort caret or filter etc.
+* `column`: current column object itself
+* `colIndex`: index of current column
+* `components`: an object which contain all of other react element, like sort caret or filter etc.
 
 The third argument: `components` have following specified properties:
 ```js
@@ -108,22 +136,49 @@ It's only used for [`column.formatter`](#formatter), you can define any value fo
 Enable the column sort via a `true` value given.
 
 ## <a name='sortFunc'>column.sortFunc - [Function]</a>
-`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept four arguments:
+`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
 
 ```js
 {
   // omit...
   sort: true,
-  sortFunc: (a, b, order, dataField) => {
-    if (order === 'asc') return a - b;
-    else return b - a;
+  sortFunc: (valueA, valueB, order, dataField, rowA, rowB) => {
+    if (order === 'asc') return valueA - valueB;
+    else return valueB - valueA;
   }
 }
 ```
 > The possible value of `order` argument is **`asc`** and **`desc`**.
 
+## <a name='sortFunc'>column.onSort - [Function]</a>
+`column.onSort` is an event listener for sort change event:
+
+```js
+{
+  // omit...
+  sort: true,
+  onSort: (field, order) => {
+    // ....
+  }
+}
+```
+
+## <a name='sortCaret'>column.sortCaret - [Function]</a>
+Use`column.sortCaret` to custom the sort caret. This callback function accept two arguments: `order` and `column`
+
+```js
+{
+  // omit...
+  sort: true,
+  sortCaret: (order, column) => {
+    return //...
+  }
+}
+```
+> The possible value of `order` argument is **`asc`**, **`desc`** and **`undefined`**.
+
 ## <a name='classes'>column.classes - [String | Function]</a>
-It's availabe to have custom class on table column:
+It's available to have custom class on table column:
 
 ```js
 {
@@ -131,7 +186,7 @@ It's availabe to have custom class on table column:
   classes: 'id-custom-cell'
 }
 ```
-In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take `4` arguments and a `string` is expect to return: 
+In addition, `classes` also accept a callback function which have more power to custom the css class on each columns. This callback function take **4** arguments and a `String` is expected to return:: 
 
 
 ```js
@@ -148,10 +203,10 @@ In addition, `classes` also accept a callback function which have more power to
 
 **Return value**
 
-A new `String` will be the result of element class.
+A new `String` will be the result as element class.
 
 ## <a name='headerClasses'>column.headerClasses - [String | Function]</a>
-It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
+It's similar to [`column.classes`](#classes), `headerClasses` is available to have customized class on table header column:
 
 ```js
 {
@@ -176,7 +231,7 @@ Furthermore, it also accept a callback function which takes 2 arguments and a `S
 A new `String` will be the result of element headerClasses.
 
 ## <a name='style'>column.style - [Object | Function]</a>
-It's availabe to have custom style on table column:
+It's available to have custom style on table column:
 
 ```js
 {
@@ -185,7 +240,7 @@ It's availabe to have custom style on table column:
 }
 ```
 
-In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes `4` arguments and an `Object` is expect to return: 
+In addition, similar to [`column.classes`](#classes), `style` also accept a callback function which have more power to customize the `inline style` on each columns. This callback function takes **4** arguments and an `Object` is expect to return: 
 
 
 ```js
@@ -206,7 +261,7 @@ A new `Object` will be the result of element style.
 
 
 ## <a name='headerStyle'>column.headerStyle - [Object | Function]</a>
-It's availabe to have customized inline-style on table header column:
+It's available to have customized inline-style on table header column:
 
 ```js
 {
@@ -215,7 +270,7 @@ It's availabe to have customized inline-style on table header column:
 }
 ```
 
-Moreover, it also accept a callback function which takes 2 arguments and an `Object` is expect to return:
+Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
 
 ```js
 {
@@ -233,7 +288,7 @@ A new `Object` will be the result of element headerStyle.
 
 
 ## <a name='title'>column.title - [Bool | Function]</a>
-`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column and take `cell content` as default value. Additionally, you could customize title via a callback. It takes `4` arguments and a `String` is expect to return: 
+`react-bootstrap-table2` is disable [`HTML title`](https://www.w3schools.com/tags/tag_title.asp) as default. You can assign `title` as `true` to enable the HTML title on table column and take `cell content` as default value. Additionally, you could customize title via a callback. It takes **4** arguments and a `String` is expect to return: 
 
 
 ```js
@@ -255,7 +310,7 @@ A new `Object` will be the result of element headerStyle.
 A new `String` will be the result of element title.
 
 ## <a name='headerTitle'>column.headerTitle - [Bool | Function]</a>
-`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
+Configure the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
 
 ```js
 {
@@ -264,7 +319,7 @@ A new `String` will be the result of element title.
 }
 ```
 
-It's also availabe to custom via a callback function:
+It's also available to custom via a callback function:
 ```js
 {
   headerTitle: function callback(column, colIndex) { ... }
@@ -282,7 +337,7 @@ A new `String` will be the result of element headerTitle.
 ## <a name='align'>column.align - [String | Function]</a>
 You can configure the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) for table column by `align` property. 
 
-Besides, `align` also accept a callback function for dynamically setting text align. It takes `4` arguments and a `String` is expect to return: 
+Besides, `align` also accept a callback function for dynamically setting text align. It takes **4** arguments and a `String` is expect to return: 
 
 ```js
 {
@@ -332,17 +387,27 @@ A new `String` will be the result of element headerAlign.
 
 
 ## <a name='events'>column.events - [Object]</a>
-You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
+You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via `events` property.   
+
+`react-bootstrap-table2` currently only support following events which will receive some specific information:
+
+* onClick
+* onDoubleClick
+* onMouseEnter
+* onMouseLeave
+* onContextMenu
 
 ```js
 {
   // omit...
   events: {
-    onClick: e => { ... }
+    onClick: (e, column, columnIndex, row, rowIndex) => { ... },
   }
 }
 ```
 
+If the events is not listed above, the callback function will only pass the `event` object.
+
 ## <a name='headerEvents'>column.headerEvents - [Object]</a>
 `headerEvents` same as [`column.events`](#events) but this is for header column.
 
@@ -385,20 +450,20 @@ Not only `Object`, `callback function` is also acceptable. It takes `4` argument
 
 A new `Object` will be the result of element HTML attributes.
 
-#### * Caution
+> Caution:   
 
-If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priorty and it will be overwrited.
+> If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.align` was given at the same time, property `attrs` has lower priority and it will be overwritten.
 
 ```js
 {
   // omit...
-  title: true, // it will be chosen.
+  title: true, // get higher priority
   attrs: { title: 'test' }
 }
 ```
 
 ## <a name='headerAttrs'>column.headerAttrs - [Object | Function]</a>
-`headerAttrs` is similiar to [`column.attrs`](#attrs) but it works for header column. 
+`headerAttrs` is similar to [`column.attrs`](#attrs) but it works for header column. 
 ```js
 {
   // omit...
@@ -409,7 +474,7 @@ If `column.classes`, `column.style`, `column.title`, `column.hidden` or `column.
 }
 ```
 
-Additionally, customize the header attributes by a `2-arguments` callback function:
+Additionally, customize the header attributes by a **2** arguments callback function:
 
 ```js
 {
@@ -430,7 +495,7 @@ A new `Object` will be the result of element headerAttrs.
 
 > Caution:   
 > Same as [column.attrs](#attrs), it has lower priority and will be
-> overwrited when other props related to HTML attributes were given.
+> overwritten when other props related to HTML attributes were given.
 
 ### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
 
@@ -453,7 +518,7 @@ const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { .
 
 ### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
 
-It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
+It's similar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
 
 ```js
 const sortingHeaderStyle = {
@@ -461,6 +526,162 @@ const sortingHeaderStyle = {
 };
 ```
 
+### <a name='footer'>footer - [String | Function]</a>
+Give a string to render the string value on the footer column.
+
+```js
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerAlign: 'center',
+  footer: 'Footer 1'
+}, .....];
+```
+
+This prop also accept a function:
+
+```js
+{
+  dataField: 'price',
+  text: 'Product Price',
+  footer: column => column.reduce((acc, item) => acc + item, 0)
+}
+```
+
+## <a name='footerFormatter'>column.footerFormatter - [Function]</a>
+`footerFormatter` allow you to customize the table footer column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+
+* `column`
+* `columnIndex`
+
+## <a name='footerClasses'>column.footerClasses - [String | Function]</a>
+It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
+
+```js
+{
+  // omit...
+  footerClasses: 'id-custom-cell'
+}
+```
+Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
+
+```js
+{
+  footerClasses: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerStyle'>column.footerStyle - [Object | Function]</a>
+Customized the inline-style on table footer column:
+
+```js
+{
+  // omit...
+  footerStyle: { backgroundColor: 'green' }
+}
+```
+
+Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
+
+```js
+{
+  footerStyle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerTitle'>column.footerTitle - [Bool | Function]</a>
+Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#title), 
+
+```js
+{
+  // omit...
+  footerTitle: true
+}
+```
+
+It's also available to custom via a callback function:
+```js
+{
+  footerTitle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerEvents'>column.footerEvents - [Object]</a>
+`footerEvents` same as [`column.events`](#events) but it is for footer column:
+
+```js
+{
+  // omit...
+  footerEvents: {
+    onClick: e => { ... }
+  }
+}
+```
+
+## <a name='footerAlign'>column.footerAlign - [String | Function]</a>
+It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on footer column. 
+
+```js
+{
+  // omit...
+  footerAlign: 'center'
+}
+```
+
+Also, you can custom the align by a callback function:
+
+```js
+{
+  // omit...
+  footerAlign: (column, colIndex) => {
+    // column is an object and perform itself
+    // return custom title here
+  }
+}
+```
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerAttrs'>column.footerAttrs - [Object | Function]</a>
+`footerAttrs` is similar to [`column.attrs`](#attrs) but it works for footer column. 
+```js
+{
+  // omit...
+  footerAttrs: {
+    title: 'bar',
+    'data-test': 'foo'
+  }
+}
+```
+
+Additionally, customize the header attributes by a **2** arguments callback function:
+
+```js
+{
+  // omit...
+  footerAttrs: (column, colIndex) => ({
+    // return customized HTML attribute here
+  })
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
 ## <a name='editable'>column.editable - [Bool | Function]</a>
 `column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.
 
@@ -488,7 +709,7 @@ If a callback function given, you can control the editable level as cell level:
 }
 ```
 
-The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead:
+The return value can be a bool or an object. If your validation is pass, return `true` explicitly. If your validation is invalid, return following object instead:
 ```js
 {
   valid: false,
@@ -496,6 +717,28 @@ The return value can be a bool or an object. If your valiation is pass, return `
 }
 ```
 
+If you want to perform a asycn validation, you can do it like this:
+```js
+{
+  // omit...
+  validator: (newValue, row, column, done) => {
+    settimeout(() => {
+      // async validation ok
+      return done();
+
+      // async validation not ok
+      return done({
+        valid: false,
+        message: 'SOME_REASON_HERE'
+      });
+
+    }, 2000);
+    return { async: true };
+  }
+}
+```
+
+
 ## <a name='editCellStyle'>column.editCellStyle - [Object | Function]</a>
 You can use `column.editCellStyle` to custom the style of `<td>` when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
 
@@ -538,10 +781,100 @@ Or take a callback function
 }
 ```
 
+## <a name='editorStyle'>column.editorStyle - [Object | Function]</a>
+This is almost same as [`column.editCellStyle`](#editCellStyle), but `column.editorStyle` is custom the style on editor instead of cell(`td`).
+
+## <a name='editorClasses'>column.editorClasses - [Object | Function]</a>
+This is almost same as [`column.editCellClasses`](#editCellClasses), but `column.editorClasses` is custom the class on editor instead of cell(`td`).
+
+## <a name='editor'>column.editor - [Object]</a>
+`column.editor` allow you to custom the type of cell editor by following predefined type:
+
+* Text(Default)
+* Dropdown
+* Date
+* Textarea
+* Checkbox
+
+Following is a quite example: 
+
+```js
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [
+  //...
+  , {
+    dataField: 'done',
+    text: 'Done',
+    editor: {
+      type: Type.CHECKBOX,
+      value: 'Y:N'
+    }
+  }
+];
+```
+
+If you want more information, please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-editor).
+
+## <a name='editorRenderer'>column.editorRenderer - [Function]</a>
+If you feel above predefined editors are not satisfied to your requirement, you can totally custom the editor via `column.editorRenderer`:
+
+```js
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+// Custom Editor
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+
+const columns = [
+  //...
+  , {
+    dataField: 'done',
+    text: 'Done',
+    editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) =>
+      <QualityRanger { ...editorProps } value={ value } />;
+  }
+];
+```
+
 ## <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`)
+* Select(`selectFilter`)
+* Number(`numberFilter`)
+* Date(`dateFilter`)
 
 We have a quick example to show you how to use `column.filter`:
 
@@ -556,4 +889,38 @@ import { textFilter } from 'react-bootstrap-table2-filter';
 }
 ```
 
-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.
+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.
+
+## <a name='filterValue'>column.filterValue - [Function]</a>
+Sometimes, if the cell/column value that you don't want to filter on them, you can define `filterValue` to return a actual value you wanna be filtered:
+
+**Parameters**
+* `cell`: The value of current cell. 
+* `row`: The value of current row.
+
+**Return value**
+
+A final `String` value you want to be filtered.
+
+```js
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter(),
+  filterValue: (cell, row) => owners[cell]
+}
+```
+
+## <a name='csvType'>column.csvType - [Object]</a>
+Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
+
+## <a name='csvFormatter'>column.csvFormatter - [Function]</a>
+
+This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV.
+
+## <a name='csvText'>column.csvText - [String]</a>
+Custom the CSV header cell, Default is [`column.text`](#text).
+
+## <a name='csvExport'>column.csvExport - [Bool]</a>
+Default is `true`, `false` will hide this column when export CSV.

docs/development.md

@@ -3,13 +3,13 @@
 ### Setup
 ```bash
 $ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
-$ cd react-bootstrap-table
+$ cd react-bootstrap-table2
 $ npm install
 $ lerna bootstrap  # ./node_modules/.bin/lerna bootstrap
 ```
 ### Development
 ```bash
-$ npm start
+$ npm run storybook
 ```
 
 ### Launch StoryBook
@@ -25,4 +25,4 @@ $ npm run storybook
 $ npm test
 $ npm run test:watch  # for watch mode
 $ npm run test:coverage  # generate coverage report
-```
+```

docs/migration.md

@@ -0,0 +1,146 @@
+# Migration Guide
+
+* Please see the [CHANGELOG](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/new-version-0.1.0.html) for `react-bootstrap-table2` first drop.
+* Please see the [Road Map](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html)  for `react-bootstrap-table2` in 2018/Q1.
+* Feel free to see the [official docs](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/about.html), we list all the basic usage here!!
+
+## Preface
+
+Currently, **I still can't implement all the mainly features in legacy `react-bootstrap-table`**, so please watch our github repo or [blog](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/) to make sure the legacy features you wanted are already implemented on `react-bootstrap-table2`. Anyway, ask me by open issue is ok.   
+
+-----
+
+`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
+
+* [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+  * Core table module, include sorting and row selection
+* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+  * Column filter Addons
+* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+  * Cell Editing Addons
+* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+  * Pagination Addons
+* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+  * Overlay/Loading Addons
+* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+  * Table Toolkits, like search, csv etc.
+
+This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
+
+## Core Table Migration
+
+There is a big change is that there's no `TableHeaderColumn` in the `react-bootstrap-table2`, instead you are supposed to be define the `columns` prop on `BootstrapTable`: 
+
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+```
+
+The `text` property is just same as the children for the `TableHeaderColumn`, if you want to custom the header, there's a new property is: [`headerFormatter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnheaderformatter-function).
+
+* [`BootstrapTable` Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html)
+* [Column Definition](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html)
+
+## Table Sort
+
+Please see [Work with table sort](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-sort.html).   
+
+- [x] Basic sorting
+- [x] Custom sort function
+- [x] Default Sort
+- [x] Remote mode
+- [x] Custom the sorting header
+- [x] Sort event listener
+- [ ] Custom the sort caret
+- [ ] Sort management
+- [ ] Multi sort
+
+Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnsort-bool) property on column definition.
+
+## Row Selection
+
+Please see [Work with selection](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-row-select.html).   
+Please see [available selectRow configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html).   
+
+No huge change for row selection.
+
+## Column Filter
+
+Please see [Work with column filter](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-filter.html).   
+Please see [available filter configuration](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html).   
+
+- [x] Text Filter
+- [x] Custom Text Filter
+- [x] Remote Filter
+- [x] Custom Filter Component
+- [ ] Regex Filter
+- [x] Select Filter
+- [x] Custom Select Filter
+- [X] Number Filter
+- [X] Date Filter
+- [X] Array Filter
+- [X] Programmatically Filter
+
+Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.   
+
+Due to no `TableHeaderColumn` so that no `filter` here, please add [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnfilter-object) property on column definition and [`filter`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#filter-object) prop on `BootstrapTable`.
+
+## Cell Edit
+
+Please see [Work with cell edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-celledit.html).   
+Please see [available cell edit configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html).   
+
+Remember to install [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor) firstly.   
+
+No big changes for cell editing, [`validator`](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will not support the async call(Promise).
+
+## Pagination
+
+Please see [Work with pagination](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-pagination.html).   
+Please see [available pagination configurations](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html).   
+
+Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly.   
+
+## Table Search
+Ｔhe 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
+- [x] Clear search
+- [ ] Multiple search
+- [ ] Strict search
+
+## Row Expand
+- [x] Expand Row Events
+- [x] Expand Row Indicator
+- [x] Expand Row Management
+- [x] Custom Expand Row Indicators
+- [ ] Compatiable with Row Selection
+- [ ] Expand Column position
+- [ ] Expand Column Style/Class
+
+## Export CSV
+Export CSV functionality is like search, which is one of functionality in the `react-bootstrap-table2-toolkit`. All of the legacy functions we already implemented.
+
+## Remote
+
+> 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
+
+## Keyboard Navigation
+Not support yet

docs/row-expand.md

@@ -0,0 +1,167 @@
+
+# Row expand
+`react-bootstrap-table2` supports the row expand feature. By passing prop `expandRow` to enable this functionality. 
+
+> Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism!
+
+## Required
+* [renderer (**required**)](#renderer)
+
+## Optional
+* [expanded](#expanded)
+* [nonExpandable](#nonExpandable)
+* [onExpand](#onExpand)
+* [onExpandAll](#onExpandAll)
+* [showExpandColumn](#showExpandColumn)
+* [onlyOneExpanding](#onlyOneExpanding)
+* [expandByColumnOnly](#expandByColumnOnly)
+* [expandColumnPosition](#expandColumnPosition)
+* [expandColumnRenderer](#expandColumnRenderer)
+* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+
+### <a name="renderer">expandRow.renderer - [Function]</a>
+
+Specify the content of expand row, `react-bootstrap-table2` will pass a row object as argument and expect return a react element.
+
+#### values
+* **row**
+
+#### examples
+
+```js
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+```
+
+### <a name='expanded'>expandRow.expanded - [Array]</a>
+`expandRow.expanded` allow you have default row expandations on table.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  expanded: [1, 3] // should be a row keys array
+};
+```
+
+### <a name='nonExpandable'>expandRow.nonExpandable - [Array]</a>
+This prop allow you to restrict some rows which can not be expanded by user. `expandRow.nonExpandable` accept an rowkeys array.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  nonExpandable: [1, 3 ,5]
+};
+```
+
+### <a name='onExpand'>expandRow.onExpand - [Function]</a>
+This callback function will be called when a row is expand/collapse and pass following four arguments:
+`row`, `isExpand`, `rowIndex` and `e`.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  onExpand: (row, isExpand, rowIndex, e) => {
+    // ...
+  }
+};
+```
+
+### <a name='onExpandAll'>expandRow.onExpandAll - [Function]</a>
+This callback function will be called when expand/collapse all. It only work when you configure [`expandRow.showExpandColumn`](#showExpandColumn) as `true`.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  onExpandAll: (isExpandAll, results, e) => {
+    // ...
+  }
+};
+```
+
+### <a name='expandColumnRenderer'>expandRow.expandColumnRenderer - [Function]</a>
+Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
+* `expanded`: If current row is expanded or not
+* `rowKey`: Current row key
+* `expandable`: If currnet row is expandable or not 
+
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  expandColumnRenderer: ({ expanded, rowKey, expandable }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### <a name='expandHeaderColumnRenderer'>expandRow.expandHeaderColumnRenderer - [Function]</a>
+Provide a callback function which allow you to custom the expand indicator in the expand header column. This callback only have one argument which is an object and contain one property `isAnyExpands` which indicate if there's any rows are expanded:
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  expandHeaderColumnRenderer: ({ isAnyExpands }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### <a name='showExpandColumn'>expandRow.showExpandColumn - [Bool]</a>
+Default is `false`, if you want to have a expand indicator, give this prop as `true`
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  showExpandColumn: true
+};
+```
+
+### <a name='onlyOneExpanding'>expandRow.onlyOneExpanding - [Bool]</a>
+Default is `false`. Enable this will only allow one row get expand at the same time.
+
+```js
+const expandRow = {
+  renderer: (row) => ...
+  onlyOneExpanding: true
+};
+```
+
+### <a name='expandByColumnOnly'>expandRow.expandByColumnOnly - [Bool]</a>
+Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it. 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  showExpandColumn: true,
+  expandByColumnOnly: true
+};
+```
+
+### <a name='expandColumnPosition'>expandRow.expandColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering expand column in the right side.
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  showExpandColumn: true,
+  expandColumnPosition: 'right'
+};
+```

docs/row-selection.md

@@ -2,32 +2,32 @@
 # Row selection
 `react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first. 
 
-
-## Available properties
-
-The following are available properties in `selectRow`:
-
-#### Required
+## Required
 * [mode (**required**)](#mode)
+
+## Optional
+* [selected](#selected)
 * [style](#style)
 * [classes)](#classes)
 * [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
 * [clickToSelect)](#clickToSelect)
+* [clickToExpand)](#clickToExpand)
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
 * [hideSelectColumn](#hideSelectColumn)
+* [hideSelectAll](#hideSelectAll)
+* [selectionRenderer](#selectionRenderer)
+* [selectionHeaderRenderer](#selectionHeaderRenderer)
 
-#### Optional
-
-## <a name="mode">selectRow.mode - [String]</a>
+### <a name="mode">selectRow.mode - [String]</a>
 
 Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `radio` was assigned, there will be a radio button in the selection column; otherwise, the `checkbox` instead.
 
 #### values
-* `radio`
-* `checkbox`
+* **radio**
+* **checkbox**
 
 #### examples
 
@@ -35,6 +35,7 @@ Specifying the selection way for `single(radio)` or `multiple(checkbox)`. If `ra
 const selectRow = {
   mode: 'radio' // single row selection
 };
+
 <BootstrapTable
   keyField='id'
   data={ products }
@@ -56,7 +57,17 @@ const selectRow = {
 />
 ```
 
-## <a name='style'>selectRow.style - [Object | Function]</a>
+### <a name='selected'>selectRow.selected - [Array]</a>
+`selectRow.selected` allow you have default selections on table.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selected: [1, 3] // should be a row keys array
+};
+```
+
+### <a name='style'>selectRow.style - [Object | Function]</a>
 `selectRow.style` allow you to have custom style on selected rows:
 
 ```js
@@ -75,7 +86,7 @@ const selectRow = {
 };
 ```
 
-## <a name='classes'>selectRow.classes - [String | Function]</a>
+### <a name='classes'>selectRow.classes - [String | Function]</a>
 `selectRow.classes` allow you to add css class on selected rows:
 
 ```js
@@ -94,8 +105,8 @@ const selectRow = {
 };
 ```
 
-## <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
-The backgroud color when row is selected
+### <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
+The background color when row is selected
 
 ```js
 const selectRow = {
@@ -115,7 +126,7 @@ const selectRow = {
 };
 ```
 
-## <a name='nonSelectable'>selectRow.nonSelectable - [Array]</a>
+### <a name='nonSelectable'>selectRow.nonSelectable - [Array]</a>
 This prop allow you to restrict some rows which can not be selected by user. `selectRow.nonSelectable` accept an rowkeys array.
 
 ```js
@@ -125,8 +136,8 @@ const selectRow = {
 };
 ```
 
-## <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
-Able to select row when clicking on row.
+### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
+Allow user to select row by clicking on the row.
 
 ```js
 const selectRow = {
@@ -135,10 +146,20 @@ const selectRow = {
 };
 ```
 
-> Note: if you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing   
+> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing   
 > If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
 
-## <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
+### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
+Default is false, enable it will let user able to expand and select row when user clicking on the row.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  clickToExpand: true
+};
+```
+
+### <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
 Able to click to edit cell and select row
 
 ```js
@@ -149,32 +170,86 @@ const selectRow = {
 };
 ```
 
-## <a name='onSelect'>selectRow.onSelect - [Function]</a>
-This callback function will be called when a row is select/unselect and pass following three arguments:
-`row`, `isSelect` and `rowIndex`.
+### <a name='selectionRenderer'>selectRow.selectionRenderer - [Function]</a>
+Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelect: (row, isSelect, rowIndex) => {
+  selectionRenderer: ({ mode, checked, disabled }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### <a name='selectionHeaderRenderer'>selectRow.selectionHeaderRenderer - [Function]</a>
+Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionHeaderRenderer: ({ mode, checked, indeterminate }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### <a name='onSelect'>selectRow.onSelect - [Function]</a>
+This callback function will be called when a row is select/unselect and pass following three arguments:
+`row`, `isSelect`, `rowIndex` and `e`.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelect: (row, isSelect, rowIndex, e) => {
     // ...
   }
 };
 ```
 
-## <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
+> If you want to reject current select action, just return `false`:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelect: (row, isSelect, rowIndex, e) => {
+    if (SOME_CONDITION) {
+      return false;
+    }
+  }
+};
+```
+
+### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
 This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, results) => {
+  onSelectAll: (isSelect, rows, e) => {
     // ...
   }
 };
 ```
 
-## <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
+> If you want to control the final selection result, just return a row key array:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelectAll: (isSelect, rows, e) => {
+    if (isSelect && SOME_CONDITION) {
+      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
+    }
+  }
+};
+```
+
+### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 
 ```js
@@ -185,3 +260,13 @@ const selectRow = {
   bgColor: 'red'
 };
 ```
+
+### <a name='hideSelectAll'>selectRow.hideSelectAll - [Bool]</a>
+Default is `false`, if you don't want to render the select all checkbox on the header of selection column, give this prop as `true`!
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  hideSelectAll: true
+};
+```

enzyme-setup.js

@@ -1,4 +1,4 @@
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-16.3';
 import { configure } from 'enzyme';
 
 const configureEnzyme = () => {

gulpfile.babel.js

@@ -0,0 +1,94 @@
+import gulp from 'gulp';
+import babel from 'gulp-babel';
+import sass from 'gulp-sass';
+import cleanCSS from 'gulp-clean-css';
+import cleanDir from 'gulp-clean';
+import rename from 'gulp-rename';
+import shell from 'gulp-shell';
+
+const LIB = 'lib';
+const DIST = 'dist';
+const TEST = 'test';
+const PKG_PATH = './packages';
+const NODE_MODULES = 'node_modules';
+
+const JS_PKGS = [
+  'react-bootstrap-table2',
+  'react-bootstrap-table2-editor',
+  'react-bootstrap-table2-filter',
+  'react-bootstrap-table2-overlay',
+  'react-bootstrap-table2-paginator',
+  'react-bootstrap-table2-toolkit'
+].reduce((pkg, curr) => `${curr}|${pkg}`, '');
+
+const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
+
+const STYLE_PKGS = [
+  'react-bootstrap-table2',
+  'react-bootstrap-table2-filter',
+  'react-bootstrap-table2-paginator',
+  'react-bootstrap-table2-toolkit',
+].reduce((pkg, curr) => `${curr}|${pkg}`, '');
+
+const STYLE_SKIPS = `+(${NODE_MODULES})`;
+
+
+function clean() {
+  return gulp
+    .src(`./packages/+(${JS_PKGS})/+(${LIB}|${DIST})`, { allowEmpty: true })
+    .pipe(cleanDir());
+}
+
+function scripts() {
+  return gulp
+    .src([
+      `./packages/+(${JS_PKGS})/**/*.js`,
+      `!packages/+(${JS_PKGS})/${JS_SKIPS}/**/*.js`
+    ])
+    .pipe(babel())
+    .pipe(rename((path) => {
+      if (path.dirname.indexOf('src') > -1) {
+        path.dirname = path.dirname.replace('src', `${LIB}/src`);
+      } else {
+        path.dirname += `/${LIB}`;
+      }
+    }))
+    .pipe(gulp.dest(PKG_PATH));
+}
+
+function styles() {
+  return gulp
+    .src([
+      `./packages/+(${STYLE_PKGS})/style/**/*.scss`,
+      `!packages/+(${STYLE_PKGS})/${STYLE_SKIPS}/**/*.scss`
+    ])
+    .pipe(sass().on('error', sass.logError))
+    .pipe(rename((path) => {
+      path.dirname = path.dirname.replace('style', DIST);
+    }))
+    .pipe(gulp.dest(PKG_PATH))
+    .pipe(cleanCSS({ compatibility: 'ie8' }))
+    .pipe(rename((path) => {
+      path.extname = '.min.css';
+    }))
+    .pipe(gulp.dest(PKG_PATH));
+}
+
+function umd(done) {
+  gulp.parallel(
+    () => gulp.src('./webpack/next.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/editor.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/filter.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/overlay.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/toolkit.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
+  )();
+  done();
+}
+
+const buildJS = gulp.parallel(umd, scripts);
+const buildCSS = styles;
+const build = gulp.series(clean, gulp.parallel(buildJS, buildCSS));
+
+gulp.task('prod', build);
+gulp.task('default', build);

lerna.json

@@ -3,5 +3,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.0.0"
+  "version": "independent"
 }

package.json

@@ -1,29 +1,46 @@
 {
   "name": "react-bootstrap-table2",
   "version": "0.0.1",
+  "private": true,
   "description": "Rebuilt for react-bootstrap-table",
   "main": "index.js",
   "scripts": {
     "postinstall": "lerna bootstrap",
-    "start": "node -r babel-register ./node_modules/.bin/webpack-dev-server --config webpack.config.babel.js",
+    "build": "./node_modules/.bin/gulp prod",
     "lint": "eslint ./packages --ext .js --ext .jsx --ignore-path .gitignore",
     "pretest": "yarn lint --cache",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch",
-    "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook"
+    "test:watch": "jest --coverage --watch",
+    "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook",
+    "gh-pages:clean": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:clean",
+    "gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build",
+    "release": "yarn install && yarn build && lerna publish"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
   },
-  "author": "",
-  "license": "ISC",
+  "author": "AllenFang",
+  "contributors": [
+    {
+      "name": "Allen Fang",
+      "email": "ayu780129@hotmail.com",
+      "url": "https://github.com/AllenFang"
+    },
+    {
+      "name": "Chun-MingChen",
+      "email": "nick830314@gmail.com",
+      "url": "https://github.com/Chun-MingChen"
+    }
+  ],
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/react-bootstrap-table/react-bootstrap-table2/issues"
   },
   "homepage": "https://github.com/react-bootstrap-table/react-bootstrap-table2#readme",
   "devDependencies": {
+    "babel-cli": "6.26.0",
     "babel-core": "6.25.0",
     "babel-eslint": "7.2.3",
     "babel-jest": "20.0.3",
@@ -33,19 +50,27 @@
     "babel-preset-stage-0": "6.24.1",
     "babel-register": "6.24.1",
     "css-loader": "0.28.1",
-    "enzyme": "3.1.1",
-    "enzyme-adapter-react-16": "1.0.4",
+    "enzyme": "3.4.0",
+    "enzyme-adapter-react-16.3": "1.0.0",
+    "enzyme-to-json": "3.3.4",
     "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "7.2.1",
+    "gulp": "4.0.0",
+    "gulp-babel": "7.0.0",
+    "gulp-clean": "0.4.0",
+    "gulp-clean-css": "3.9.2",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "3.1.0",
+    "gulp-shell": "0.6.5",
     "html-webpack-plugin": "2.30.1",
     "jest": "20.0.4",
     "jsdom": "11.2.0",
     "jsdom-global": "3.0.2",
-    "lerna": "2.0.0",
+    "lerna": "2.8.0",
     "node-sass": "4.5.3",
     "react-test-renderer": "16.0.0",
     "sass-loader": "6.0.6",
@@ -57,17 +82,14 @@
   "dependencies": {
     "classnames": "2.2.5",
     "prop-types": "15.5.10",
-    "react": "16.0.0",
-    "react-dom": "16.0.0"
-  },
-  "peerDependencies": {
-    "prop-types": "^15.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "16.4.0",
+    "react-dom": "16.4.0",
+    "underscore": "1.9.1"
   },
   "jest": {
     "collectCoverageFrom": [
-      "packages/**/*.js"
+      "packages/*/src/**/*.js",
+      "packages/*/index.js"
     ],
     "roots": [
       "<rootDir>/packages"

packages/react-bootstrap-table2-editor/README.md

@@ -0,0 +1,229 @@
+# react-bootstrap-table2-editor
+
+`react-bootstrap-table2` separate the cell edit code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so there's a little bit different when you use cell edit than `react-bootstrap-table`. In the following, we are going to show you how to enable the cell edit
+
+**[Live Demo For Cell Edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing)**
+
+**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html)**
+
+-----
+
+## Install
+
+```sh
+$ npm install react-bootstrap-table2-editor --save
+```
+
+## How
+
+We have [two ways](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditmode-string) to trigger a editable cell as editing cell:
+
+* click
+* dbclick
+
+That's look into how we enable the cell edit on tabe:
+
+```js
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+// omit
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
+/>
+```
+
+How user save their new editings? We offer two ways:
+
+* Press ENTER(**default**)
+* Blur from current editing cell(Need to enable the [cellEdit.blurToSave](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditblurtosave-bool))
+
+## Editable Cell
+`react-bootstrap-table2` support you to configure the cell editable on three level:
+
+* Row Level ([cellEdit.nonEditableRows](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditnoneditablerows-function))
+* Column Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value)
+* Cell Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function)
+
+## Validation
+
+[column.validator](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnvalidator-function) will help you to work on it!
+## Customize Style/Class
+### Editing Cell
+
+* Customize the editing cell style via [column.editCellStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditcellstyle-object-function)
+* Customize the editing cell classname via [column.editCellClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditcellclasses-string-function)
+
+### Editor
+* Customize the editor style via [column.editorStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorstyle-object-function)
+* Customize the editor classname via [column.editoClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function)
+
+## Rich Editors
+`react-bootstrap-table2` have following predefined editor:
+
+* Text(Default)
+* Dropdown
+* Date
+* Textarea
+* Checkbox
+
+In a nutshell, you just only give a [column.editor](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditor-object) and define the `type`:
+
+```js
+import { Type } from 'react-bootstrap-table2-editor';
+const columns = [
+  ..., {
+    dataField: 'done',
+    text: 'Done',
+    editor: {
+      type: Type.SELECT | Type.TEXTAREA | Type.CHECKBOX | Type.DATE,
+      ... // The rest properties will be rendered into the editor's DOM element
+    }
+  }
+]
+```
+
+In the following, we go though all the predefined editors:
+
+### Dropdown Editor
+Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor.
+
+```js
+import { Type } from 'react-bootstrap-table2-editor';
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    options: [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}];
+```
+
+### Date Editor
+Date editor is use `<input type="date">`, the configuration is very simple:
+
+```js
+const columns = [
+  ..., {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+```
+
+### Textarea Editor
+Textarea editor is use `<input type="textarea">`, user can press `ENTER` to change line and in the `react-bootstrap-table2`, user allow to save result via press `SHIFT` + `ENTER`.
+
+```js
+const columns = [
+  ..., {
+  dataField: 'comment',
+  text: 'Product Comments',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+```
+### Checkbox Editor
+Checkbox editor allow you to have a pair value choice, the `editor.value` is required value to represent the actual value for check and uncheck.
+
+```js
+const columns = [
+  ..., {
+  dataField: 'comment',
+  text: 'Product Comments',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'Y:N'
+  }
+}];
+```
+
+## Customize Editor
+If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via [column.editorRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). It accept a function and pass following arguments when function called:
+
+* `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
+* `value`: Current cell value
+* `row`: Current row data 
+* `column`: Current column definition 
+* `rowIndex`: Current row index 
+* `columnIndex`: Current column index
+
+> Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
+
+> Note when you want to save value, you can call **editorProps.onUpdate** function
+
+Following is a short example: 
+
+```js
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quality',
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+```

packages/react-bootstrap-table2-editor/index.js

@@ -0,0 +1,19 @@
+import createContext from './src/context';
+import withRowLevelCellEdit from './src/row-consumer';
+import createEditingCell from './src/editing-cell-consumer';
+import {
+  EDITTYPE,
+  DBCLICK_TO_CELL_EDIT,
+  DELAY_FOR_DBCLICK
+} from './src/const';
+
+export default (options = {}) => ({
+  createContext,
+  createEditingCell,
+  withRowLevelCellEdit,
+  DBCLICK_TO_CELL_EDIT,
+  DELAY_FOR_DBCLICK,
+  options
+});
+
+export const Type = EDITTYPE;

packages/react-bootstrap-table2-editor/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "react-bootstrap-table2-editor",
+  "version": "1.2.2",
+  "description": "it's the editor addon for react-bootstrap-table2",
+  "main": "./lib/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
+  },
+  "keywords": [
+    "react",
+    "bootstrap",
+    "table",
+    "grid",
+    "react-bootstrap-table-addons",
+    "react-component"
+  ],
+  "files": [
+    "lib/",
+    "dist/"
+  ],
+  "tags": [
+    "react"
+  ],
+  "author": "AllenFang",
+  "contributors": [
+    {
+      "name": "Allen Fang",
+      "email": "ayu780129@hotmail.com",
+      "url": "https://github.com/AllenFang"
+    },
+    {
+      "name": "Chun-MingChen",
+      "email": "nick830314@gmail.com",
+      "url": "https://github.com/Chun-MingChen"
+    }
+  ],
+  "peerDependencies": {
+    "prop-types": "^15.0.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
+  }
+}

packages/react-bootstrap-table2-editor/src/checkbox-editor.js

@@ -0,0 +1,65 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class CheckBoxEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      checked: props.defaultValue.toString() === props.value.split(':')[0]
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  componentDidMount() {
+    const { didMount } = this.props;
+    this.checkbox.focus();
+    if (didMount) didMount();
+  }
+
+  getValue() {
+    const [positive, negative] = this.props.value.split(':');
+    return this.checkbox.checked ? positive : negative;
+  }
+
+  handleChange(e) {
+    if (this.props.onChange) this.props.onChange(e);
+    const { target } = e;
+    this.setState(() => ({ checked: target.checked }));
+  }
+
+  render() {
+    const { defaultValue, didMount, className, ...rest } = this.props;
+    const editorClass = cs('editor edit-chseckbox checkbox', className);
+    return (
+      <input
+        ref={ node => this.checkbox = node }
+        type="checkbox"
+        className={ editorClass }
+        { ...rest }
+        checked={ this.state.checked }
+        onChange={ this.handleChange }
+      />
+    );
+  }
+}
+
+CheckBoxEditor.propTypes = {
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  value: PropTypes.string,
+  defaultValue: PropTypes.any,
+  onChange: PropTypes.func,
+  didMount: PropTypes.func
+};
+CheckBoxEditor.defaultProps = {
+  className: '',
+  value: 'on:off',
+  defaultValue: false,
+  onChange: undefined,
+  didMount: undefined
+};
+export default CheckBoxEditor;

packages/react-bootstrap-table2-editor/src/const.js

@@ -0,0 +1,12 @@
+export const TIME_TO_CLOSE_MESSAGE = 3000;
+export const DELAY_FOR_DBCLICK = 200;
+export const CLICK_TO_CELL_EDIT = 'click';
+export const DBCLICK_TO_CELL_EDIT = 'dbclick';
+
+export const EDITTYPE = {
+  TEXT: 'text',
+  SELECT: 'select',
+  TEXTAREA: 'textarea',
+  CHECKBOX: 'checkbox',
+  DATE: 'date'
+};

packages/react-bootstrap-table2-editor/src/context.js

@@ -0,0 +1,157 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
+
+const CellEditContext = React.createContext();
+
+export default (
+  _,
+  dataOperator,
+  isRemoteCellEdit,
+  handleCellChange
+) => {
+  class CellEditProvider extends React.Component {
+    static propTypes = {
+      data: PropTypes.array.isRequired,
+      selectRow: PropTypes.object,
+      options: PropTypes.shape({
+        mode: PropTypes.oneOf([CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT]).isRequired,
+        onErrorMessageDisappear: PropTypes.func,
+        blurToSave: PropTypes.bool,
+        beforeSaveCell: PropTypes.func,
+        afterSaveCell: PropTypes.func,
+        onStartEdit: PropTypes.func,
+        nonEditableRows: PropTypes.func,
+        timeToCloseMessage: PropTypes.number,
+        errorMessage: PropTypes.any
+      })
+    }
+
+    constructor(props) {
+      super(props);
+      this.doUpdate = this.doUpdate.bind(this);
+      this.startEditing = this.startEditing.bind(this);
+      this.escapeEditing = this.escapeEditing.bind(this);
+      this.completeEditing = this.completeEditing.bind(this);
+      this.handleCellUpdate = this.handleCellUpdate.bind(this);
+      this.state = {
+        ridx: null,
+        cidx: null,
+        message: null
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.cellEdit && isRemoteCellEdit()) {
+        if (nextProps.cellEdit.options.errorMessage) {
+          this.setState(() => ({
+            message: nextProps.cellEdit.options.errorMessage
+          }));
+        } else {
+          this.escapeEditing();
+        }
+      }
+    }
+
+    handleCellUpdate(row, column, newValue) {
+      const { cellEdit } = this.props;
+      const { beforeSaveCell } = cellEdit.options;
+      const oldValue = _.get(row, column.dataField);
+      const beforeSaveCellDone = (result = true) => {
+        if (result) {
+          this.doUpdate(row, column, newValue);
+        } else {
+          this.escapeEditing();
+        }
+      };
+      if (_.isFunction(beforeSaveCell)) {
+        const result = beforeSaveCell(
+          oldValue,
+          newValue,
+          row,
+          column,
+          beforeSaveCellDone
+        );
+        if (_.isObject(result) && result.async) {
+          return;
+        }
+      }
+      this.doUpdate(row, column, newValue);
+    }
+
+    doUpdate(row, column, newValue) {
+      const { keyField, cellEdit, data } = this.props;
+      const { afterSaveCell } = cellEdit.options;
+      const rowId = _.get(row, keyField);
+      const oldValue = _.get(row, column.dataField);
+      if (isRemoteCellEdit()) {
+        handleCellChange(rowId, column.dataField, newValue);
+      } else {
+        dataOperator.editCell(data, keyField, rowId, column.dataField, newValue);
+        if (_.isFunction(afterSaveCell)) afterSaveCell(oldValue, newValue, row, column);
+        this.completeEditing();
+      }
+    }
+
+    completeEditing() {
+      this.setState(() => ({
+        ridx: null,
+        cidx: null,
+        message: null
+      }));
+    }
+
+    startEditing(ridx, cidx) {
+      const editing = () => {
+        this.setState(() => ({
+          ridx,
+          cidx
+        }));
+      };
+
+      const { selectRow } = this.props;
+      if (!selectRow || (selectRow.clickToEdit || !selectRow.clickToSelect)) editing();
+    }
+
+    escapeEditing() {
+      this.setState(() => ({
+        ridx: null,
+        cidx: null
+      }));
+    }
+
+    render() {
+      const {
+        cellEdit: {
+          options: { nonEditableRows, errorMessage, ...optionsRest },
+          ...cellEditRest
+        }
+      } = this.props;
+
+      const newCellEdit = {
+        ...optionsRest,
+        ...cellEditRest,
+        ...this.state,
+        nonEditableRows: _.isDefined(nonEditableRows) ? nonEditableRows() : [],
+        onStart: this.startEditing,
+        onEscape: this.escapeEditing,
+        onUpdate: this.handleCellUpdate
+      };
+
+      return (
+        <CellEditContext.Provider
+          value={ { ...newCellEdit } }
+        >
+          { this.props.children }
+        </CellEditContext.Provider>
+      );
+    }
+  }
+  return {
+    Provider: CellEditProvider
+  };
+};
+
+export const Consumer = CellEditContext.Consumer;

packages/react-bootstrap-table2-editor/src/date-editor.js

@@ -0,0 +1,45 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class DateEditor extends Component {
+  componentDidMount() {
+    const { defaultValue, didMount } = this.props;
+    this.date.valueAsDate = new Date(defaultValue);
+    this.date.focus();
+    if (didMount) didMount();
+  }
+
+  getValue() {
+    return this.date.value;
+  }
+
+  render() {
+    const { defaultValue, didMount, className, ...rest } = this.props;
+    const editorClass = cs('form-control editor edit-date', className);
+    return (
+      <input
+        ref={ node => this.date = node }
+        type="date"
+        className={ editorClass }
+        { ...rest }
+      />
+    );
+  }
+}
+
+DateEditor.propTypes = {
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  defaultValue: PropTypes.string,
+  didMount: PropTypes.func
+};
+DateEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  didMount: undefined
+};
+export default DateEditor;

packages/react-bootstrap-table2-editor/src/dropdown-editor.js

@@ -0,0 +1,64 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class DropDownEditor extends Component {
+  componentDidMount() {
+    const { defaultValue, didMount } = this.props;
+    this.select.value = defaultValue;
+    this.select.focus();
+    if (didMount) didMount();
+  }
+
+  getValue() {
+    return this.select.value;
+  }
+
+  render() {
+    const { defaultValue, didMount, className, options, ...rest } = this.props;
+    const editorClass = cs('form-control editor edit-select', className);
+
+    const attr = {
+      ...rest,
+      className: editorClass
+    };
+
+    return (
+      <select
+        { ...attr }
+        ref={ node => this.select = node }
+        defaultValue={ defaultValue }
+      >
+        {
+          options.map(({ label, value }) => (
+            <option key={ value } value={ value }>{ label }</option>
+          ))
+        }
+      </select>
+    );
+  }
+}
+
+DropDownEditor.propTypes = {
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.any
+    }))
+  ]).isRequired,
+  didMount: PropTypes.func
+};
+DropDownEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  style: {},
+  didMount: undefined
+};
+export default DropDownEditor;

packages/react-bootstrap-table2-editor/src/editing-cell-consumer.js

@@ -0,0 +1,44 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import { Consumer } from './context';
+import createEditingCell from './editing-cell';
+
+export default (_, onStartEdit) => {
+  const EditingCell = createEditingCell(_, onStartEdit);
+  const renderWithEditingCell = (props, cellEdit) => {
+    const content = _.get(props.row, props.column.dataField);
+    let editCellstyle = props.column.editCellStyle || {};
+    let editCellclasses = props.column.editCellClasses;
+    if (_.isFunction(props.column.editCellStyle)) {
+      editCellstyle = props.column.editCellStyle(
+        content,
+        props.row,
+        props.rowIndex,
+        props.columnIndex
+      );
+    }
+    if (_.isFunction(props.column.editCellClasses)) {
+      editCellclasses = props.column.editCellClasses(
+        content,
+        props.row,
+        props.rowIndex,
+        props.columnIndex)
+      ;
+    }
+
+    return (
+      <EditingCell
+        { ...props }
+        className={ editCellclasses }
+        style={ editCellstyle }
+        { ...cellEdit }
+      />
+    );
+  };
+
+  return props => (
+    <Consumer>
+      { cellEdit => renderWithEditingCell(props, cellEdit) }
+    </Consumer>
+  );
+};

packages/react-bootstrap-table2-editor/src/editing-cell.js

@@ -0,0 +1,226 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-return-assign: 0 */
+/* eslint class-methods-use-this: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+import DropdownEditor from './dropdown-editor';
+import TextAreaEditor from './textarea-editor';
+import CheckBoxEditor from './checkbox-editor';
+import DateEditor from './date-editor';
+import TextEditor from './text-editor';
+import EditorIndicator from './editor-indicator';
+import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
+
+export default (_, onStartEdit) =>
+  class EditingCell extends Component {
+    static propTypes = {
+      row: PropTypes.object.isRequired,
+      rowIndex: PropTypes.number.isRequired,
+      column: PropTypes.object.isRequired,
+      columnIndex: PropTypes.number.isRequired,
+      onUpdate: PropTypes.func.isRequired,
+      onEscape: PropTypes.func.isRequired,
+      timeToCloseMessage: PropTypes.number,
+      autoSelectText: PropTypes.bool,
+      className: PropTypes.string,
+      style: PropTypes.object
+    }
+
+    static defaultProps = {
+      timeToCloseMessage: TIME_TO_CLOSE_MESSAGE,
+      className: null,
+      autoSelectText: false,
+      style: {}
+    }
+
+    constructor(props) {
+      super(props);
+      this.indicatorTimer = null;
+      this.clearTimer = this.clearTimer.bind(this);
+      this.handleBlur = this.handleBlur.bind(this);
+      this.handleClick = this.handleClick.bind(this);
+      this.handleKeyDown = this.handleKeyDown.bind(this);
+      this.beforeComplete = this.beforeComplete.bind(this);
+      this.asyncbeforeCompete = this.asyncbeforeCompete.bind(this);
+      this.displayErrorMessage = this.displayErrorMessage.bind(this);
+      this.state = {
+        invalidMessage: null
+      };
+    }
+
+    componentWillReceiveProps({ message }) {
+      if (_.isDefined(message)) {
+        this.createTimer();
+        this.setState(() => ({
+          invalidMessage: message
+        }));
+      }
+    }
+
+    componentWillUnmount() {
+      this.clearTimer();
+    }
+
+    clearTimer() {
+      if (this.indicatorTimer) {
+        clearTimeout(this.indicatorTimer);
+      }
+    }
+
+    createTimer() {
+      this.clearTimer();
+      const { timeToCloseMessage, onErrorMessageDisappear } = this.props;
+      this.indicatorTimer = _.sleep(() => {
+        this.setState(() => ({
+          invalidMessage: null
+        }));
+        if (_.isFunction(onErrorMessageDisappear)) onErrorMessageDisappear();
+      }, timeToCloseMessage);
+    }
+
+    displayErrorMessage(message) {
+      this.setState(() => ({
+        invalidMessage: message
+      }));
+      this.createTimer();
+    }
+
+    asyncbeforeCompete(newValue) {
+      return (result = { valid: true }) => {
+        const { valid, message } = result;
+        const { onUpdate, row, column } = this.props;
+        if (!valid) {
+          this.displayErrorMessage(message);
+          return;
+        }
+        onUpdate(row, column, newValue);
+      };
+    }
+
+    beforeComplete(newValue) {
+      const { onUpdate, row, column } = this.props;
+      if (_.isFunction(column.validator)) {
+        const validateForm = column.validator(
+          newValue,
+          row,
+          column,
+          this.asyncbeforeCompete(newValue)
+        );
+        if (_.isObject(validateForm)) {
+          if (validateForm.async) {
+            return;
+          } else if (!validateForm.valid) {
+            this.displayErrorMessage(validateForm.message);
+            return;
+          }
+        }
+      }
+      onUpdate(row, column, newValue);
+    }
+
+    handleBlur() {
+      const { onEscape, blurToSave } = this.props;
+      if (blurToSave) {
+        this.beforeComplete(this.editor.getValue());
+      } else {
+        onEscape();
+      }
+    }
+
+    handleKeyDown(e) {
+      const { onEscape } = this.props;
+      if (e.keyCode === 27) { // ESC
+        onEscape();
+      } else if (e.keyCode === 13) { // ENTER
+        this.beforeComplete(this.editor.getValue());
+      }
+    }
+
+    handleClick(e) {
+      if (e.target.tagName !== 'TD') {
+        // To avoid the row selection event be triggered,
+        // When user define selectRow.clickToSelect and selectRow.clickToEdit
+        // We shouldn't trigger selection event even if user click on the cell editor(input)
+        e.stopPropagation();
+      }
+    }
+
+    render() {
+      let editor;
+      const { row, column, className, style, rowIndex, columnIndex, autoSelectText } = this.props;
+      const { dataField } = column;
+
+      const value = _.get(row, dataField);
+      const hasError = _.isDefined(this.state.invalidMessage);
+
+      let customEditorClass = column.editorClasses || '';
+      if (_.isFunction(column.editorClasses)) {
+        customEditorClass = column.editorClasses(value, row, rowIndex, columnIndex);
+      }
+
+      let editorStyle = column.editorStyle || {};
+      if (_.isFunction(column.editorStyle)) {
+        editorStyle = column.editorStyle(value, row, rowIndex, columnIndex);
+      }
+
+      const editorClass = cs({
+        animated: hasError,
+        shake: hasError
+      }, customEditorClass);
+
+      let editorProps = {
+        ref: node => this.editor = node,
+        defaultValue: value,
+        style: editorStyle,
+        className: editorClass,
+        onKeyDown: this.handleKeyDown,
+        onBlur: this.handleBlur
+      };
+
+      if (onStartEdit) {
+        editorProps.didMount = () => onStartEdit(row, column, rowIndex, columnIndex);
+      }
+
+      const isDefaultEditorDefined = _.isObject(column.editor);
+
+      if (isDefaultEditorDefined) {
+        editorProps = {
+          ...editorProps,
+          ...column.editor
+        };
+      } else if (_.isFunction(column.editorRenderer)) {
+        editorProps = {
+          ...editorProps,
+          onUpdate: this.beforeComplete
+        };
+      }
+
+      if (_.isFunction(column.editorRenderer)) {
+        editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex);
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
+        editor = <DropdownEditor { ...editorProps } />;
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
+        editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {
+        editor = <CheckBoxEditor { ...editorProps } />;
+      } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.DATE) {
+        editor = <DateEditor { ...editorProps } />;
+      } else {
+        editor = <TextEditor { ...editorProps } autoSelectText={ autoSelectText } />;
+      }
+
+      return (
+        <td
+          className={ cs('react-bootstrap-table-editing-cell', className) }
+          style={ style }
+          onClick={ this.handleClick }
+        >
+          { editor }
+          { hasError ? <EditorIndicator invalidMessage={ this.state.invalidMessage } /> : null }
+        </td>
+      );
+    }
+  };

packages/react-bootstrap-table2-editor/src/editor-indicator.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 const EditorIndicator = ({ invalidMessage }) =>
   (
-    <div className="alert alert-danger fade in">
+    <div className="alert alert-danger in" role="alert">
       <strong>{ invalidMessage }</strong>
     </div>
   );

packages/react-bootstrap-table2-editor/src/row-consumer.js

@@ -0,0 +1,43 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import { DELAY_FOR_DBCLICK, DBCLICK_TO_CELL_EDIT, CLICK_TO_CELL_EDIT } from './const';
+import { Consumer } from './context';
+
+export default (Component, selectRowEnabled) => {
+  const renderWithCellEdit = (props, cellEdit) => {
+    const key = props.value;
+    const editableRow = !(
+      cellEdit.nonEditableRows.length > 0 &&
+      cellEdit.nonEditableRows.indexOf(key) > -1
+    );
+
+    const attrs = {};
+
+    if (selectRowEnabled && cellEdit.mode === DBCLICK_TO_CELL_EDIT) {
+      attrs.DELAY_FOR_DBCLICK = DELAY_FOR_DBCLICK;
+    }
+
+    return (
+      <Component
+        { ...props }
+        { ...attrs }
+        editingRowIdx={ cellEdit.ridx }
+        editingColIdx={ cellEdit.cidx }
+        editable={ editableRow }
+        onStart={ cellEdit.onStart }
+        clickToEdit={ cellEdit.mode === CLICK_TO_CELL_EDIT }
+        dbclickToEdit={ cellEdit.mode === DBCLICK_TO_CELL_EDIT }
+      />
+    );
+  };
+  function withConsumer(props) {
+    return (
+      <Consumer>
+        { cellEdit => renderWithCellEdit(props, cellEdit) }
+      </Consumer>
+    );
+  }
+
+  withConsumer.displayName = 'WithCellEditingRowConsumer';
+  return withConsumer;
+};

packages/react-bootstrap-table2-editor/src/text-editor.js

@@ -5,13 +5,19 @@ import PropTypes from 'prop-types';
 
 class TextEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount, autoSelectText } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (autoSelectText) this.text.select();
+    if (didMount) didMount();
+  }
+
+  getValue() {
+    return this.text.value;
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -32,9 +38,14 @@ TextEditor.propTypes = {
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ]).isRequired
+  ]),
+  autoSelectText: PropTypes.bool,
+  didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
-  className: null
+  className: null,
+  defaultValue: '',
+  autoSelectText: false,
+  didMount: undefined
 };
 export default TextEditor;

packages/react-bootstrap-table2-editor/src/textarea-editor.js

@@ -0,0 +1,66 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class TextAreaEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    const { defaultValue, didMount, autoSelectText } = this.props;
+    this.text.value = defaultValue;
+    this.text.focus();
+    if (autoSelectText) this.text.select();
+    if (didMount) didMount();
+  }
+
+  getValue() {
+    return this.text.value;
+  }
+
+  handleKeyDown(e) {
+    if (e.keyCode === 13 && !e.shiftKey) return;
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e);
+    }
+  }
+
+  render() {
+    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
+    const editorClass = cs('form-control editor edit-textarea', className);
+    return (
+      <textarea
+        ref={ node => this.text = node }
+        type="textarea"
+        className={ editorClass }
+        { ...rest }
+        onKeyDown={ this.handleKeyDown }
+      />
+    );
+  }
+}
+
+TextAreaEditor.propTypes = {
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]),
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  onKeyDown: PropTypes.func,
+  autoSelectText: PropTypes.bool,
+  didMount: PropTypes.func
+};
+TextAreaEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  autoSelectText: false,
+  onKeyDown: undefined,
+  didMount: undefined
+};
+export default TextAreaEditor;

packages/react-bootstrap-table2-editor/test/context.test.js

@@ -0,0 +1,416 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+import _ from 'react-bootstrap-table-next/src/utils';
+import dataOperator from 'react-bootstrap-table-next/src/store/operators';
+
+import {
+  CLICK_TO_CELL_EDIT,
+  DBCLICK_TO_CELL_EDIT,
+  DELAY_FOR_DBCLICK
+} from '../src/const';
+import createCellEditContext, { Consumer } from '../src/context';
+import cellEditFactory from '../index';
+
+describe('CellEditContext', () => {
+  let wrapper;
+  let cellEdit;
+  let CellEditContext;
+
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+
+  const keyField = 'id';
+
+  const columns = [{
+    dataField: 'id',
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
+
+  const defaultCellEdit = {
+    mode: CLICK_TO_CELL_EDIT
+  };
+
+  const defaultSelectRow = undefined;
+
+  const mockBase = jest.fn((() => null));
+
+  const handleCellChange = jest.fn();
+
+  function shallowContext(
+    customCellEdit = defaultCellEdit,
+    enableRemote = false,
+    selectRow = defaultSelectRow
+  ) {
+    mockBase.mockReset();
+    handleCellChange.mockReset();
+    CellEditContext = createCellEditContext(
+      _,
+      dataOperator,
+      jest.fn().mockReturnValue(enableRemote),
+      handleCellChange
+    );
+    cellEdit = cellEditFactory(customCellEdit);
+    return (
+      <CellEditContext.Provider
+        cellEdit={ cellEdit }
+        keyField={ keyField }
+        columns={ columns }
+        selectRow={ selectRow }
+        data={ data }
+      >
+        <Consumer>
+          {
+            cellEditProps => mockBase(cellEditProps)
+          }
+        </Consumer>
+      </CellEditContext.Provider>
+    );
+  }
+
+  describe('default render', () => {
+    beforeEach(() => {
+      wrapper = shallow(shallowContext());
+      wrapper.render();
+    });
+
+    it('should have correct Provider property after calling createCellEditContext', () => {
+      expect(CellEditContext.Provider).toBeDefined();
+    });
+
+    it('should have correct state.ridx', () => {
+      expect(wrapper.state().ridx).toBeNull();
+    });
+
+    it('should have correct state.cidx', () => {
+      expect(wrapper.state().cidx).toBeNull();
+    });
+
+    it('should have correct state.message', () => {
+      expect(wrapper.state().message).toBeNull();
+    });
+
+    it('should pass correct cell editing props to children element', () => {
+      expect(wrapper.length).toBe(1);
+      expect(JSON.stringify(mockBase.mock.calls[0])).toEqual(JSON.stringify([{
+        ...defaultCellEdit,
+        DBCLICK_TO_CELL_EDIT,
+        DELAY_FOR_DBCLICK,
+        ...wrapper.state(),
+        nonEditableRows: []
+      }]));
+    });
+  });
+
+  describe('componentWillReceiveProps', () => {
+    const initialState = { ridx: 1, cidx: 1, message: 'test' };
+    describe('if nextProps.cellEdit is not existing', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.setState(initialState);
+        wrapper.render();
+        wrapper.instance().componentWillReceiveProps({});
+      });
+
+      it('should not set state.message', () => {
+        expect(wrapper.state().message).toBe(initialState.message);
+      });
+
+      it('should not set state.ridx', () => {
+        expect(wrapper.state().ridx).toBe(initialState.ridx);
+      });
+
+      it('should not set state.cidx', () => {
+        expect(wrapper.state().cidx).toBe(initialState.cidx);
+      });
+    });
+
+    describe('if nextProps.cellEdit is existing but remote cell editing is disable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.setState(initialState);
+        wrapper.render();
+        wrapper.instance().componentWillReceiveProps({
+          cellEdit: cellEditFactory(defaultCellEdit)
+        });
+      });
+
+      it('should not set state.message', () => {
+        expect(wrapper.state().message).toBe(initialState.message);
+      });
+
+      it('should not set state.ridx', () => {
+        expect(wrapper.state().ridx).toBe(initialState.ridx);
+      });
+
+      it('should not set state.cidx', () => {
+        expect(wrapper.state().cidx).toBe(initialState.cidx);
+      });
+    });
+
+    describe('if nextProps.cellEdit is existing and remote cell editing is enable', () => {
+      describe('if nextProps.cellEdit.options.errorMessage is defined', () => {
+        let message;
+        beforeEach(() => {
+          message = 'validation fail';
+          wrapper = shallow(shallowContext(defaultCellEdit, true));
+          wrapper.setState(initialState);
+          wrapper.render();
+          wrapper.instance().componentWillReceiveProps({
+            cellEdit: cellEditFactory({
+              ...defaultCellEdit,
+              errorMessage: message
+            })
+          });
+          wrapper.update();
+        });
+
+        it('should set state.message', () => {
+          expect(wrapper.state('message')).toBe(message);
+        });
+
+        it('should not set state.ridx', () => {
+          expect(wrapper.state().ridx).toBe(initialState.ridx);
+        });
+
+        it('should not set state.cidx', () => {
+          expect(wrapper.state().cidx).toBe(initialState.cidx);
+        });
+      });
+
+      describe('if nextProps.cellEdit.options.errorMessage is not defined', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext(defaultCellEdit, true));
+          wrapper.setState(initialState);
+          wrapper.instance().componentWillReceiveProps({
+            cellEdit: cellEditFactory({ ...defaultCellEdit })
+          });
+          wrapper.update();
+        });
+
+        it('should not set state.message', () => {
+          expect(wrapper.state('message')).toBe(initialState.message);
+        });
+
+        it('should set correct state.ridx', () => {
+          expect(wrapper.state().ridx).toBeNull();
+        });
+
+        it('should set correct state.cidx', () => {
+          expect(wrapper.state().cidx).toBeNull();
+        });
+      });
+    });
+  });
+
+  describe('handleCellUpdate', () => {
+    const row = data[1];
+    const column = columns[1];
+    const newValue = 'This is new value';
+    const oldValue = row[column.dataField];
+
+    describe('if cellEdit.beforeSaveCell prop is defined', () => {
+      const beforeSaveCell = jest.fn();
+
+      beforeEach(() => {
+        beforeSaveCell.mockReset();
+        wrapper = shallow(shallowContext({
+          ...defaultCellEdit,
+          beforeSaveCell
+        }));
+        wrapper.instance().handleCellUpdate(
+          row,
+          column,
+          newValue
+        );
+      });
+
+      it('should call cellEdit.beforeSaveCell correctly', () => {
+        expect(beforeSaveCell).toHaveBeenCalledTimes(1);
+        expect(beforeSaveCell)
+          .toHaveBeenCalledWith(oldValue, newValue, row, column, expect.anything());
+      });
+    });
+
+    describe('when remote cell editing is enable', () => {
+      const afterSaveCell = jest.fn();
+      beforeEach(() => {
+        afterSaveCell.mockReset();
+        wrapper = shallow(shallowContext({
+          ...defaultCellEdit,
+          afterSaveCell
+        }, true));
+        wrapper.instance().handleCellUpdate(
+          row,
+          column,
+          newValue
+        );
+      });
+
+      it('should call handleCellChange correctly', () => {
+        expect(handleCellChange).toHaveBeenCalledTimes(1);
+        expect(handleCellChange).toHaveBeenCalledWith(row[keyField], column.dataField, newValue);
+      });
+
+      it('should not call cellEdit.afterSaveCell even if it is defined', () => {
+        expect(afterSaveCell).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    describe('when remote cell editing is disable', () => {
+      const afterSaveCell = jest.fn();
+
+      beforeEach(() => {
+        afterSaveCell.mockReset();
+        wrapper = shallow(shallowContext({
+          ...defaultCellEdit,
+          afterSaveCell
+        }));
+        wrapper.setState({
+          ridx: 1,
+          cidx: 1
+        });
+        wrapper.instance().handleCellUpdate(
+          row,
+          column,
+          newValue
+        );
+      });
+
+      it('should not call handleCellChange correctly', () => {
+        expect(handleCellChange).toHaveBeenCalledTimes(0);
+      });
+
+      it('should set state correctly', () => {
+        expect(wrapper.state('ridx')).toBeNull();
+        expect(wrapper.state('cidx')).toBeNull();
+        expect(wrapper.state('message')).toBeNull();
+      });
+
+      it('should call cellEdit.afterSaveCell if it is defined', () => {
+        expect(afterSaveCell).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('completeEditing', () => {
+    const initialState = { ridx: 1, cidx: 1, message: 'test' };
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext());
+      wrapper.setState(initialState);
+      wrapper.render();
+      wrapper.instance().completeEditing();
+    });
+
+    it('should set state correctly', () => {
+      expect(wrapper.state().ridx).toBeNull();
+      expect(wrapper.state().cidx).toBeNull();
+      expect(wrapper.state().message).toBeNull();
+    });
+  });
+
+  describe('startEditing', () => {
+    const ridx = 0;
+    const cidx = 1;
+
+    describe('if selectRow prop is not defined', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.render();
+        wrapper.instance().startEditing(ridx, cidx);
+      });
+
+      it('should set state correctly', () => {
+        expect(wrapper.state().ridx).toEqual(ridx);
+        expect(wrapper.state().cidx).toEqual(cidx);
+      });
+    });
+
+    describe('if selectRow prop is defined', () => {
+      describe('and selectRow.clickToEdit is enable', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext(
+            defaultCellEdit,
+            false,
+            {
+              ...defaultSelectRow,
+              clickToEdit: true
+            }
+          ));
+          wrapper.render();
+          wrapper.instance().startEditing(ridx, cidx);
+        });
+
+        it('should set state correctly', () => {
+          expect(wrapper.state().ridx).toEqual(ridx);
+          expect(wrapper.state().cidx).toEqual(cidx);
+        });
+      });
+
+      describe('and selectRow.clickToSelect is disable', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext(
+            defaultCellEdit,
+            false,
+            {
+              ...defaultSelectRow,
+              clickToSelect: false
+            }
+          ));
+          wrapper.render();
+          wrapper.instance().startEditing(ridx, cidx);
+        });
+
+        it('should set state correctly', () => {
+          expect(wrapper.state().ridx).toEqual(ridx);
+          expect(wrapper.state().cidx).toEqual(cidx);
+        });
+      });
+
+      describe('and selectRow.clickToEdit & selectRow.clickToSelect is enable', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext(
+            defaultCellEdit,
+            false,
+            {
+              ...defaultSelectRow,
+              clickToEdit: false,
+              clickToSelect: true
+            }
+          ));
+          wrapper.render();
+          wrapper.instance().startEditing(ridx, cidx);
+        });
+
+        it('should not set state', () => {
+          expect(wrapper.state().ridx).toBeNull();
+          expect(wrapper.state().cidx).toBeNull();
+        });
+      });
+    });
+  });
+
+  describe('escapeEditing', () => {
+    const initialState = { ridx: 1, cidx: 1 };
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext());
+      wrapper.setState(initialState);
+      wrapper.instance().escapeEditing();
+    });
+
+    it('should set state correctly', () => {
+      expect(wrapper.state().ridx).toBeNull();
+      expect(wrapper.state().cidx).toBeNull();
+    });
+  });
+});

packages/react-bootstrap-table2-editor/test/editing-cell-consumer.test.js

@@ -0,0 +1,147 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import _ from 'react-bootstrap-table-next/src/utils';
+
+import cellEditFactory from '..';
+import { CLICK_TO_CELL_EDIT } from '../src/const';
+import createCellEditContext from '../src/context';
+import bindEditingCell from '../src/editing-cell-consumer';
+
+describe('Editing Cell Consumer', () => {
+  let wrapper;
+  let cellEdit;
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+  let columns;
+  const rowIndex = 1;
+  const row = { id: 1, name: 'A' };
+  const keyField = 'id';
+  const columnIndex = 1;
+
+  const { Provider } = createCellEditContext(_);
+  const WithCellEditComponent = bindEditingCell(_);
+
+  beforeEach(() => {
+    columns = [{
+      dataField: 'id',
+      text: 'ID'
+    }, {
+      dataField: 'name',
+      text: 'Name'
+    }];
+  });
+
+  describe('if column.editCellClasses is defined as string', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellClasses = 'test-class-1';
+      wrapper = shallow(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+      wrapper = wrapper.render();
+    });
+
+    it('should inject className target component correctly', () => {
+      expect(wrapper.hasClass(`${columns[1].editCellClasses}`)).toBeTruthy();
+    });
+  });
+
+  describe('if column.editCellStyle is defined as object', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellStyle = { color: 'pink' };
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject style target component correctly', () => {
+      expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(columns[1].editCellStyle);
+    });
+  });
+
+  describe('if column.editCellClasses is defined as function', () => {
+    const className = 'test-class-1';
+
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellClasses = jest.fn().mockReturnValue(className);
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject empty className and style to target component', () => {
+      expect(wrapper.find(className)).toBeTruthy();
+    });
+
+    it('should call column.editCellClasses function correctly', () => {
+      expect(columns[1].editCellClasses).toHaveBeenCalledTimes(1);
+      expect(columns[1].editCellClasses).toHaveBeenCalledWith(
+        _.get(row, columns[1].dataField),
+        row,
+        rowIndex,
+        columnIndex
+      );
+    });
+  });
+
+  describe('if column.editCellStyle is defined as function', () => {
+    const style = { color: 'blue' };
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellStyle = jest.fn().mockReturnValue(style);
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject style target component correctly', () => {
+      expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(style);
+    });
+
+    it('should call column.editCellStyle function correctly', () => {
+      expect(columns[1].editCellStyle).toHaveBeenCalledTimes(1);
+      expect(columns[1].editCellStyle).toHaveBeenCalledWith(
+        _.get(row, columns[1].dataField),
+        row,
+        rowIndex,
+        columnIndex
+      );
+    });
+  });
+});

packages/react-bootstrap-table2-editor/test/editing-cell.test.js

@@ -0,0 +1,541 @@
+/* eslint react/prop-types: 0 */
+import 'jsdom-global/register';
+import React from 'react';
+import sinon from 'sinon';
+import { shallow, mount } from 'enzyme';
+
+import _ from 'react-bootstrap-table-next/src/utils';
+import editingCellFactory from '../src/editing-cell';
+import * as constants from '../src/const';
+import TextEditor from '../src/text-editor';
+import DateEditor from '../src/date-editor';
+import DropDownEditor from '../src/dropdown-editor';
+import TextAreaEditor from '../src/textarea-editor';
+import CheckBoxEditor from '../src/checkbox-editor';
+import EditorIndicator from '../src/editor-indicator';
+
+const EditingCell = editingCellFactory(_);
+const TableRowWrapper = props => (
+  <table>
+    <tbody>
+      <tr>{ props.children }</tr>
+    </tbody>
+  </table>
+);
+
+
+describe('EditingCell', () => {
+  let wrapper;
+  let onUpdate;
+  let onEscape;
+  const row = {
+    id: 1,
+    name: 'A'
+  };
+
+  const rowIndex = 1;
+  const columnIndex = 1;
+
+  let column = {
+    dataField: 'id',
+    text: 'ID'
+  };
+
+  beforeEach(() => {
+    onEscape = sinon.stub();
+    onUpdate = sinon.stub();
+    wrapper = mount(
+      <EditingCell
+        row={ row }
+        rowIndex={ rowIndex }
+        columnIndex={ columnIndex }
+        column={ column }
+        onUpdate={ onUpdate }
+        onEscape={ onEscape }
+      />
+    );
+  });
+
+  it('should render default editor successfully', () => {
+    expect(wrapper.length).toBe(1);
+    expect(wrapper.find('td').length).toBe(1);
+    expect(wrapper.find(TextEditor).length).toBe(1);
+    expect(wrapper.state().invalidMessage).toBeNull();
+  });
+
+  it('should render TextEditor with correct props', () => {
+    const textEditor = wrapper.find(TextEditor);
+    expect(textEditor.props().defaultValue).toEqual(row[column.dataField]);
+    expect(textEditor.props().onKeyDown).toBeDefined();
+    expect(textEditor.props().onBlur).toBeDefined();
+    expect(textEditor.props().className).toEqual('');
+  });
+
+  it('should not render EditorIndicator due to state.invalidMessage is null', () => {
+    const indicator = wrapper.find(EditorIndicator);
+    expect(indicator.length).toEqual(0);
+  });
+
+  it('when press ENTER on TextEditor should call onUpdate correctly', () => {
+    const newValue = 'test';
+    const textEditor = wrapper.find(TextEditor);
+    sinon.stub(textEditor.instance(), 'getValue').returns(newValue);
+    textEditor.simulate('keyDown', { keyCode: 13 });
+    expect(onUpdate.callCount).toBe(1);
+    expect(onUpdate.calledWith(row, column, newValue)).toBe(true);
+  });
+
+  it('when press ESC on TextEditor should call onEscape correctly', () => {
+    const textEditor = wrapper.find(TextEditor);
+    textEditor.simulate('keyDown', { keyCode: 27 });
+    expect(onEscape.callCount).toBe(1);
+  });
+
+  it('when blur from TextEditor should call onEscape correctly', () => {
+    const textEditor = wrapper.find(TextEditor);
+    textEditor.simulate('blur');
+    expect(onEscape.callCount).toBe(1);
+  });
+
+  describe('if style prop is defined', () => {
+    const customStyle = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = shallow(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+          style={ customStyle }
+        />
+      );
+    });
+
+    it('should render component with style successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('td').prop('style')).toEqual(customStyle);
+    });
+  });
+
+  describe('if className prop is defined', () => {
+    const className = 'test-class';
+    beforeEach(() => {
+      wrapper = shallow(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+          className={ className }
+        />
+      );
+    });
+
+    it('should render component with style successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.hasClass(className)).toBe(true);
+    });
+  });
+
+  describe('if column.editorClasses is defined', () => {
+    let columnWithEditorClasses;
+    const classes = 'test test1';
+
+    describe('and it is a function', () => {
+      beforeEach(() => {
+        columnWithEditorClasses = {
+          ...column,
+          editorClasses: jest.fn(() => classes)
+        };
+        wrapper = shallow(
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ columnWithEditorClasses }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+          />
+        );
+      });
+
+      it('should render TextEditor with correct props', () => {
+        const textEditor = wrapper.find(TextEditor);
+        expect(textEditor.props().className).toEqual(classes);
+      });
+
+      it('should call column.editorClasses correctly', () => {
+        expect(columnWithEditorClasses.editorClasses).toHaveBeenCalledTimes(1);
+        expect(columnWithEditorClasses.editorClasses).toHaveBeenCalledWith(
+          _.get(row, column.dataField),
+          row,
+          rowIndex,
+          columnIndex
+        );
+      });
+    });
+
+    describe('and it is a string', () => {
+      beforeEach(() => {
+        columnWithEditorClasses = {
+          ...column,
+          editorClasses: classes
+        };
+        wrapper = shallow(
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ columnWithEditorClasses }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+          />
+        );
+      });
+
+      it('should render TextEditor with correct props', () => {
+        const textEditor = wrapper.find(TextEditor);
+        expect(textEditor.props().className).toEqual(classes);
+      });
+    });
+  });
+
+  describe('if column.editorStyle is defined', () => {
+    let columnWithEditorStyle;
+    const style = { color: 'red' };
+
+    describe('and it is a function', () => {
+      beforeEach(() => {
+        columnWithEditorStyle = {
+          ...column,
+          editorStyle: jest.fn(() => style)
+        };
+        wrapper = shallow(
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ columnWithEditorStyle }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+          />
+        );
+      });
+
+      it('should render TextEditor with correct props', () => {
+        const textEditor = wrapper.find(TextEditor);
+        expect(textEditor.props().style).toEqual(style);
+      });
+
+      it('should call column.editorStyle correctly', () => {
+        expect(columnWithEditorStyle.editorStyle).toHaveBeenCalledTimes(1);
+        expect(columnWithEditorStyle.editorStyle).toHaveBeenCalledWith(
+          _.get(row, column.dataField),
+          row,
+          rowIndex,
+          columnIndex
+        );
+      });
+    });
+
+    describe('and it is an object', () => {
+      beforeEach(() => {
+        columnWithEditorStyle = {
+          ...column,
+          editorStyle: style
+        };
+        wrapper = shallow(
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ columnWithEditorStyle }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+          />
+        );
+      });
+
+      it('should render TextEditor with correct props', () => {
+        const textEditor = wrapper.find(TextEditor);
+        expect(textEditor.props().style).toEqual(style);
+      });
+    });
+  });
+
+  describe('if blurToSave prop is true', () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <TableRowWrapper>
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ column }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+            blurToSave
+          />
+        </TableRowWrapper>
+      );
+    });
+
+    it('when blur from TextEditor should call onUpdate correctly', () => {
+      const textEditor = wrapper.find(TextEditor);
+      textEditor.simulate('blur');
+      expect(onUpdate.callCount).toBe(1);
+      expect(onUpdate.calledWith(row, column, `${row[column.dataField]}`)).toBe(true);
+    });
+  });
+
+  describe('when column.validator is defined', () => {
+    let newValue;
+    let validForm;
+    let validatorCallBack;
+
+    describe('and column.validator return an object', () => {
+      beforeEach(() => {
+        newValue = 'newValue';
+        validForm = { valid: false, message: 'Something is invalid' };
+        validatorCallBack = sinon.stub().returns(validForm);
+        column = {
+          dataField: 'id',
+          text: 'ID',
+          validator: validatorCallBack
+        };
+        wrapper = mount(
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ column }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+          />
+        );
+        wrapper.instance().beforeComplete(newValue);
+      });
+
+      it('should call column.validator successfully', () => {
+        expect(validatorCallBack.callCount).toBe(1);
+        expect(validatorCallBack.calledWith(newValue, row, column)).toBe(true);
+      });
+
+      it('should not call onUpdate', () => {
+        expect(onUpdate.callCount).toBe(0);
+      });
+
+      it('should set indicatorTimer successfully', () => {
+        expect(wrapper.instance().indicatorTimer).toBeDefined();
+      });
+
+      it('should set invalidMessage state correctly', () => {
+        expect(wrapper.state().invalidMessage).toEqual(validForm.message);
+      });
+
+      it('should render TextEditor with correct shake and animated class', () => {
+        const editor = wrapper.find(TextEditor);
+        expect(editor.html()).toEqual('<input type="text" class="form-control editor edit-text animated shake">');
+        /* Following is better, but it will not work after upgrade React to 16 and enzyme... */
+        // expect(editor.length).toEqual(1);
+        // expect(editor.props().classNames).toEqual('animated shake');
+      });
+
+      /* Following is better, but it will not work after upgrade React to 16 and enzyme... */
+      xit('should render EditorIndicator correctly', () => {
+        const indicator = wrapper.find(EditorIndicator);
+        expect(indicator.length).toEqual(1);
+        expect(indicator.props().invalidMessage).toEqual(validForm.message);
+      });
+    });
+
+    describe('and column.validator return true or something', () => {
+      beforeEach(() => {
+        newValue = 'newValue';
+        validForm = true;
+        validatorCallBack = sinon.stub().returns(validForm);
+        column = {
+          dataField: 'id',
+          text: 'ID',
+          validator: validatorCallBack
+        };
+        wrapper = mount(
+          <EditingCell
+            row={ row }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            column={ column }
+            onUpdate={ onUpdate }
+            onEscape={ onEscape }
+          />
+        );
+        wrapper.instance().beforeComplete(newValue);
+      });
+
+      it('should call column.validator successfully', () => {
+        expect(validatorCallBack.callCount).toBe(1);
+        expect(validatorCallBack.calledWith(newValue, row, column)).toBe(true);
+      });
+
+      it('should call onUpdate', () => {
+        expect(onUpdate.callCount).toBe(1);
+      });
+    });
+  });
+
+  describe('if column.editorRenderer is defined', () => {
+    const TestEditor = () => <input type="text" />;
+
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editorRenderer: sinon.stub().returns(<TestEditor />)
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should call column.editorRenderer correctly', () => {
+      expect(column.editorRenderer.callCount).toBe(1);
+    });
+
+    it('should render correctly', () => {
+      expect(wrapper.find(TestEditor)).toHaveLength(1);
+    });
+  });
+
+  describe('if column.editor is select', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.SELECT,
+          options: [{
+            value: 1,
+            label: 'A'
+          }]
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render dropdown editor successfully', () => {
+      const editor = wrapper.find(DropDownEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+      expect(editor.props().options).toEqual(column.editor.options);
+    });
+  });
+
+  describe('if column.editor is textarea', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.TEXTAREA
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render textarea editor successfully', () => {
+      const editor = wrapper.find(TextAreaEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+    });
+  });
+
+  describe('if column.editor is checkbox', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.CHECKBOX
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render checkbox editor successfully', () => {
+      const editor = wrapper.find(CheckBoxEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+    });
+  });
+
+  describe('if column.editor is date', () => {
+    beforeEach(() => {
+      column = {
+        dataField: 'id',
+        text: 'ID',
+        editor: {
+          type: constants.EDITTYPE.DATE
+        }
+      };
+
+      wrapper = mount(
+        <EditingCell
+          row={ row }
+          rowIndex={ rowIndex }
+          columnIndex={ columnIndex }
+          column={ column }
+          onUpdate={ onUpdate }
+          onEscape={ onEscape }
+        />
+      );
+    });
+
+    it('should render date editor successfully', () => {
+      const editor = wrapper.find(DateEditor);
+      expect(wrapper.length).toBe(1);
+      expect(editor.length).toBe(1);
+    });
+  });
+});

packages/react-bootstrap-table2-editor/test/row-consumer.test.js

@@ -0,0 +1,138 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount } from 'enzyme';
+import _ from 'react-bootstrap-table-next/src/utils';
+import op from 'react-bootstrap-table-next/src/store/operators';
+
+import cellEditFactory from '..';
+import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT, DELAY_FOR_DBCLICK } from '../src/const';
+import createCellEditContext from '../src/context';
+import withRowLevelCellEdit from '../src/row-consumer';
+
+describe('Row Consumer', () => {
+  let wrapper;
+  let cellEdit;
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+  const row = { id: 1, name: 'A' };
+  const keyField = 'id';
+  const value = _.get(row, keyField);
+
+  const { Provider } = createCellEditContext(_, op, false, jest.fn());
+  const BaseComponent = () => null;
+
+  describe('if cellEdit.nonEditableRows is undefined', () => {
+    beforeEach(() => {
+      const WithCellEditComponent = withRowLevelCellEdit(
+        props => <BaseComponent { ...props } />,
+        false
+      );
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent value={ value } />
+        </Provider>
+      );
+    });
+
+    it('should inject correct props to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toBeNull();
+      expect(wrapper.find(BaseComponent).prop('editingColIdx')).toBeNull();
+      expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
+    });
+  });
+
+  describe('if cellEdit.nonEditableRows is defined', () => {
+    const nonEditableRows = jest.fn().mockReturnValue([value]);
+    describe('if value prop is match in one of cellEdit.nonEditableRows', () => {
+      beforeEach(() => {
+        const WithCellEditComponent = withRowLevelCellEdit(
+          props => <BaseComponent { ...props } />,
+          false
+        );
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent value={ value } />
+          </Provider>
+        );
+      });
+
+      it('should inject correct editable prop as false to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+      });
+    });
+
+    describe('if value prop is not match in one of cellEdit.nonEditableRows', () => {
+      beforeEach(() => {
+        const WithCellEditComponent = withRowLevelCellEdit(
+          props => <BaseComponent { ...props } />,
+          false
+        );
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent value={ 2 } />
+          </Provider>
+        );
+      });
+
+      it('should inject correct editable prop as false to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
+      });
+    });
+  });
+
+  describe(`if selectRowEnabled argument is true and cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
+    beforeEach(() => {
+      const WithCellEditComponent = withRowLevelCellEdit(
+        props => <BaseComponent { ...props } />,
+        true
+      );
+      cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent value={ value } />
+        </Provider>
+      );
+    });
+
+    it('should inject correct DELAY_FOR_DBCLICK prop to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('DELAY_FOR_DBCLICK')).toEqual(DELAY_FOR_DBCLICK);
+    });
+  });
+
+  describe('if cellEdit.ridx and cellEdit.cidx are defined', () => {
+    const ridx = 0;
+    const cidx = 1;
+    beforeEach(() => {
+      const WithCellEditComponent = withRowLevelCellEdit(
+        props => <BaseComponent { ...props } />,
+        false
+      );
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent value={ value } />
+        </Provider>
+      );
+      wrapper.instance().startEditing(ridx, cidx);
+      wrapper.update();
+    });
+
+    it('should inject correct editable prop as false to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toEqual(ridx);
+      expect(wrapper.find(BaseComponent).prop('editingColIdx')).toEqual(cidx);
+    });
+  });
+});

packages/react-bootstrap-table2-editor/test/text-editor.test.js

@@ -2,7 +2,7 @@ import 'jsdom-global/register';
 import React from 'react';
 import { mount } from 'enzyme';
 
-import TextEditor from '../../src/cell-edit/text-editor';
+import TextEditor from '../src/text-editor';
 
 describe('TextEditor', () => {
   let wrapper;

packages/react-bootstrap-table2-example/.storybook/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["react", "es2015", "stage-0", ["env", {"modules": false} ]],
+  "plugins": ["transform-class-properties"]
+}

packages/react-bootstrap-table2-example/.storybook/preview-head.html

@@ -1,2 +1,2 @@
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
- 
+<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> -->

packages/react-bootstrap-table2-example/.storybook/webpack.config.js

@@ -1,11 +1,14 @@
 const path = require('path');
 
-const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
-const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/src');
-const overlaySourcePath = path.join(__dirname, '../../react-bootstrap-table2-overlay/src');
-const filterSourcePath = path.join(__dirname, '../../react-bootstrap-table2-filter/src');
+const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/index.js');
+const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/index.js');
+const overlaySourcePath = path.join(__dirname, '../../react-bootstrap-table2-overlay/index.js');
+const filterSourcePath = path.join(__dirname, '../../react-bootstrap-table2-filter/index.js');
+const editorSourcePath = path.join(__dirname, '../../react-bootstrap-table2-editor/index.js');
 const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
+const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
+const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -15,6 +18,13 @@ const aliasPath = {
   src: srcPath,
   components: path.join(srcPath, 'components'),
   utils: path.join(srcPath, 'utils'),
+
+  'react-bootstrap-table-next': sourcePath,
+  'react-bootstrap-table2-editor': editorSourcePath,
+  'react-bootstrap-table2-filter': filterSourcePath,
+  'react-bootstrap-table2-overlay': overlaySourcePath,
+  'react-bootstrap-table2-paginator': paginationSourcePath,
+  'react-bootstrap-table2-toolkit': toolkitSourcePath
 };
 
 const loaders = [{
@@ -26,15 +36,14 @@ const loaders = [{
 }, {
   test: /\.js?$/,
   use: ['babel-loader'],
-  exclude: /node_modules/,
-  include: [sourcePath, paginationSourcePath, overlaySourcePath, filterSourcePath, storyPath],
+  exclude: /node_modules/
 }, {
   test: /\.css$/,
   use: ['style-loader', 'css-loader'],
 }, {
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath, paginationStylePath],
+  include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
 }, {
   test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader?limit=100000',

packages/react-bootstrap-table2-example/examples/basic/borderless-table.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +18,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable
   keyField="id"
   data={ products }

packages/react-bootstrap-table2-example/examples/basic/caption-table.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +18,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <h4> Customized table ID </h4>
+    <BootstrapTable id="bar" keyField="id" data={ products } columns={ columns } />
+
+    <h4> Customized table className </h4>
+    <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
+
+    <h4> Customized wrapper className </h4>
+    <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
+
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/basic/exposed-function.js

@@ -0,0 +1,182 @@
+/* eslint no-return-assign: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(63);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>.....</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/basic/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +18,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

packages/react-bootstrap-table2-example/examples/basic/large-table.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(3000);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  showExpandColumn: true,
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ { mode: 'checkbox', clickToSelect: true } }
+      expandRow={ expandRow }
+    />
+  </div>
+);

packages/react-bootstrap-table2-example/examples/basic/no-data-table.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 
 const columns = [{
@@ -15,9 +15,12 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable keyField='id' data={ [] } columns={ columns } noDataIndication="Table is Empty" />
 
-// Following is more customizable example
+// Following is a more flexible example
 
 function indication() {
   // return something here

packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +18,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable
   keyField="id"
   data={ products }

packages/react-bootstrap-table2-example/examples/basic/tabindex-column.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ { mode: 'checkbox' } }
+  tabIndexCell
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ { mode: 'checkbox' } }
+      tabIndexCell
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/bootstrap4/pagination.js

@@ -0,0 +1,45 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable bootstrap4 keyField='id' data={ products } columns={ columns } pagination={ paginationFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } pagination={ paginationFactory() } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/bootstrap4/row-selection.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true
+};
+
+<BootstrapTable
+  bootstrap4
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/bootstrap4/sort.js

@@ -0,0 +1,70 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true
+}];
+
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true
+}];
+
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+<BootstrapTable
+  bootstrap4
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  defaultSorted={ defaultSorted } 
+/>
+`;
+
+
+export default class extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        <BootstrapTable bootstrap4 keyField="id" data={ products } columns={ columns } defaultSorted={ defaultSorted } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/cell-edit/auto-select-text-input-table.js

@@ -0,0 +1,78 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={
+    cellEditFactory({
+      mode: 'click',
+      autoSelectText: true
+    })
+  }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Auto Select Text Input Field When Editing</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={
+        cellEditFactory({
+          mode: 'click',
+          autoSelectText: true
+        })
+      }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/blur-to-save-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +19,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -29,26 +33,28 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true
+  }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        blurToSave: true
+      }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-hooks-table.js

@@ -0,0 +1,86 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-console: 0 */
+/* eslint no-alert: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+function beforeSaveCell(oldValue, newValue, row, column, done) {
+  setTimeout(() => {
+    if (confirm('Do you want to accep this change?')) {
+      done(true);
+    } else {
+      done(false);
+    }
+  }, 0);
+  return { async: true };
+}
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    beforeSaveCell
+  }) }
+/>
+`;
+
+function beforeSaveCell(oldValue, newValue, row, column, done) {
+  setTimeout(() => {
+    if (confirm('Do you want to accep this change?')) {
+      done(true);
+    } else {
+      done(false);
+    }
+  }, 0);
+  return { async: true };
+}
+
+export default () => (
+  <div>
+    <h2>You will get a confirm prompt when you try to save a cell</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        beforeSaveCell
+      }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-async-validator-table.js

@@ -0,0 +1,101 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  validator: (newValue, row, column, done) => {
+    setTimeout(() => {
+      if (isNaN(newValue)) {
+        return done({
+          valid: false,
+          message: 'Price should be numeric'
+        });
+      }
+      if (newValue < 2000) {
+        return done({
+          valid: false,
+          message: 'Price should bigger than 2000'
+        });
+      }
+      return done();
+    }, 2000);
+    return {
+      async: true
+    };
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  validator: (newValue, row, column, done) => {
+    setTimeout(() => {
+      if (isNaN(newValue)) {
+        return done({
+          valid: false,
+          message: 'Price should be numeric'
+        });
+      }
+      if (newValue < 2000) {
+        return done({
+          valid: false,
+          message: 'Price should bigger than 2000'
+        });
+      }
+      return done();
+    }, 2000);
+    return {
+      async: true
+    };
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true
+  }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Product Price should bigger than $2000</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        blurToSave: true
+      }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-class-table.js

@@ -1,7 +1,8 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -22,6 +23,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -36,24 +40,22 @@ const columns = [{
     (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
 }];
 
-const cellEdit = {
-  mode: 'click'
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click'
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-hooks-table.js

@@ -2,7 +2,8 @@
 /* eslint no-console: 0 */
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -20,6 +21,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -31,28 +35,32 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const cellEdit = {
-  mode: 'click',
-  beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
-  afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('start to edit!!!'); },
+    beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+    afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+  }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click',
-  beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
-  afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('Start to edit!!!'); },
+        beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+        afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+      }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-style-table.js

@@ -1,7 +1,8 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -26,6 +27,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -44,24 +48,22 @@ const columns = [{
   }
 }];
 
-const cellEdit = {
-  mode: 'click'
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click'
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-validator-table.js

@@ -1,6 +1,7 @@
-import React from 'react';
 /* eslint no-unused-vars: 0 */
-import BootstrapTable from 'react-bootstrap-table2';
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -33,6 +34,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -59,27 +63,29 @@ const columns = [{
   }
 }];
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true
+  }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
 export default () => (
   <div>
     <h3>Product Price should bigger than $2000</h3>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        blurToSave: true
+      }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-promise-table.js

@@ -1,75 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint arrow-body-style: 0 */
-import React, { Component } from 'react';
-
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator, sleep } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const sourceCode = `\
-class CellEditWithPromise extends Component {
-  handleCellEditing = (rowId, dataField, newValue) => {
-    return sleep(1000).then(() => {
-      if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
-        throw new Error('Product Price should bigger than $2000');
-      }
-    });
-  }
-
-  render() {
-    const cellEdit = {
-      mode: 'click',
-      blurToSave: true,
-      onUpdate: this.handleCellEditing
-    };
-
-    return (
-      <div>
-        <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}
-`;
-
-class CellEditWithPromise extends Component {
-  handleCellEditing = (rowId, dataField, newValue) => {
-    return sleep(1000).then(() => {
-      if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
-        throw new Error('Product Price should bigger than $2000');
-      }
-    });
-  }
-
-  render() {
-    const cellEdit = {
-      mode: 'click',
-      blurToSave: true,
-      onUpdate: this.handleCellEditing
-    };
-
-    return (
-      <div>
-        <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}
-
-export default CellEditWithPromise;
-

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-redux-table.js

@@ -1,212 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint react/prop-types: 0 */
-/* eslint arrow-body-style: 0 */
-/* eslint consistent-return: 0 */
-/* eslint no-class-assign: 0 */
-import React, { Component } from 'react';
-import thunk from 'redux-thunk';
-import { Provider, connect } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
-import BootstrapTable from 'react-bootstrap-table2';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const sourceCode = `\
-/////////////////////// Action Creator ///////////////////////
-const setErrorMessage = (errorMessage = null) => {
-  return { type: 'SET_ERR_MESSAGE', errorMessage };
-};
-
-// Async Action, using redux-thunk
-const cellEditingAsync = (rowId, dataField, newValue) => {
-  return (dispatch) => {
-    setTimeout(() => {
-      if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
-        dispatch(setErrorMessage('Product Price should bigger than $2000'));
-      } else {
-        dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue });
-      }
-    }, 1200);
-  };
-};
-
-/////////////////////// Component ///////////////////////
-class CellEditWithRedux extends Component {
-  // dispatch a async action
-  handleCellEditing = (rowId, dataField, newValue) => {
-    this.props.dispatch(cellEditingAsync(rowId, dataField, newValue));
-    return false;
-  }
-
-  handleErrorMsgDisappear = () => {
-    this.props.dispatch(setErrorMessage());
-  }
-
-  render() {
-    const cellEdit = {
-      mode: 'click',
-      editing: this.props.cellEditing,
-      errorMessage: this.props.errorMessage,
-      onUpdate: this.handleCellEditing,
-      onErrorMessageDisappear: this.handleErrorMsgDisappear
-    };
-
-    return (
-      <div>
-        <BootstrapTable keyField="id" data={ this.props.data } columns={ columns } cellEdit={ cellEdit } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}
-// connect
-CellEditWithRedux = connect(state => state)(CellEditWithRedux);
-
-/////////////////////// Reducer ///////////////////////
-// initial state object and simple reducers
-const initialState = {
-  data: productsGenerator(),
-  cellEditing: false,
-  errorMessage: null
-};
-
-const reducers = (state, action) => {
-  switch (action.type) {
-    case 'ADD_SUCCESS': {
-      const { rowId, dataField, newValue } = action;
-      const data = [...state.data];
-      const rowIndex = data.findIndex(r => r.id === rowId);
-      data[rowIndex][dataField] = newValue;
-      return {
-        data,
-        cellEditing: false,
-        errorMessage: null
-      };
-    }
-    case 'SET_ERR_MESSAGE': {
-      const { errorMessage } = action;
-      return {
-        ...state,
-        cellEditing: true,
-        errorMessage
-      };
-    }
-    default: {
-      return { ...state };
-    }
-  }
-};
-
-/////////////////////// Index ///////////////////////
-const store = createStore(reducers, initialState, applyMiddleware(thunk));
-
-const Index = () => (
-  <Provider store={store}>
-    <CellEditWithRedux />
-  </Provider>
-);
-`;
-
-const setErrorMessage = (errorMessage = null) => {
-  return { type: 'SET_ERR_MESSAGE', errorMessage };
-};
-
-// Async Action, using redux-thunk
-const cellEditingAsync = (rowId, dataField, newValue) => {
-  return (dispatch) => {
-    setTimeout(() => {
-      if (dataField === 'price' && (newValue < 2000 || isNaN(newValue))) {
-        dispatch(setErrorMessage('Product Price should bigger than $2000'));
-      } else {
-        dispatch({ type: 'ADD_SUCCESS', rowId, dataField, newValue });
-      }
-    }, 1200);
-  };
-};
-
-class CellEditWithRedux extends Component {
-  // dispatch a async action
-  handleCellEditing = (rowId, dataField, newValue) => {
-    this.props.dispatch(cellEditingAsync(rowId, dataField, newValue));
-    return false;
-  }
-
-  handleErrorMsgDisappear = () => {
-    this.props.dispatch(setErrorMessage());
-  }
-
-  render() {
-    const cellEdit = {
-      mode: 'click',
-      editing: this.props.cellEditing,
-      errorMessage: this.props.errorMessage,
-      onUpdate: this.handleCellEditing,
-      onErrorMessageDisappear: this.handleErrorMsgDisappear
-    };
-
-    return (
-      <div>
-        <BootstrapTable keyField="id" data={ this.props.data } columns={ columns } cellEdit={ cellEdit } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}
-// connect
-CellEditWithRedux = connect(state => state)(CellEditWithRedux);
-
-// initial state object and simple reducers
-const initialState = {
-  data: productsGenerator(),
-  cellEditing: false,
-  errorMessage: null
-};
-
-const reducers = (state, action) => {
-  switch (action.type) {
-    case 'ADD_SUCCESS': {
-      const { rowId, dataField, newValue } = action;
-      const data = JSON.parse(JSON.stringify(state.data));
-      const rowIndex = data.findIndex(r => r.id === rowId);
-      data[rowIndex][dataField] = newValue;
-      return {
-        data,
-        cellEditing: false,
-        errorMessage: null
-      };
-    }
-    case 'SET_ERR_MESSAGE': {
-      const { errorMessage } = action;
-      return {
-        ...state,
-        cellEditing: true,
-        errorMessage
-      };
-    }
-    default: {
-      return { ...state };
-    }
-  }
-};
-
-const store = createStore(reducers, initialState, applyMiddleware(thunk));
-
-const Index = () => (
-  <Provider store={ store }>
-    <CellEditWithRedux />
-  </Provider>
-);
-
-export default Index;
-

packages/react-bootstrap-table2-example/examples/cell-edit/cell-level-editable-table.js

@@ -1,7 +1,8 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -20,6 +21,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -32,24 +36,23 @@ const columns = [{
   editable: (content, row, rowIndex, columnIndex) => content > 2101
 }];
 
-const cellEdit = {
-  mode: 'click'
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click'
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <h3>Only Product Price is bigger than 2101 is editable</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/checkbox-editor-table.js

@@ -0,0 +1,64 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { todosGenerator } from 'utils/common';
+
+const todos = todosGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Todo ID'
+}, {
+  dataField: 'todo',
+  text: 'Todo Name'
+}, {
+  dataField: 'done',
+  text: 'Done',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'Y:N'
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Todo ID'
+}, {
+  dataField: 'todo',
+  text: 'Todo Name'
+}, {
+  dataField: 'done',
+  text: 'Done',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'Y:N'
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ todos }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Checkbox Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ todos }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/click-to-edit-table.js

@@ -1,6 +1,8 @@
+/* eslint react/prefer-stateless-function: 0 */
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +20,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -29,24 +34,23 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const cellEdit = {
-  mode: 'click'
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click'
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <h3>Click to edit cell</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/column-level-editable-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -19,6 +20,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -32,26 +36,29 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true
+  }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <h3>Product Name is non editable</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        blurToSave: true
+      }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js

@@ -0,0 +1,130 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint no-return-assign: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator();
+
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Custom Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js

@@ -0,0 +1,77 @@
+/* eslint prefer-template: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'ID'
+}, {
+  dataField: 'name',
+  text: 'Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'ID'
+}, {
+  dataField: 'name',
+  text: 'Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return \`$\{('0' + dateObj.getDate()).slice(-2)}/$\{('0' + (dateObj.getMonth() + 1)).slice(-2)}/$\{dateObj.getFullYear()}\`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Date Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +19,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -29,24 +33,23 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const cellEdit = {
-  mode: 'dbclick'
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'dbclick'
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <h3>Double click to edit cell</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/dbclick-to-edit-with-selection-table.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: true
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: true
+};
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+  cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Double click to edit cell</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ selectRow }
+      cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-table.js

@@ -0,0 +1,100 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    options: [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    options: [{
+      value: 'A',
+      label: 'A'
+    }, {
+      value: 'B',
+      label: 'B'
+    }, {
+      value: 'C',
+      label: 'C'
+    }, {
+      value: 'D',
+      label: 'D'
+    }, {
+      value: 'E',
+      label: 'E'
+    }]
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/editor-class-table.js

@@ -0,0 +1,61 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  editorClasses: 'editing-name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editorClasses: (cell, row, rowIndex, colIndex) =>
+    (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  editorClasses: 'editing-name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editorClasses: (cell, row, rowIndex, colIndex) =>
+    (cell > 2101 ? 'editing-price-bigger-than-2101' : 'editing-price-small-than-2101')
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/editor-style-table.js

@@ -0,0 +1,69 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  editorStyle: {
+    backgroundColor: '#20B2AA'
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editorStyle: (cell, row, rowIndex, colIndex) => {
+    const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF';
+    return { backgroundColor };
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  editorStyle: {
+    backgroundColor: '#20B2AA'
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editorStyle: (cell, row, rowIndex, colIndex) => {
+    const backgroundColor = cell > 2101 ? '#00BFFF' : '#00FFFF';
+    return { backgroundColor };
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/cell-edit/row-level-editable-table.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,6 +19,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -29,29 +33,30 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true,
-  // Product ID: 0, 3 will be non-editable
-  nonEditableRows: () => [0, 3]
-};
-
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true,
+    nonEditableRows: () => [0, 3]
+  }) }
 />
 `;
-
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true,
-  nonEditableRows: () => [0, 3]
-};
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <h3>Product ID: 0, 3 is non editable</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        blurToSave: true,
+        nonEditableRows: () => [0, 3]
+      }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/cell-edit/textarea-editor-table.js

@@ -0,0 +1,68 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Textarea Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/advance-custom-filter.js

@@ -0,0 +1,184 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter, Comparator, FILTER_TYPES } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.state = { value: 2100 };
+  }
+  onChange(e) {
+    this.setState({ value: e.target.value });
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  filter() {
+    this.props.onFilter({
+      number: this.getValue(),
+      comparator: this.select.value
+    });
+  }
+  render() {
+    return [
+      <input
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="2100"
+        max="2110"
+        onChange={ this.onChange }
+      />,
+      <p
+        key="show"
+        ref={ node => this.showValue = node }
+        style={ { textAlign: 'center' } }
+      >
+        { this.state.value }
+      </p>,
+      <select
+        key="select"
+        ref={ node => this.select = node }
+        className="form-control"
+      >
+        <option value={ Comparator.GT }>&gt;</option>
+        <option value={ Comparator.EQ }>=</option>
+        <option value={ Comparator.LT }>&lt;</option>
+      </select>,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { `Filter ${this.props.column.text}` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter({
+    type: FILTER_TYPES.NUMBER // ask react-bootstrap-table to filter data as number 
+  }),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter, Comparator, FILTER_TYPES } from 'react-bootstrap-table2-filter';
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.state = { value: 2100 };
+  }
+  onChange(e) {
+    this.setState({ value: e.target.value });
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  filter() {
+    this.props.onFilter({
+      number: this.getValue(),
+      comparator: this.select.value
+    });
+  }
+  render() {
+    return [
+      <input
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="2100"
+        max="2110"
+        onChange={ this.onChange }
+      />,
+      <p
+        key="show"
+        ref={ node => this.showValue = node }
+        style={ { textAlign: 'center' } }
+      >
+        { this.state.value }
+      </p>,
+      <select
+        key="select"
+        ref={ node => this.select = node }
+        className="form-control"
+      >
+        <option value={ Comparator.GT }>&gt;</option>
+        <option value={ Comparator.EQ }>=</option>
+        <option value={ Comparator.LT }>&lt;</option>
+      </select>,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { \`Filter $\{this.props.column.text}\` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter({
+    type: FILTER_TYPES.NUMBER // ask react-bootstrap-table to filter data as number 
+  }),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const products = stockGenerator(8);
+
+let nameFilter;
+let priceFilter;
+let stockDateFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilter: (filter) => {
+      nameFilter = filter;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Price',
+  filter: textFilter({
+    getFilter: (filter) => {
+      priceFilter = filter;
+    }
+  })
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter({
+    getFilter: (filter) => {
+      stockDateFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  nameFilter('');
+  priceFilter('');
+  stockDateFilter();
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
+
+let nameFilter;
+let priceFilter;
+let stockDateFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilter: (filter) => {
+      nameFilter = filter;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Price',
+  filter: textFilter({
+    getFilter: (filter) => {
+      priceFilter = filter;
+    }
+  })
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter({
+    getFilter: (filter) => {
+      stockDateFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  nameFilter('');
+  priceFilter('');
+  stockDateFilter();
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> Clear all filters </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> Clear all filters </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/custom-date-filter.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter({
+    delay: 400,
+    placeholder: 'custom placeholder',
+    withoutEmptyComparatorOption: true,
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+    style: { display: 'inline-grid' },
+    className: 'custom-datefilter-class',
+    comparatorStyle: { backgroundColor: 'antiquewhite' },
+    comparatorClassName: 'custom-comparator-class',
+    dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+    dateClassName: 'custom-date-class'
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    delay: 400,
+    placeholder: 'custom placeholder',
+    withoutEmptyComparatorOption: true,
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+    style: { display: 'inline-grid' },
+    className: 'custom-datefilter-class',
+    comparatorStyle: { backgroundColor: 'antiquewhite' },
+    comparatorClassName: 'custom-comparator-class',
+    dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+    dateClassName: 'custom-date-class'
+  })
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  filter={ filterFactory() }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js

@@ -0,0 +1,81 @@
+/* eslint eqeqeq: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+  filterByPrice = filterVal =>
+    products.filter(product => product.price == filterVal);
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    }, {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter({
+        onFilter: this.filterByPrice
+      })
+    }];
+
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+      </div>
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  filterByPrice = filterVal =>
+    products.filter(product => product.price == filterVal);
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    }, {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter({
+        onFilter: this.filterByPrice
+      })
+    }];
+
+    return (
+      <div>
+        <h2>Implement a eq filter on product price column</h2>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-value.js

@@ -1,11 +1,11 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
-import { jobsGenerator } from 'utils/common';
+import { jobsGenerator1 } from 'utils/common';
 
-const jobs = jobsGenerator(5);
+const jobs = jobsGenerator1(5);
 
 const owners = ['Allen', 'Bob', 'Cat'];
 const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
@@ -32,6 +32,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const owners = ['Allen', 'Bob', 'Cat'];

packages/react-bootstrap-table2-example/examples/column-filter/custom-filter.js

@@ -0,0 +1,128 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+  }
+  getValue() {
+    return this.input.value;
+  }
+  filter() {
+    this.props.onFilter(this.getValue());
+  }
+  render() {
+    return [
+      <input
+        key="input"
+        ref={ node => this.input = node }
+        type="text"
+        placeholder="Input price"
+      />,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { `Find ${this.props.column.text}` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter(),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter, customFilter } from 'react-bootstrap-table2-filter';
+
+class PriceFilter extends React.Component {
+  static propTypes = {
+    column: PropTypes.object.isRequired,
+    onFilter: PropTypes.func.isRequired
+  }
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.getValue = this.getValue.bind(this);
+  }
+  getValue() {
+    return this.input.value;
+  }
+  filter() {
+    this.props.onFilter(this.getValue());
+  }
+  render() {
+    return [
+      <input
+        key="input"
+        ref={ node => this.input = node }
+        type="text"
+        placeholder="Input price"
+      />,
+      <button
+        key="submit"
+        className="btn btn-warning"
+        onClick={ this.filter }
+      >
+        { \`Filter $\{this.props.column.text}\` }
+      </button>
+    ];
+  }
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: customFilter(),
+  filterRenderer: (onFilter, column) =>
+    <PriceFilter onFilter={ onFilter } column={ column } />
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/custom-multi-select-filter.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    withoutEmptyOption: true,
+    style: {
+      backgroundColor: 'pink'
+    },
+    className: 'test-classname',
+    datamycustomattr: 'datamycustomattr'
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    withoutEmptyOption: true,
+    style: {
+      backgroundColor: 'pink'
+    },
+    className: 'test-classname',
+    datamycustomattr: 'datamycustomattr'
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/custom-number-filter.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, 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'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    options: [2100, 2103, 2105],
+    delay: 600,
+    placeholder: 'custom placeholder',
+    withoutEmptyComparatorOption: true,
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+    style: { display: 'inline-grid' },
+    className: 'custom-numberfilter-class',
+    comparatorStyle: { backgroundColor: 'antiquewhite' },
+    comparatorClassName: 'custom-comparator-class',
+    numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+    numberClassName: 'custom-number-class'
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    options: [2100, 2103, 2105],
+    delay: 600,
+    placeholder: 'custom placeholder',
+    withoutEmptyComparatorOption: true,
+    comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+    style: { display: 'inline-grid' },
+    className: 'custom-numberfilter-class',
+    comparatorStyle: { backgroundColor: 'antiquewhite' },
+    comparatorClassName: 'custom-comparator-class',
+    numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+    numberClassName: 'custom-number-class'
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/custom-select-filter.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    withoutEmptyOption: true,
+    style: {
+      backgroundColor: 'pink'
+    },
+    className: 'test-classname',
+    datamycustomattr: 'datamycustomattr'
+  })
+}];
+
+const sourceCode = `\
+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: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    withoutEmptyOption: true,
+    style: {
+      backgroundColor: 'pink'
+    },
+    className: 'test-classname',
+    datamycustomattr: 'datamycustomattr'
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/custom-text-filter.js

@@ -1,6 +1,6 @@
 /* eslint no-console: 0 */
 import React from 'react';
-import BootstrapTable from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
@@ -29,6 +29,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{

packages/react-bootstrap-table2-example/examples/column-filter/date-filter-default-value.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter({
+    defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
+  })
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  filter={ filterFactory() }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/date-filter.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter()
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ stocks }
+  columns={ columns }
+  filter={ filterFactory() }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js

@@ -0,0 +1,57 @@
+/* eslint no-console: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { 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({
+    onFilter: filterVal => console.log(`Filter Value: ${filterVal}`)
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter({
+    onFilter: filterVal => console.log(\`Filter Value: $\{filterVal}\`)
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter-default-value.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    defaultValue: [0, 2]
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    defaultValue: [0, 2]
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/multi-select-filter.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/number-filter-default-value.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, 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'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    defaultValue: { number: 2103, comparator: Comparator.GT }
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    defaultValue: { number: 2103, comparator: Comparator.GT }
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/number-filter.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter } 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'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-date-filter.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const stocks = stockGenerator(8);
+
+let inStockDateFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  formatter: cell => cell.toString(),
+  filter: dateFilter({
+    getFilter: (filter) => {
+      // inStockDateFilter was assigned once the component has been mounted.
+      inStockDateFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  inStockDateFilter({
+    date: new Date(2018, 0, 1),
+    comparator: Comparator.GT
+  });
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { dateFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+let inStockDateFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'inStockDate',
+  text: 'InStock Date',
+  filter: dateFilter({
+    getFilter: (filter) => {
+      // inStockDateFilter was assigned once the component has been mounted.
+      inStockDateFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  inStockDateFilter({
+    date: new Date(2018, 0, 1),
+    comparator: Comparator.GT
+  });
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter InStock Date columns which is greater than 2018.01.01 </button>
+
+    <BootstrapTable keyField='id' data={ stocks } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter InStock Date columns which is greater than 2018.01.01 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ stocks }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-multi-select-filter.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter([0, 2]);
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: multiSelectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter([0, 2]);
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" and "unknow" '}</button>
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" and "unknow" '}</button>
+
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-number-filter.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+let priceFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    getFilter: (filter) => {
+      // pricerFilter was assigned once the component has been mounted.
+      priceFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  priceFilter({
+    number: 2103,
+    comparator: Comparator.GT
+  });
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+
+let priceFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter({
+    getFilter: (filter) => {
+      // pricerFilter was assigned once the component has been mounted.
+      priceFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  priceFilter({
+    number: 2103,
+    comparator: Comparator.GT
+  });
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-select-filter.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter(0);
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+let qualityFilter;
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quality',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    getFilter: (filter) => {
+      // qualityFilter was assigned once the component has been mounted.
+      qualityFilter = filter;
+    }
+  })
+}];
+
+const handleClick = () => {
+  qualityFilter(0);
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
+
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/programmatically-text-filter.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+let nameFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilter: (filter) => {
+      // nameFilter was assigned once the component has been mounted.
+      nameFilter = filter;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const handleClick = () => {
+  nameFilter(0);
+};
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+let nameFilter;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter({
+    getFilter: (filter) => {
+      // nameFilter was assigned once the component has been mounted.
+      nameFilter = filter;
+    }
+  })
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const handleClick = () => {
+  nameFilter(0);
+};
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
+
+    <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+  </div>
+);
+`;
+
+export default () => (
+  <div>
+    <button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-default-value.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 2
+  })
+}];
+
+const sourceCode = `\
+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: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 2
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-like-comparator.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(6);
+
+const selectOptions = {
+  '03': '03',
+  '04': '04',
+  '01': '01'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: selectFilter({
+    options: selectOptions,
+    comparator: Comparator.LIKE // default is Comparator.EQ
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  '03': '03',
+  '04': '04',
+  '01': '01'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: selectFilter({
+    options: selectOptions,
+    comparator: Comparator.LIKE // default is Comparator.EQ
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3>Select Filter with LIKE Comparator</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js

@@ -0,0 +1,70 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3><code>selectFilter.options</code> accept an Array and we keep that order when rendering the options</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);