Publish

- react-bootstrap-table2-example@0.1.9
 - react-bootstrap-table2-filter@0.2.0
 - react-bootstrap-table2-overlay@0.1.2
 - react-bootstrap-table2-paginator@0.1.4
 - react-bootstrap-table-next@0.1.13

.eslintrc

@@ -11,7 +11,7 @@
   ],
   "rules": {
     "comma-dangle": ["error", "never"],
-    "react/jsx-curly-spacing": 0,
+    "react/jsx-curly-spacing": [2, "always"],
     "react/forbid-prop-types": 0,
     "react/jsx-filename-extension": 0,
     "react/jsx-space-before-closing": 0,

.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,12 +9,13 @@ 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
   - export PATH="$HOME/.yarn/bin:$PATH"
 
-install: yarn install --pure-lockfile --ignore-scripts
+install: yarn install

CONTRIBUTING.md

@@ -1,21 +1,23 @@
+# Contributing
+
 # Issues
-Before opening an issue, please make sure your problem/request doesn't exist. When you open issue, please provide the following information if possible:
+Before opening an issue, please make sure your problem or request doesn't exist. When opening an issue, please provide the following information if possible:
 
 * Example code or repo (please keep it simple and minimal)
-* Steps to reproduce
-* `react-bootstrap-table2` version
+* Steps to reproduce.
+* `react-bootstrap-table2` version.
 
-Anyway, you're welcome to open an issue to ask questions or discuss about a feature request.
+Additionally, asking questions and requesting new features are welcomed via [issue tracker](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues).
 
 # Pull Requests
 Check [here](./docs/development.md) for getting started with development.
 
-* When you want to implement a new feature, please let us know (via issues).
-* Please run tests before opening a PR and also remember to test the actual business logic.
-* If your PR is trying to fix a bug, please describe the bug number with hashtag when creating the PR.
+* 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.
 
 # For the members of react-bootstrap-table2 org
-
-* Please convert the ticket to issue when is ticket moved from `Backlog` to `Ready` in project.
-* Please write documentation if any new API/feature/props is changed or added.
-* Please add a story example if any new feature is implemented
+* Please convert the ticket to issue when the ticket has moved from `Backlog` to `Ready`.
+* Please update the docs if any API, feature or component props was changed or added. The code and docs should always be in sync.
+* Please add a story example if any new feature was implemented.

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,42 @@
 # react-bootstrap-table2
+[![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 [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
+> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it   
 
-## The feature may lost on react-bootstrap-table
-* Have a great chance that I don't support the vertical scrollbar on table
+`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)
+* [`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)
+
+This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP).
+
+## Migration
+If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./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).
+
+## Roadmap
+See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
+
+## Development
+Please check [development guide](./docs/development.md).
+
+## How should I run storybook example in my local?
+
+```sh
+$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+$ cd react-bootstrap-table2
+$ yarn install
+$ yarn storybook
+$ Go to localhost:6006
+```
+
+**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

@@ -1,6 +1,6 @@
-# Documents
+# Documentation
 
-## Props on BootstrapTable
+## BootstrapTable Props
 
 #### Required
 * [keyField (**required**)](#keyField)
@@ -8,63 +8,286 @@
 * [columns (**required**)](#columns)
 
 #### Optional
+* [remote](#remote)
+* [loading](#loading)
 * [caption](#caption)
 * [striped](#striped)
 * [bordered](#bordered)
 * [hover](#hover)
 * [condensed](#condensed)
+* [id](#id)
+* [classes](#classes)
+* [wrapperClasses](#wrapperClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
+* [rowStyle](#rowStyle)
+* [rowClasses](#rowClasses)
+* [rowEvents](#rowEvents)
+* [defaultSorted](#defaultSorted)
+* [defaultSortDirection](#defaultSortDirection)
+* [pagination](#pagination)
+* [filter](#filter)
+* [onTableChange](#onTableChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
-`keyField` is a prop to tell `react-bootstrap-table2` which column is unigue key.
+Tells `react-bootstrap-table2` which column is unique.
 
 ### <a name='data'>data(**required**) - [Array]</a>
-Assign your table data via `data` prop. It only accept an Array object.
+Provides data for your table. It accepts a single Array object.
 
 ### <a name='columns'>columns(**required**) - [Object]</a>
-`columns` props accept an Array object, please see [columns definition](./columns.md) for more detail.
+Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
+
+### <a name='remote'>remote - [Bool | Object]</a>
+Default is `false`, if enable`remote`, you are suppose to handle all the table change events, like: pagination, insert, filtering etc.
+This is a chance that you can connect to your remote server or database to manipulate your data.   
+For flexibility reason, you can control what functionality should be handled on remote via a object return:
+
+```js
+remote={ {
+  filter: true,
+  pagination: true,
+  filter: true,
+  sort: true,
+  cellEdit: true
+} }
+```
+
+In above case, only column filter will be handled on remote.
+
+> Note: when remote is enable, you are suppose to give [`onTableChange`](#onTableChange) prop on `BootstrapTable`
+> It's the only way to communicate to your remote server and update table states.
+
+A special case for remote pagination:
+```js
+remote={ { pagination: true, filter: false, sort: false } }
+```
+
+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='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-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 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-table2-overlay
+```
+```js
+import overlayFactory from 'react-bootstrap-table2-overlay';
+
+<BootstrapTable
+  data={ data }
+  columns={ columns }
+  loading={ true }  //only loading is true, react-bootstrap-table will render overlay
+  overlay={ overlayFactory() }
+/>
+```
+
+Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
+
+```js
+overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+```
 
 ### <a name='caption'>caption - [String | Node]</a>
-Same as [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp) in HTML. You can give a String or a React JSX.
+Same as HTML [caption tag](https://www.w3schools.com/TAgs/tag_caption.asp), you can set it as String or a React JSX.
 
 ### <a name='striped'>striped - [Bool]</a>
-Same as `.table-striped` class for adding zebra-stripes to a table
+Same as bootstrap `.table-striped` class for adding zebra-stripes to a table.
 ### <a name='bordered'>bordered - [Bool]</a>
-Same as `.table-bordered` class for adding borders on all sides of the table and cells
+Same as bootstrap `.table-bordered` class for adding borders to a table and table cells.
 ### <a name='hover'>hover - [Bool]</a>
-Same as `.table-hover` class for adding a hover effect (grey background color) on table rows
+Same as bootstrap `.table-hover` class for adding mouse hover effect (grey background color) on table rows.
 ### <a name='condensed'>condensed - [Bool]</a>
-Same as `.table-condensed` class for makeing a table more compact by cutting cell padding in half
+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='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='cellEdit'>cellEdit - [Object]</a>
-Assign a valid `cellEdit` object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press `ENTER` to save cell or press `ESC` to cancel editing.
-
-> Note: The `keyField` column can't be edited
-
-Following is a `cellEdit` object:
-```js
-{
-  mode: 'click',
-  blurToSave: true,
-  timeToCloseMessage: 2500,
-  onEditing: (rowId, dataField, newValue) => { ... },
-  beforeSaveCell: (oldValue, newValue, row, column) => { ... },
-  afterSaveCell: (oldValue, newValue, row, column) => { ... },
-  nonEditableRows: () => { ... }
-}
-```
-#### <a name='cellEdit.mode'>cellEdit.mode - [String]</a>
-`cellEdit.mode` possible value is `click` and `dbclick`. **It's required value** that tell `react-bootstrap-table2` how to trigger the cell editing.
-
-#### <a name='cellEdit.blurToSave'>cellEdit.blurToSave - [Bool]</a>
-Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
-
-#### <a name='cellEdit.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='cellEdit.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.
+Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 
 ### <a name='selectRow'>selectRow - [Object]</a>
-Pass prop `selectRow` to enable row selection. For more detail, please navigate to [row selection document](./row-selection.md).
+Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail.
+
+### <a name='rowStyle'>rowStyle = [Object | Function]</a>
+Custom the style of table rows:
+
+```js
+<BootstrapTable data={ data } columns={ columns } rowStyle={ { backgroundColor: 'red' } } />
+```
+
+This prop also accept a callback function for flexible to custom row style:
+
+```js
+const rowStyle = (row, rowIndex) => {
+  return { ... };
+};
+
+<BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />
+```
+
+### <a name='rowClasses'>rowClasses = [String | Function]</a>
+Custom the style of table rows:
+
+```js
+<BootstrapTable data={ data } columns={ columns } rowClasses="custom-row-class" />
+```
+
+This prop also accept a callback function for flexible to custom row style:
+
+```js
+const rowClasses = (row, rowIndex) => {
+  return 'custom-row-class';
+};
+
+<BootstrapTable data={ data } columns={ columns } rowClasses={ rowClasses } />
+```
+
+### <a name='rowEvents'>rowEvents - [Object]</a>
+Custom the events on row:
+
+```js
+const rowEvents = {
+  onClick: (e, row, rowIndex) => {
+    ....
+  }
+};
+<BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
+```
+
+### <a name='defaultSorted'>defaultSorted - [Array]</a>
+`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
+
+```js
+const defaultSorted = [{
+  dataField: 'name', // if dataField is not match to any column you defined, it will be ignored.
+  order: 'desc' // desc or asc
+}];
+```
+
+### <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 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
+```
+
+After installation of `react-bootstrap-table2-paginator`, you can enable pagination on `react-bootstrap-table2` easily:
+
+```js
+import paginator from 'react-bootstrap-table2-paginator';
+
+// omit...
+
+<BootstrapTable data={ data } columns={ columns } pagination={ paginator() } />
+```
+
+`paginator` is a function actually and allow to pass some pagination options, following we list all the available options:
+
+```js
+paginator({
+  page, // Specify the current page. It's necessary when remote is enabled
+  sizePerPage, // Specify the size per page. It's necessary when remote is enabled
+  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
+  }, {
+    text: '10', value: 10
+  }, {
+    text: 'All', value: products.length
+  } ], // A numeric array is also available: [5, 10]. the purpose of above example is custom the text
+  withFirstAndLast: false, // hide the going to first and last page button
+  alwaysShowAllBtns: true, // always show the next and previous page button
+  firstPageText: 'First', // the text of first page button
+  prePageText: 'Prev', // the text of previous page button
+  nextPageText: 'Next', // the text of next page button
+  lastPageText: 'Last', // the text of last page button
+  nextPageTitle: 'Go to next', // the title of next page button
+  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 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 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
+```
+
+After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily:
+
+```js
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+const columns = [ {
+  dataField: 'id', 
+  text: 'Production ID'
+}, {
+  dataField: 'name',
+  text: 'Production Name',
+  filter: textFilter()  // apply text filter
+}, {
+  dataField: 'price',
+  text: 'Production Price'
+} ];
+<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
+```
+
+### <a name='onTableChange'>onTableChange - [Function]</a>
+This callback function will be called when [`remote`](#remote) enabled only.
+
+```js
+const onTableChange = (type, newState) => {
+  // handle any data change here
+}
+<BootstrapTable data={ data } columns={ columns } onTableChange={ onTableChange } />
+```
+
+There's only two arguments will be passed to `onTableChange`: `type` and `newState`:
+
+`type` is tell you what kind of functionality to trigger this table's change: available values at the below:
+
+* `filter`
+* `pagination`
+* `sort`
+* `cellEdit`
+
+Following is a shape of `newState`
+
+```js
+{
+  page,  // newest page
+  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

@@ -0,0 +1,74 @@
+# 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)
+* [beforeSaveCell](#beforeSaveCell)
+* [afterSaveCell](#afterSaveCell)
+* [errorMessage](#errorMessage)
+* [onErrorMessageDisappear](#onErrorMessageDisappear)
+
+## <a name='cellEdit'>cellEdit - [Object]</a>
+Assign a valid `cellEdit` object can enable the cell editing on the cell. The default usage is click/dbclick to trigger cell editing and press `ENTER` to save cell or press `ESC` to cancel editing.
+
+> Note: The `keyField` column can't be edited
+
+Following is the shape of `cellEdit` object:
+```js
+{
+  mode: 'click',
+  blurToSave: true,
+  timeToCloseMessage: 2500,
+  errorMessage: '',
+  beforeSaveCell: (oldValue, newValue, row, column) => { ... },
+  afterSaveCell: (oldValue, newValue, row, column) => { ... },
+  onErrorMessageDisappear: () => { ... },
+  nonEditableRows: () => { ... }
+}
+```
+
+### <a name='mode'>cellEdit.mode - [String]</a>
+`cellEdit.mode` possible value is `click` and `dbclick`. **It's required value** that tell `react-bootstrap-table2` how to trigger the cell editing.
+
+### <a name='blurToSave'>cellEdit.blurToSave - [Bool]</a>
+Default is `false`, enable it will be able to save the cell automatically when blur from the cell editor.
+
+### <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='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.
+
+### <a name='beforeSaveCell'>cellEdit.beforeSaveCell - [Function]</a>
+This callback function will be called before triggering cell update.
+
+```js
+const cellEdit = {
+  // omit...
+  beforeSaveCell: (oldValue, newValue, row, column) => { ... }
+}
+```
+
+### <a name='afterSaveCell'>cellEdit.afterSaveCell - [Function]</a>
+This callback function will be called after updating cell.
+
+```js
+const cellEdit = {
+  // omit...
+  afterSaveCell: (oldValue, newValue, row, column) => { ... }
+};
+```
+
+### <a name='errorMessage'>cellEdit.errorMessage - [String]</a>
+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 so that you can sync the newest error message to your state if you have.
+

docs/columns.md

@@ -12,6 +12,7 @@ Available properties in a column object:
 * [formatExtraData](#formatExtraData)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
+* [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
 * [title](#title)
@@ -25,22 +26,32 @@ Available properties in a column object:
 * [headerEvents](#headerEvents)
 * [headerAlign](#headerAlign)
 * [headerAttrs](#headerAttrs)
+* [headerSortingClasses](#headerSortingClasses)
+* [headerSortingStyle](#headerSortingStyle)
 * [editable](#editable)
 * [validator](#validator)
+* [editCellStyle](#editCellStyle)
+* [editCellClasses](#editCellClasses)
+* [editorStyle](#editorStyle)
+* [editorClasses](#editorClasses)
+* [editor](#editor)
+* [editorRenderer](#editorRenderer)
+* [filter](#filter)
+* [filterValue](#filterValue)
 
 Following is a most simplest and basic usage:
 
 ```js
 const rows = [ { id: 1, name: '...', price: '102' } ];
 const columns = [ {
-    dataField: id, 
-    text: Production ID
+    dataField: 'id', 
+    text: 'Production ID'
   }, {
-    dataField: name,
-    text: Production Name
+    dataField: 'name',
+    text: 'Production Name'
   }, {
-    dataField: price,
-    text: Production Price
+    dataField: 'price',
+    text: 'Production Price'
   }
 ];
 ```
@@ -67,7 +78,7 @@ 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='hidden'>column.hidden - [Bool]</a>
 `hidden` allow you to hide column when `true` given.
@@ -81,10 +92,19 @@ dataField: 'address.city'
 * [`formatExtraData`](#formatExtraData)
 
 ## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
-`headerFormatter` allow you to customize the header column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+`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`
+* `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
+{
+  sortElement, // sort caret element, it will not be undefined when you enable sort on this column
+  filterElement // filter element, it will not be undefined when you enable column.filter on this column
+}
+```
 
 ## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
 It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
@@ -107,8 +127,21 @@ Enable the column sort via a `true` value given.
 ```
 > 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='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
 {
@@ -116,7 +149,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
@@ -133,10 +166,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
 {
@@ -161,7 +194,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
 {
@@ -170,7 +203,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
@@ -191,7 +224,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
 {
@@ -200,7 +233,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
 {
@@ -218,7 +251,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
@@ -249,7 +282,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) { ... }
@@ -267,7 +300,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
 {
@@ -370,20 +403,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...
@@ -394,7 +427,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
 {
@@ -415,7 +448,36 @@ 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>
+
+`headerSortingClasses` allows to customize `class` for header cell when this column is sorting.
+
+```js
+const headerSortingClasses = 'demo-sorting';
+```
+
+Furthermore, it also accepts a callback which takes **4** arguments and `String` is expected to return:
+
+```js
+const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { ... }
+```
+
+* `column`: The value of current column.
+* `sortOrder`: The order of current sorting
+* `isLastSorting`: Is the last one of sorted columns.
+* `colIndex`: The index of the current column being processed in BootstrapTable.
+
+### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
+
+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 = {
+  backgroundColor: 'red'
+};
+```
 
 ## <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`.
@@ -444,10 +506,183 @@ 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,
   message: 'SOME_REASON_HERE'
 }
+```
+
+## <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:
+
+**Parameters**
+* `cell`: The value of current cell. 
+* `row`: The object of `row` being processed in the `BootstrapTable`.
+* `rowIndex`: The index of the current `row` being processed in the `BootstrapTable`.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+```js
+{
+  editCellStyle: { ... }
+}
+```
+Or take a callback function
+
+```js
+{
+  editCellStyle: (cell, row, rowIndex, colIndex) => {
+    // it is suppose to return an object
+  }
+}
+```
+
+## <a name='editCellClasses'>column.editCellClasses - [String | Function]</a>
+You can use `column.editCellClasses` to add custom class on `<td>` when cell editing. It's same as [`column.editCellStyle`](#editCellStyle) which also accept a callback function to able to custom your class more flexible. Following is the arguments of this callback function: `cell`, `row`, `rowIndex`, `colIndex`.
+
+```js
+{
+  editCellClasses: 'custom-class'
+}
+```
+Or take a callback function
+
+```js
+{
+  editCellClasses: (cell, row, rowIndex, colIndex) => {
+    // it is suppose to return a string
+  }
+}
+```
+
+## <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`:
+
+```
+import { textFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}
+```
+
+For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
+
+## <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]
+}
 ```

docs/development.md

@@ -9,7 +9,7 @@ $ lerna bootstrap  # ./node_modules/.bin/lerna bootstrap
 ```
 ### Development
 ```bash
-$ npm start
+$ npm run storybook
 ```
 
 ### Launch StoryBook

docs/migration.md

@@ -0,0 +1,118 @@
+# 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
+
+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
+- [ ] Custom Filter Component
+- [ ] Regex Filter
+- [x] Select Filter
+- [x] Custom Select Filter
+- [X] Number Filter
+- [X] Date Filter
+- [ ] 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.   
+
+No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
+
+## Remote
+
+> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).

docs/row-selection.md

@@ -1,32 +1,40 @@
 
 # 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. 
+`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. 
 
+## Required
+* [mode (**required**)](#mode)
 
-## Available properties
+## Optional
+* [selected](#selected)
+* [style](#style)
+* [classes)](#classes)
+* [bgColor](#bgColor)
+* [nonSelectable)](#nonSelectable)
+* [clickToSelect)](#clickToSelect)
+* [clickToEdit](#clickToEdit)
+* [onSelect](#onSelect)
+* [onSelectAll](#onSelectAll)
+* [hideSelectColumn](#hideSelectColumn)
+* [selectionRenderer](#selectionRenderer)
+* [selectionHeaderRenderer](#selectionHeaderRenderer)
 
-The following are available properties in `selectRow`:
-
-#### Required
-* [mode (required)](#mode)
-
-#### 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
 
 ```js
-const selectRowProp = {
+const selectRow = {
   mode: 'radio' // single row selection
 };
-<BootstrapTableful
+
+<BootstrapTable
   keyField='id'
   data={ products }
   columns={ columns }
@@ -35,14 +43,182 @@ const selectRowProp = {
 ```
 
 ```js
-const selectRowProp = {
+const selectRow = {
   mode: 'checkbox' // multiple row selection
 };
 
-<BootstrapTableful
+<BootstrapTable
   keyField='id'
   data={ products }
   columns={ columns }
   selectRow={ selectRowProp }
 />
 ```
+
+### <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
+const selectRow = {
+  mode: 'checkbox',
+  style: { background: 'red' }
+};
+```
+
+If you wanna more flexible customization, `selectRow.style` also accept a function:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  style: (row, rowIndex) => { return ...; }
+};
+```
+
+### <a name='classes'>selectRow.classes - [String | Function]</a>
+`selectRow.classes` allow you to add css class on selected rows:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  classes: 'custom-class'
+};
+```
+
+If you wanna more flexible customization, `selectRow.classes` also accept a function:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  classes: (row, rowIndex) => { return ...; }
+};
+```
+
+### <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
+The background color when row is selected
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  bgColor: 'red'
+};
+```
+
+There's also a more good way to custom it:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  bgColor: (row, rowIndex) => {
+    return ....;  // return a color code
+  }
+};
+```
+
+### <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
+const selectRow = {
+  mode: 'checkbox',
+  nonSelectable: [1, 3 ,5]
+};
+```
+
+### <a name='clickToSelect'>selectRow.clickToSelect - [Bool]</a>
+Allow user to select row by clicking on the row.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+```
+
+> 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>
+Able to click to edit cell and select row
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+  clickToEdit: true
+};
+```
+
+### <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',
+  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>
+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, e) => {
+    // ...
+  }
+};
+```
+
+### <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
+const selectRow = {
+  mode: 'radio',
+  hideSelectColumn: true,
+  clickToSelect: true,
+  bgColor: 'red'
+};
+```

enzyme-setup.js

@@ -0,0 +1,8 @@
+import Adapter from 'enzyme-adapter-react-16';
+import { configure } from 'enzyme';
+
+const configureEnzyme = () => {
+  configure({ adapter: new Adapter() });
+};
+
+configureEnzyme();

gulpfile.babel.js

@@ -0,0 +1,91 @@
+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'
+].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'
+].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 %>']))
+  )();
+  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,76 +1,103 @@
 {
   "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"
+    "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-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "css-loader": "^0.28.1",
-    "enzyme": "^2.9.1",
-    "eslint": "^4.5.0",
+    "babel-cli": "6.26.0",
+    "babel-core": "6.25.0",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
+    "babel-loader": "7.1.1",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-react": "6.24.1",
+    "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",
+    "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.7.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",
-    "html-webpack-plugin": "^2.30.1",
-    "jest": "^20.0.4",
-    "jsdom": "^11.2.0",
-    "jsdom-global": "^3.0.2",
-    "lerna": "^2.0.0",
-    "node-sass": "^4.5.3",
-    "react-test-renderer": "^15.6.1",
-    "sass-loader": "^6.0.6",
-    "sinon": "^3.2.1",
-    "style-loader": "^0.17.0",
-    "webpack": "^3.5.4",
-    "webpack-dev-server": "^2.7.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.8.0",
+    "node-sass": "4.5.3",
+    "react-test-renderer": "16.0.0",
+    "sass-loader": "6.0.6",
+    "sinon": "3.2.1",
+    "style-loader": "0.17.0",
+    "webpack": "3.5.4",
+    "webpack-dev-server": "2.7.1"
   },
   "dependencies": {
-    "classnames": "^2.2.5",
-    "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
-  },
-  "peerDependencies": {
-    "prop-types": "^15.0.0",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "classnames": "2.2.5",
+    "prop-types": "15.5.10",
+    "react": "16.0.0",
+    "react-dom": "16.0.0"
   },
   "jest": {
     "collectCoverageFrom": [
-      "packages/**/*.js"
+      "packages/*/src/*.js",
+      "packages/*/index.js"
     ],
     "roots": [
       "<rootDir>/packages"
     ],
+    "setupFiles": [
+      "<rootDir>/enzyme-setup.js"
+    ],
+    "modulePaths": [
+      "<rootDir>/packages/react-bootstrap-table2"
+    ],
     "testEnvironment": "node",
     "testMatch": [
       "**/test/**/*.test.js"

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 wrapperFactory from './src/wrapper';
+import editingCellFactory from './src/editing-cell';
+import {
+  EDITTYPE,
+  CLICK_TO_CELL_EDIT,
+  DBCLICK_TO_CELL_EDIT,
+  DELAY_FOR_DBCLICK
+} from './src/const';
+
+export default (options = {}) => ({
+  wrapperFactory,
+  editingCellFactory,
+  CLICK_TO_CELL_EDIT,
+  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": "0.2.1",
+  "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.0.0",
+    "react-dom": "^16.0.0"
+  }
+}

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

@@ -0,0 +1,61 @@
+/* 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() {
+    this.checkbox.focus();
+  }
+
+  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, 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
+};
+CheckBoxEditor.defaultProps = {
+  className: '',
+  value: 'on:off',
+  defaultValue: false,
+  onChange: 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/date-editor.js

@@ -0,0 +1,42 @@
+/* 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 } = this.props;
+    this.date.valueAsDate = new Date(defaultValue);
+    this.date.focus();
+  }
+
+  getValue() {
+    return this.date.value;
+  }
+
+  render() {
+    const { defaultValue, 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
+};
+DateEditor.defaultProps = {
+  className: '',
+  defaultValue: ''
+};
+export default DateEditor;

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

@@ -0,0 +1,61 @@
+/* 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 } = this.props;
+    this.select.value = defaultValue;
+    this.select.focus();
+  }
+
+  getValue() {
+    return this.select.value;
+  }
+
+  render() {
+    const { defaultValue, 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
+};
+DropDownEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  style: {}
+};
+export default DropDownEditor;

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

@@ -0,0 +1,193 @@
+/* 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 _ =>
+  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,
+      className: PropTypes.string,
+      style: PropTypes.object
+    }
+
+    static defaultProps = {
+      timeToCloseMessage: TIME_TO_CLOSE_MESSAGE,
+      className: null,
+      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.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);
+    }
+
+    beforeComplete(newValue) {
+      const { onUpdate, row, column } = this.props;
+      if (_.isFunction(column.validator)) {
+        const validateForm = column.validator(newValue, row, column);
+        if (_.isObject(validateForm) && !validateForm.valid) {
+          this.setState(() => ({
+            invalidMessage: validateForm.message
+          }));
+          this.createTimer();
+          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 } = 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
+      };
+
+      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 } />;
+      } 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 } />;
+      }
+
+      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/text-editor.js

@@ -10,9 +10,13 @@ class TextEditor extends Component {
     this.text.focus();
   }
 
+  getValue() {
+    return this.text.value;
+  }
+
   render() {
-    const { defaultValue, classNames, ...rest } = this.props;
-    const editorClass = cs('form-control editor edit-text', classNames);
+    const { defaultValue, className, ...rest } = this.props;
+    const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
         ref={ node => this.text = node }
@@ -25,16 +29,17 @@ class TextEditor extends Component {
 }
 
 TextEditor.propTypes = {
-  classNames: PropTypes.oneOfType([
+  className: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object
   ]),
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ]).isRequired
+  ])
 };
 TextEditor.defaultProps = {
-  classNames: null
+  className: null,
+  defaultValue: ''
 };
 export default TextEditor;

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

@@ -0,0 +1,60 @@
+/* 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 } = this.props;
+    this.text.value = defaultValue;
+    this.text.focus();
+  }
+
+  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, className, ...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
+};
+TextAreaEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  onKeyDown: undefined
+};
+export default TextAreaEditor;

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

@@ -0,0 +1,135 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
+
+export default (
+  Base,
+  { _, remoteResolver }
+) => {
+  let EditingCell;
+  return class CellEditWrapper extends remoteResolver(Component) {
+    static propTypes = {
+      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,
+        nonEditableRows: PropTypes.func,
+        timeToCloseMessage: PropTypes.number,
+        errorMessage: PropTypes.string
+      })
+    }
+
+    constructor(props) {
+      super(props);
+      EditingCell = props.cellEdit.editingCellFactory(_);
+      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,
+        isDataChanged: false
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.cellEdit && this.isRemoteCellEdit()) {
+        if (nextProps.cellEdit.options.errorMessage) {
+          this.setState(() => ({
+            isDataChanged: false,
+            message: nextProps.cellEdit.options.errorMessage
+          }));
+        } else {
+          this.setState(() => ({
+            isDataChanged: true
+          }));
+          this.escapeEditing();
+        }
+      } else {
+        this.setState(() => ({
+          isDataChanged: false
+        }));
+      }
+    }
+
+    handleCellUpdate(row, column, newValue) {
+      const { keyField, cellEdit, store } = this.props;
+      const { beforeSaveCell, afterSaveCell } = cellEdit.options;
+      const oldValue = _.get(row, column.dataField);
+      const rowId = _.get(row, keyField);
+      if (_.isFunction(beforeSaveCell)) beforeSaveCell(oldValue, newValue, row, column);
+      if (this.isRemoteCellEdit()) {
+        this.handleCellChange(rowId, column.dataField, newValue);
+      } else {
+        store.edit(rowId, column.dataField, newValue);
+        if (_.isFunction(afterSaveCell)) afterSaveCell(oldValue, newValue, row, column);
+        this.completeEditing();
+      }
+    }
+
+    completeEditing() {
+      this.setState(() => ({
+        ridx: null,
+        cidx: null,
+        message: null,
+        isDataChanged: true
+      }));
+    }
+
+    startEditing(ridx, cidx) {
+      const editing = () => {
+        this.setState(() => ({
+          ridx,
+          cidx,
+          isDataChanged: false
+        }));
+      };
+
+      const { selectRow } = this.props;
+      if (!selectRow || (selectRow.clickToEdit || !selectRow.clickToSelect)) editing();
+    }
+
+    escapeEditing() {
+      this.setState(() => ({
+        ridx: null,
+        cidx: null
+      }));
+    }
+
+    render() {
+      const { isDataChanged, ...stateRest } = this.state;
+      const {
+        cellEdit: {
+          options: { nonEditableRows, errorMessage, ...optionsRest },
+          editingCellFactory,
+          ...cellEditRest
+        }
+      } = this.props;
+      const newCellEdit = {
+        ...optionsRest,
+        ...cellEditRest,
+        ...stateRest,
+        EditingCell,
+        nonEditableRows: _.isDefined(nonEditableRows) ? nonEditableRows() : [],
+        onStart: this.startEditing,
+        onEscape: this.escapeEditing,
+        onUpdate: this.handleCellUpdate
+      };
+
+      return (
+        <Base
+          { ...this.props }
+          data={ this.props.store.data }
+          isDataChanged={ isDataChanged }
+          cellEdit={ newCellEdit }
+        />
+      );
+    }
+  };
+};

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/text-editor.test.js

@@ -1,5 +1,6 @@
+import 'jsdom-global/register';
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
 import TextEditor from '../src/text-editor';
 
@@ -8,7 +9,7 @@ describe('TextEditor', () => {
   const value = 'test';
 
   beforeEach(() => {
-    wrapper = shallow(
+    wrapper = mount(
       <TextEditor
         defaultValue={ value }
       />
@@ -22,20 +23,20 @@ describe('TextEditor', () => {
     expect(wrapper.find('.form-control.editor.edit-text').length).toBe(1);
   });
 
-  describe('whenclassNames prop defined', () => {
+  describe('when className prop defined', () => {
     const className = 'test-class';
     beforeEach(() => {
-      wrapper = shallow(
+      wrapper = mount(
         <TextEditor
           defaultValue={ value }
-          classNames={ className }
+          className={ className }
         />
       );
     });
 
     it('should render correct custom classname', () => {
       expect(wrapper.length).toBe(1);
-      expect(wrapper.find(`.${className}`).length).toBe(1);
+      expect(wrapper.hasClass(className)).toBeTruthy();
     });
   });
 });

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

@@ -0,0 +1,330 @@
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+
+import _ from 'react-bootstrap-table-next/src/utils';
+import remoteResolver from 'react-bootstrap-table-next/src/props-resolver/remote-resolver';
+import Store from 'react-bootstrap-table-next/src/store';
+import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
+import cellEditFactory from '..';
+import * as Const from '../src/const';
+import wrapperFactory from '../src/wrapper';
+
+describe('CellEditWrapper', () => {
+  let wrapper;
+  let instance;
+  const onTableChangeCB = sinon.stub();
+  const columns = [{
+    dataField: 'id',
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+
+  const createTableProps = (props = {}) => {
+    const { cellEdit, ...rest } = props;
+    const tableProps = {
+      keyField: 'id',
+      columns,
+      data,
+      _,
+      store: new Store('id'),
+      cellEdit: cellEditFactory(cellEdit),
+      onTableChange: onTableChangeCB,
+      ...rest
+    };
+    tableProps.store.data = data;
+    return tableProps;
+  };
+
+  const CellEditWrapper = wrapperFactory(BootstrapTable, {
+    _,
+    remoteResolver
+  });
+
+  const createCellEditWrapper = (props, renderFragment = true) => {
+    wrapper = shallow(<CellEditWrapper { ...props } />);
+    instance = wrapper.instance();
+    if (renderFragment) {
+      const fragment = instance.render();
+      wrapper = shallow(<div>{ fragment }</div>);
+    }
+  };
+
+  afterEach(() => {
+    onTableChangeCB.reset();
+  });
+
+  beforeEach(() => {
+    const props = createTableProps({
+      cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
+    });
+    createCellEditWrapper(props);
+  });
+
+  it('should render CellEditWrapper correctly', () => {
+    expect(wrapper.length).toBe(1);
+    expect(wrapper.find(BootstrapTable)).toBeDefined();
+  });
+
+  it('should have correct state', () => {
+    expect(instance.state.ridx).toBeNull();
+    expect(instance.state.cidx).toBeNull();
+    expect(instance.state.message).toBeNull();
+    expect(instance.state.isDataChanged).toBeFalsy();
+  });
+
+  it('should inject correct props to base component', () => {
+    const base = wrapper.find(BootstrapTable);
+    expect(base.props().cellEdit).toBeDefined();
+    expect(base.props().cellEdit.onStart).toBeDefined();
+    expect(base.props().cellEdit.onEscape).toBeDefined();
+    expect(base.props().cellEdit.onUpdate).toBeDefined();
+    expect(base.props().cellEdit.EditingCell).toBeDefined();
+    expect(base.props().cellEdit.ridx).toBeNull();
+    expect(base.props().cellEdit.cidx).toBeNull();
+    expect(base.props().cellEdit.message).toBeNull();
+    expect(base.props().isDataChanged).toBe(instance.state.isDataChanged);
+  });
+
+  describe('when receive new cellEdit prop', () => {
+    const spy = jest.spyOn(CellEditWrapper.prototype, 'escapeEditing');
+
+    describe('and cellEdit is not work on remote', () => {
+      beforeEach(() => {
+        const props = createTableProps({
+          cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
+        });
+        createCellEditWrapper(props);
+        wrapper.setProps({ cellEdit: props.cellEdit });
+      });
+
+      it('should always setting state.isDataChanged as false', () => {
+        expect(instance.state.isDataChanged).toBeFalsy();
+      });
+    });
+
+    describe('and cellEdit is work on remote', () => {
+      let errorMessage;
+      let props;
+      beforeEach(() => {
+        props = createTableProps({
+          cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+          remote: true
+        });
+      });
+
+      describe('and cellEdit.errorMessage is defined', () => {
+        beforeEach(() => {
+          createCellEditWrapper(props, false);
+          errorMessage = 'test';
+          const newCellEdit = {
+            ...props.cellEdit,
+            options: { ...props.cellEdit.options, errorMessage }
+          };
+          wrapper.setProps({ cellEdit: newCellEdit });
+        });
+
+        it('should setting correct state', () => {
+          expect(instance.state.isDataChanged).toBeFalsy();
+          expect(instance.state.message).toEqual(errorMessage);
+        });
+      });
+
+      describe('and cellEdit.errorMessage is undefined', () => {
+        beforeEach(() => {
+          errorMessage = null;
+          createCellEditWrapper(props, false);
+          const newCellEdit = {
+            ...props.cellEdit,
+            options: { ...props.cellEdit.options, errorMessage }
+          };
+          wrapper.setProps({ cellEdit: newCellEdit });
+        });
+
+        it('should setting correct state', () => {
+          expect(wrapper.state().isDataChanged).toBeTruthy();
+        });
+
+        it('should escape current editing', () => {
+          expect(spy).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  describe('call escapeEditing function', () => {
+    it('should set state correctly', () => {
+      instance.escapeEditing();
+      expect(instance.state.ridx).toBeNull();
+      expect(instance.state.cidx).toBeNull();
+    });
+  });
+
+  describe('call startEditing function', () => {
+    const ridx = 1;
+    const cidx = 3;
+
+    it('should set state correctly', () => {
+      instance.startEditing(ridx, cidx);
+      expect(instance.state.ridx).toEqual(ridx);
+      expect(instance.state.cidx).toEqual(cidx);
+      expect(instance.state.isDataChanged).toBeFalsy();
+    });
+
+    describe('if selectRow.clickToSelect is defined', () => {
+      beforeEach(() => {
+        const selectRow = { mode: 'checkbox', clickToSelect: true };
+        const props = createTableProps({
+          cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+          selectRow
+        });
+        createCellEditWrapper(props);
+      });
+
+      it('should not set state', () => {
+        instance.startEditing(ridx, cidx);
+        expect(instance.state.ridx).toBeNull();
+        expect(instance.state.cidx).toBeDefined();
+      });
+    });
+
+    describe('if selectRow.clickToSelect and selectRow.clickToEdit is defined', () => {
+      beforeEach(() => {
+        const selectRow = { mode: 'checkbox', clickToSelect: true, clickToEdit: true };
+        const props = createTableProps({
+          cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+          selectRow
+        });
+        createCellEditWrapper(props);
+      });
+
+      it('should set state correctly', () => {
+        instance.startEditing(ridx, cidx);
+        expect(instance.state.ridx).toEqual(ridx);
+        expect(instance.state.cidx).toEqual(cidx);
+      });
+    });
+  });
+
+  describe('call completeEditing function', () => {
+    it('should set state correctly', () => {
+      instance.completeEditing();
+      expect(instance.state.ridx).toBeNull();
+      expect(instance.state.cidx).toBeNull();
+      expect(instance.state.message).toBeNull();
+      expect(instance.state.isDataChanged).toBeTruthy();
+    });
+  });
+
+  describe('call handleCellUpdate function', () => {
+    let props;
+    const row = data[0];
+    const column = columns[1];
+    const newValue = 'new name';
+
+    describe('when cell edit is work on remote', () => {
+      const spy = jest.spyOn(CellEditWrapper.prototype, 'handleCellChange');
+
+      beforeEach(() => {
+        props = createTableProps({
+          cellEdit: { mode: Const.CLICK_TO_CELL_EDIT },
+          remote: true
+        });
+        createCellEditWrapper(props);
+        instance.handleCellUpdate(row, column, newValue);
+      });
+
+      it('should calling handleCellChange correctly', () => {
+        expect(spy).toHaveBeenCalled();
+        expect(spy.mock.calls).toHaveLength(1);
+        expect(spy.mock.calls[0]).toHaveLength(3);
+        expect(spy.mock.calls[0][0]).toEqual(row.id);
+        expect(spy.mock.calls[0][1]).toEqual(column.dataField);
+        expect(spy.mock.calls[0][2]).toEqual(newValue);
+      });
+    });
+
+    describe('when cell edit is not work on remote', () => {
+      const spyOnCompleteEditing = jest.spyOn(CellEditWrapper.prototype, 'completeEditing');
+      const spyOnStoreEdit = jest.spyOn(Store.prototype, 'edit');
+
+      beforeEach(() => {
+        props = createTableProps({
+          cellEdit: { mode: Const.CLICK_TO_CELL_EDIT }
+        });
+        createCellEditWrapper(props);
+        instance.handleCellUpdate(row, column, newValue);
+      });
+
+      afterEach(() => {
+        spyOnStoreEdit.mockReset();
+        spyOnCompleteEditing.mockReset();
+      });
+
+      it('should calling props.store.edit', () => {
+        expect(spyOnStoreEdit).toHaveBeenCalled();
+        expect(spyOnStoreEdit.mock.calls).toHaveLength(1);
+        expect(spyOnStoreEdit.mock.calls[0]).toHaveLength(3);
+        expect(spyOnStoreEdit.mock.calls[0][0]).toEqual(row.id);
+        expect(spyOnStoreEdit.mock.calls[0][1]).toEqual(column.dataField);
+        expect(spyOnStoreEdit.mock.calls[0][2]).toEqual(newValue);
+      });
+
+      it('should calling completeEditing function', () => {
+        expect(spyOnCompleteEditing).toHaveBeenCalled();
+      });
+
+      describe('if cellEdit.afterSaveCell prop defined', () => {
+        const aftereSaveCellCallBack = sinon.stub();
+
+        beforeEach(() => {
+          props = createTableProps({
+            cellEdit: {
+              mode: Const.CLICK_TO_CELL_EDIT,
+              afterSaveCell: aftereSaveCellCallBack
+            }
+          });
+          createCellEditWrapper(props);
+          instance.handleCellUpdate(row, column, newValue);
+        });
+
+        it('should calling cellEdit.afterSaveCell correctly', () => {
+          expect(aftereSaveCellCallBack.callCount).toBe(1);
+          expect(aftereSaveCellCallBack.calledWith(
+            row[column.dataField], newValue, row, column)
+          ).toBe(true);
+        });
+      });
+    });
+
+    describe('if cellEdit.beforeSaveCell prop defined', () => {
+      const beforeSaveCellCallBack = sinon.stub();
+      beforeEach(() => {
+        props = createTableProps({
+          cellEdit: {
+            mode: Const.CLICK_TO_CELL_EDIT,
+            beforeSaveCell: beforeSaveCellCallBack
+          }
+        });
+        createCellEditWrapper(props);
+        instance.handleCellUpdate(row, column, newValue);
+      });
+
+      it('should calling cellEdit.beforeSaveCell correctly', () => {
+        expect(beforeSaveCellCallBack.callCount).toBe(1);
+        expect(beforeSaveCellCallBack.calledWith(
+          row[column.dataField], newValue, row, column)
+        ).toBe(true);
+      });
+    });
+  });
+});

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/addons.js

@@ -2,3 +2,4 @@
 
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-console';

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

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 import React from 'react';
 import { configure, addDecorator } from '@storybook/react';
+import { withConsole } from '@storybook/addon-console';
 
 function loadStories() {
   require('stories');
@@ -16,6 +17,10 @@ const componentDecorator = (story) => (
   </div>
 );
 
+
+// prepend the story name to log messages
+addDecorator((storyFn, context) => withConsole()(storyFn)(context));
+
 addDecorator(componentDecorator);
 
 configure(loadStories, module);

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

@@ -1,7 +1,13 @@
 const path = require('path');
 
-const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/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 storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -11,6 +17,12 @@ 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,
 };
 
 const loaders = [{
@@ -22,15 +34,14 @@ const loaders = [{
 }, {
   test: /\.js?$/,
   use: ['babel-loader'],
-  exclude: /node_modules/,
-  include: [sourcePath, storyPath],
+  exclude: /node_modules/
 }, {
   test: /\.css$/,
   use: ['style-loader', 'css-loader'],
 }, {
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath],
+  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 { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,7 +18,10 @@ const columns = [{
 }];
 
 const sourceCode = `\
-<BootstrapTableful
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
+<BootstrapTable
   keyField="id"
   data={ products }
   columns={ columns }
@@ -28,7 +31,7 @@ const sourceCode = `\
 
 export default () => (
   <div>
-    <BootstrapTableful
+    <BootstrapTable
       keyField="id"
       data={ products }
       columns={ columns }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BootstrapTableful } 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'
@@ -31,17 +33,17 @@ const columns = [{
 
 const CaptionElement = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
 
-<BootstrapTableful keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+<BootstrapTable keyField="id" data={ products } caption="Plain text header" columns={ columns } />
 
-<BootstrapTableful keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
+<BootstrapTable keyField="id" data={ products } caption={<CaptionElement />} columns={ columns } />
 `;
 
-const Caption = () => <h3 style={{ borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' }}>Component as Header</h3>;
+const Caption = () => <h3 style={ { borderRadius: '0.25em', textAlign: 'center', color: 'purple', border: '1px solid purple', padding: '0.5em' } }>Component as Header</h3>;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } caption="Plain text header" columns={ columns } />
-    <BootstrapTableful keyField="id" data={ products } caption={<Caption />} columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } caption="Plain text header" columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } caption={ <Caption /> } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

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/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BootstrapTableful } 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'
@@ -29,12 +31,12 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -18,7 +18,10 @@ const columns = [{
 }];
 
 const sourceCode = `\
-<BootstrapTableful
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
+<BootstrapTable
   keyField="id"
   data={ products }
   columns={ columns }
@@ -30,7 +33,7 @@ const sourceCode = `\
 
 export default () => (
   <div>
-    <BootstrapTableful
+    <BootstrapTable
       keyField="id"
       data={ products }
       columns={ columns }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { BootstrapTableful } 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
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true
+  }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
 export default () => (
   <div>
-    <BootstrapTableful 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-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',
+  editCellClasses: 'editing-name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editCellClasses: (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',
+  editCellClasses: 'editing-name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editCellClasses: (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/cell-edit-hooks-table.js

@@ -2,7 +2,8 @@
 /* eslint no-console: 0 */
 import React from 'react';
 
-import { BootstrapTableful } 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,30 @@ 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!!'); }
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    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>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        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

@@ -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',
+  editCellStyle: {
+    backgroundColor: '#20B2AA'
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editCellStyle: (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',
+  editCellStyle: {
+    backgroundColor: '#20B2AA'
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  editCellStyle: (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/cell-edit-validator-table.js

@@ -1,6 +1,7 @@
-import React from 'react';
 /* eslint no-unused-vars: 0 */
-import { BootstrapTableful } 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
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  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>
-    <BootstrapTableful 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-level-editable-table.js

@@ -1,7 +1,8 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } 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'
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click'
-};
 export default () => (
   <div>
-    <BootstrapTableful 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>Dropdown 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 { BootstrapTableful } 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'
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click'
-};
 export default () => (
   <div>
-    <BootstrapTableful 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 { BootstrapTableful } 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
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true
+  }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click',
-  blurToSave: true
-};
 export default () => (
   <div>
-    <BootstrapTableful 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, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown 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>Dropdown 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 { BootstrapTableful } 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'
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'dbclick'
-};
 export default () => (
   <div>
-    <BootstrapTableful 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/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 { BootstrapTableful } 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]
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  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>
-    <BootstrapTableful 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>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/column-filter/custom-date-filter.js

@@ -0,0 +1,77 @@
+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',
+  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-value.js

@@ -0,0 +1,75 @@
+/* eslint no-unused-vars: 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 { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator(5);
+
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name',
+  filter: textFilter()
+}, {
+  dataField: 'owner',
+  text: 'Job Owner',
+  filter: textFilter(),
+  formatter: (cell, row) => owners[cell],
+  filterValue: (cell, row) => owners[cell]
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  filter: textFilter(),
+  formatter: (cell, row) => types[cell],
+  filterValue: (cell, row) => types[cell]
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name',
+  filter: textFilter()
+}, {
+  dataField: 'owner',
+  text: 'Job Owner',
+  filter: textFilter(),
+  formatter: (cell, row) => owners[cell],
+  filterValue: (cell, row) => owners[cell]
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  filter: textFilter(),
+  filterValue: (cell, row) => types[cell]
+}];
+
+// shape of job: { id: 0, name: 'Job name 0', owner: 1, type: 3 }
+
+<BootstrapTable keyField='id' data={ jobs } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      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

@@ -0,0 +1,69 @@
+/* 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({
+    delay: 1000, // default is 500ms
+    style: {
+      backgroundColor: 'yellow'
+    },
+    className: 'test-classname',
+    placeholder: 'Custom PlaceHolder',
+    onClick: e => console.log(e)
+  })
+}];
+
+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({
+    delay: 1000, // default is 500ms
+    style: {
+      backgroundColor: 'yellow'
+    },
+    className: 'test-classname',
+    placeholder: 'Custom PlaceHolder',
+    onClick: e => console.log(e)
+  })
+}];
+
+<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/date-filter-default-value.js

@@ -0,0 +1,59 @@
+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',
+  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,55 @@
+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',
+  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/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,85 @@
+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',
+  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-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.js

@@ -0,0 +1,68 @@
+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
+  })
+}];
+
+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
+  })
+}];
+
+<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/text-filter-caseSensitive.js

@@ -0,0 +1,51 @@
+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({ caseSensitive: true })
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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({ caseSensitive: true })
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3>Product Name is case sensitive</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,56 @@
+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({
+    defaultValue: '2103'
+  })
+}];
+
+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({
+    defaultValue: '2103'
+  })
+}];
+
+<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/text-filter-eq-comparator.js

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

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

@@ -0,0 +1,52 @@
+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()
+}];
+
+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()
+}];
+
+<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/columns/column-align-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -40,12 +42,12 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-attrs-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -34,12 +36,13 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <h3>Try to hover on Product Name header column</h3>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-class-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -40,12 +42,12 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-event-table.js

@@ -2,7 +2,7 @@
 /* eslint no-alert: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,6 +23,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -37,13 +39,13 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
     <h3>Try to Click on Product ID columns</h3>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-format-table.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -31,6 +31,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function priceFormatter(cell, row) {
   if (row.onSale) {
     return (
@@ -53,7 +55,7 @@ const columns = [
   formatter: priceFormatter
 }];
 
-<BootstrapTableful
+<BootstrapTable
   keyField="id"
   data={ products }
   columns={ columns }
@@ -62,7 +64,7 @@ const columns = [
 
 export default () => (
   <div>
-    <BootstrapTableful
+    <BootstrapTable
       keyField="id"
       data={ products }
       columns={ columns }

packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js

@@ -1,7 +1,7 @@
 /* eslint no-console: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -34,6 +34,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function rankFormatter(cell, row, rowIndex, formatExtraData) {
   return (
     <i className={ formatExtraData[cell] } />
@@ -51,7 +53,7 @@ const columns = [
     down: 'glyphicon glyphicon-chevron-down'
 }];
 
-<BootstrapTableful
+<BootstrapTable
   keyField="id"
   data={ products }
   columns={ columns }
@@ -60,7 +62,7 @@ const columns = [
 
 export default () => (
   <div>
-    <BootstrapTableful
+    <BootstrapTable
       keyField="id"
       data={ products }
       columns={ columns }

packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -20,6 +20,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -28,12 +30,12 @@ const columns = [{
 // omit...
 ];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-style-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -33,6 +33,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -58,12 +60,12 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/column-title-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -34,12 +34,13 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <h3>Try to hover on any Product Name cells</h3>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -32,6 +32,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'User ID'
@@ -49,12 +51,12 @@ const columns = [{
   text: 'PostCode'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -34,12 +36,12 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/header-columns/column-attrs-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -34,12 +36,12 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js

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

packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js

@@ -2,7 +2,7 @@
 /* eslint no-alert: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -23,10 +23,12 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
-  events: {
+  headerEvents: {
     onClick: () => alert('Click on Product ID header column')
   }
 }, {
@@ -37,13 +39,13 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
     <h3>Try to Click on Product ID header column</h3>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/header-columns/column-format-filter-sort-table.js

@@ -0,0 +1,91 @@
+/* eslint no-unused-vars: 0 */
+/* eslint react/prefer-stateless-function: 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();
+
+function priceFormatter(column, colIndex, { sortElement, filterElement }) {
+  return (
+    <div style={ { display: 'flex', flexDirection: 'column' } }>
+      { filterElement }
+      { column.text }
+      { sortElement }
+    </div>
+  );
+}
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter(),
+  headerFormatter: priceFormatter
+}];
+
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+// ...
+function priceFormatter(column, colIndex, { sortElement, filterElement }) {
+  return (
+    <div style={ { display: 'flex', flexDirection: 'column' } }>
+      { filterElement }
+      { column.text }
+      { sortElement }
+    </div>
+  );
+}
+
+const columns = [
+// omit...
+{
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter(),
+  headerFormatter: priceFormatter
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  filter={ filterFactory() }
+  defaultSorted={ defaultSorted }
+/>
+`;
+
+export default class DefaultSortTable extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          defaultSorted={ defaultSorted }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -26,6 +26,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function priceFormatter(column, colIndex) {
   return (
     <h5><strong>$$ { column.text } $$</strong></h5>
@@ -40,7 +42,7 @@ const columns = [
   headerFormatter: priceFormatter
 }];
 
-<BootstrapTableful
+<BootstrapTable
   keyField="id"
   data={ products }
   columns={ columns }
@@ -49,7 +51,7 @@ const columns = [
 
 export default () => (
   <div>
-    <BootstrapTableful
+    <BootstrapTable
       keyField="id"
       data={ products }
       columns={ columns }

packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -32,6 +32,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -56,12 +58,12 @@ const columns = [{
   }
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js

@@ -1,7 +1,7 @@
 /* eslint no-unused-vars: 0 */
 import React from 'react';
 
-import { BootstrapTableful } from 'react-bootstrap-table2';
+import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -34,12 +36,12 @@ const columns = [{
   text: 'Product Price'
 }];
 
-<BootstrapTableful keyField='id' data={ products } columns={ columns } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js

@@ -0,0 +1,145 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+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 RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = ({ page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+`;
+
+const NoDataIndication = () => (
+  <div className="spinner">
+    <div className="rect1" />
+    <div className="rect2" />
+    <div className="rect3" />
+    <div className="rect4" />
+    <div className="rect5" />
+  </div>
+);
+
+const Table = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+      noDataIndication={ () => <NoDataIndication /> }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+Table.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class EmptyTableOverlay extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = (type, { page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 3000);
+    this.setState(() => ({ data: [] }));
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <Table
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default EmptyTableOverlay;

packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js

@@ -0,0 +1,158 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import overlayFactory from 'react-bootstrap-table2-overlay';
+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';
+import overlayFactory from 'react-bootstrap-table2-overlay';
+
+// ...
+const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote
+      loading={ loading }
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+      overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemotePagination.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  loading: PropTypes.bool.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      loading: false,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = ({ page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        loading: false,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 3000);
+    this.setState(() => ({ loading: true }));
+  }
+
+  render() {
+    const { data, sizePerPage, page, loading } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        loading={ loading }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+`;
+
+const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote
+      loading={ loading }
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+      overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemotePagination.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  loading: PropTypes.bool.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      loading: false,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = (type, { page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        loading: false,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 3000);
+    this.setState(() => ({ loading: true }));
+  }
+
+  render() {
+    const { data, sizePerPage, page, loading } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        loading={ loading }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;