Publish

- react-bootstrap-table2-example@1.0.30
 - react-bootstrap-table2-filter@1.1.12
 - react-bootstrap-table-next@3.1.9

.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,

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,24 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is. In addition, please search issues before you open a report to make sure there's no any duplicated report
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily and handle it effectively

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Is this feature requested before?**
+Please search issues to make sure to create feature which is never report yet.
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/i-have-a-question.md

@@ -0,0 +1,17 @@
+---
+name: I have a question
+about: I have a question
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Question**
+A clear and concise description of you question. In addition, please search issues before you open a question to make sure there's no any duplicated questions.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily.

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

_config.yml

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

docs/README.md

@@ -1,6 +1,6 @@
-# Documents
+# Documentation
 
-## Props on BootstrapTable
+## BootstrapTable Props
 
 #### Required
 * [keyField (**required**)](#keyField)
@@ -8,63 +8,337 @@
 * [columns (**required**)](#columns)
 
 #### Optional
+* [remote](#remote)
+* [bootstrap4](#bootstrap4)
+* [loading](#loading)
 * [caption](#caption)
 * [striped](#striped)
 * [bordered](#bordered)
 * [hover](#hover)
 * [condensed](#condensed)
+* [id](#id)
+* [tabIndexCell](#tabIndexCell)
+* [classes](#classes)
+* [wrapperClasses](#wrapperClasses)
+* [headerClasses](#headerClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
+* [expandRow](#expandRow)
+* [rowStyle](#rowStyle)
+* [rowClasses](#rowClasses)
+* [rowEvents](#rowEvents)
+* [hiddenRows](#hiddenRows)
+* [defaultSorted](#defaultSorted)
+* [defaultSortDirection](#defaultSortDirection)
+* [pagination](#pagination)
+* [filter](#filter)
+* [onTableChange](#onTableChange)
+* [onDataSizeChange](#onDataSizeChange)
 
 ### <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='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.
+### <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:
 
-### <a name='striped'>striped - [Bool]</a>
-Same as `.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
-### <a name='hover'>hover - [Bool]</a>
-Same as `.table-hover` class for adding a 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
-
-### <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: () => { ... }
+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='bootstrap4'>bootstrap4 - [Bool]</a>
+`true` to indicate your bootstrap version is 4. Default version is 3.
+
+### <a name='loading'>loading - [Bool]</a>
+Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
+When `loading` is `true`, `react-bootstrap-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,
+    styles: {
+      overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'})
+    }
+  })
 }
 ```
-#### <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='caption'>caption - [String | Node]</a>
+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='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='striped'>striped - [Bool]</a>
+Same as bootstrap `.table-striped` class for adding zebra-stripes to a table.
+### <a name='bordered'>bordered - [Bool]</a>
+Same as bootstrap `.table-bordered` class for adding borders to a table and table cells.
+### <a name='hover'>hover - [Bool]</a>
+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 bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
 
-#### <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.
+### <a name='id'>id - [String]</a>
+Customize id on `table` element.
+
+### <a name='tabIndexCell'>tabIndexCell - [Bool]</a>
+Enable the `tabIndex` attribute on `<td>` element.
+
+### <a name='classes'>classes - [String]</a>
+Customize class on `table` element.
+
+### <a name='wrapperClasses'>wrapperClasses - [String]</a>
+Customize class on the outer element which wrap up the `table` element. 
+
+### <a name='headerClasses'>headerClasses - [String]</a>
+Customize class on the header row(`tr`). 
+
+### <a name='cellEdit'>cellEdit - [Object]</a>
+Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 
 ### <a name='selectRow'>selectRow - [Object]</a>
-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='expandRow'>expandRow - [Object]</a>
+Makes table rows expandable, please see [expandRow definition](./row-expand.md) for more detail.
+
+### <a name='rowStyle'>rowStyle = [Object | Function]</a>
+Custom the style of table rows:
+
+```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='hiddenRows'>hiddenRows - [Array]</a>
+Hide rows, this props accept an array of row keys:
+
+```js
+const hiddenRows = [1, 4];
+<BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
+```
+
+### <a name='defaultSorted'>defaultSorted - [Array]</a>
+`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
+
+```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
+  }
+}
+```
+
+### <a name='onDataSizeChange'>onDataSizeChange - [Function]</a>
+This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
+
+* `dataSize`: The new data size
+
+```js
+handleDataChange = ({ dataSize }) => {
+  this.setState({ rowCount: dataSize });
+}
+
+<BootstrapTable
+  onDataSizeChange={ handleDataChange }
+  ....
+/>
+```

docs/cell-edit.md

@@ -0,0 +1,98 @@
+# Cell Editing
+Before start to use cell edit, please remember to install `react-bootstrap-table2-editor`
+
+```sh
+$ npm install react-bootstrap-table2-editor --save
+```
+
+# Properties on cellEdit prop
+* [mode (**required**)](#mode)
+* [blurToSave](#blurToSave)
+* [nonEditableRows](#nonEditableRows)
+* [timeToCloseMessage](#timeToCloseMessage)
+* [autoSelectText](#autoSelectText)
+* [beforeSaveCell](#beforeSaveCell)
+* [afterSaveCell](#afterSaveCell)
+* [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='autoSelectText'>cellEdit.autoSelectText - [Bool]</a>
+Default is false, when enable it, `react-bootstrap-table2` will help you to select the text in the text input automatically when editing.
+
+> NOTE: This props only work for `text` and `textarea`.
+
+### <a name='timeToCloseMessage'>cellEdit.timeToCloseMessage - [Function]</a>
+If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
+
+### <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) => { ... }
+}
+```
+
+If you want to perform a async `beforeSaveCell`, you can do it like that:
+
+```js
+const cellEdit: {
+  // omit...
+  beforeSaveCell(oldValue, newValue, row, column, done) {
+    setTimeout(() => {
+      if (confirm('Do you want to accept this change?')) {
+        done(); // contine to save the changes
+      } else {
+        done(false); // reject the changes
+      }
+    }, 0);
+    return { async: true };
+  }
+};
+```
+
+### <a name='afterSaveCell'>cellEdit.afterSaveCell - [Function]</a>
+This callback function will be called after updating cell.
+
+```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

@@ -7,11 +7,15 @@ Available properties in a column object:
 * [text (**required**)](#text)
 
 #### Optional
+* [isDummyField](#isDummyField)
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
+* [type](#type)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
+* [sortCaret](#sortCaret)
+* [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
 * [title](#title)
@@ -25,22 +29,45 @@ Available properties in a column object:
 * [headerEvents](#headerEvents)
 * [headerAlign](#headerAlign)
 * [headerAttrs](#headerAttrs)
+* [headerSortingClasses](#headerSortingClasses)
+* [headerSortingStyle](#headerSortingStyle)
+* [footer](#footer)
+* [footerFormatter](#footerFormatter)
+* [footerClasses](#footerClasses)
+* [footerStyle](#footerStyle)
+* [footerTitle](#footerTitle)
+* [footerEvents](#footerEvents)
+* [footerAlign](#footerAlign)
+* [footerAttrs](#footerAttrs)
 * [editable](#editable)
 * [validator](#validator)
+* [editCellStyle](#editCellStyle)
+* [editCellClasses](#editCellClasses)
+* [editorStyle](#editorStyle)
+* [editorClasses](#editorClasses)
+* [editor](#editor)
+* [editorRenderer](#editorRenderer)
+* [filter](#filter)
+* [filterValue](#filterValue)
+* [searchable](#searchable)
+* [csvType](#csvType)
+* [csvFormatter](#csvFormatter)
+* [csvText](#csvText)
+* [csvExport](#csvExport)
 
 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 +94,12 @@ dataField: 'address.city'
 ```
 
 ## <a name='text'>column.text (**required**) - [String]</a>
-`text` will be apply as the column text in header column, if your header is not only text and you want to customize your header column, please check [`column.headerFormatter`](#headerFormatter)
+`text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
+
+## <a name='isDummyField'>column.isDummyField - [Bool]</a>
+Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use `isDummyField`. If column is dummy, the [`column.dataField`](#dataField) can be any string value, cause of it's meaningless.
+
+There's only one different for dummy column than normal column, which is dummy column will compare the whole row value instead of cell value when call `shouldComponentUpdate`.
 
 ## <a name='hidden'>column.hidden - [Bool]</a>
 `hidden` allow you to hide column when `true` given.
@@ -80,35 +112,79 @@ dataField: 'address.city'
 * `rowIndex`
 * [`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.
+> Attention:
+> Don't use any state data or any external data in formatter function, please pass them via [`formatExtraData`](#formatExtraData).
+> In addition, please make formatter function as pure function as possible as you can.
 
-* `column`: column object itself
-* `colIndex`
+## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
+`headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
+
+* `column`: 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.
 
+## <a name='type'>column.type - [String]</a>
+Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`.   
+`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type.
+
 ## <a name='sort'>column.sort - [Bool]</a>
 Enable the column sort via a `true` value given.
 
 ## <a name='sortFunc'>column.sortFunc - [Function]</a>
-`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept four arguments:
+`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
 
 ```js
 {
   // omit...
   sort: true,
-  sortFunc: (a, b, order, dataField) => {
-    if (order === 'asc') return a - b;
-    else return b - a;
+  sortFunc: (valueA, valueB, order, dataField, rowA, rowB) => {
+    if (order === 'asc') return valueA - valueB;
+    else return valueB - valueA;
   }
 }
 ```
 > The possible value of `order` argument is **`asc`** and **`desc`**.
 
+## <a name='sortFunc'>column.onSort - [Function]</a>
+`column.onSort` is an event listener for sort change event:
+
+```js
+{
+  // omit...
+  sort: true,
+  onSort: (field, order) => {
+    // ....
+  }
+}
+```
+
+## <a name='sortCaret'>column.sortCaret - [Function]</a>
+Use`column.sortCaret` to customize the sort caret. This callback function accept two arguments: `order` and `column`
+
+```js
+{
+  // omit...
+  sort: true,
+  sortCaret: (order, column) => {
+    return //...
+  }
+}
+```
+> The possible value of `order` argument is **`asc`**, **`desc`** and **`undefined`**.
+
 ## <a name='classes'>column.classes - [String | Function]</a>
-It's availabe to have custom class on table column:
+It's available to have custom class on table column:
 
 ```js
 {
@@ -116,7 +192,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 +209,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 +237,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 +246,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 +267,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 +276,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 +294,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
@@ -240,7 +316,7 @@ A new `Object` will be the result of element headerStyle.
 A new `String` will be the result of element title.
 
 ## <a name='headerTitle'>column.headerTitle - [Bool | Function]</a>
-`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
+Configure the title on header column, default is disable. The usage almost same as [`column.title`](#title), 
 
 ```js
 {
@@ -249,7 +325,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 +343,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
 {
@@ -317,17 +393,27 @@ A new `String` will be the result of element headerAlign.
 
 
 ## <a name='events'>column.events - [Object]</a>
-You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
+You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via `events` property.   
+
+`react-bootstrap-table2` currently only support following events which will receive some specific information:
+
+* onClick
+* onDoubleClick
+* onMouseEnter
+* onMouseLeave
+* onContextMenu
 
 ```js
 {
   // omit...
   events: {
-    onClick: e => { ... }
+    onClick: (e, column, columnIndex, row, rowIndex) => { ... },
   }
 }
 ```
 
+If the events is not listed above, the callback function will only pass the `event` object.
+
 ## <a name='headerEvents'>column.headerEvents - [Object]</a>
 `headerEvents` same as [`column.events`](#events) but this is for header column.
 
@@ -370,20 +456,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 +480,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 +501,192 @@ 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='footer'>footer - [String | Function]</a>
+Give a string to render the string value on the footer column.
+
+```js
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  footerAlign: 'center',
+  footer: 'Footer 1'
+}, .....];
+```
+
+This prop also accept a function:
+
+```js
+{
+  dataField: 'price',
+  text: 'Product Price',
+  footer: column => column.reduce((acc, item) => acc + item, 0)
+}
+```
+
+## <a name='footerFormatter'>column.footerFormatter - [Function]</a>
+`footerFormatter` allow you to customize the table footer column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+
+* `column`
+* `columnIndex`
+
+## <a name='footerClasses'>column.footerClasses - [String | Function]</a>
+It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
+
+```js
+{
+  // omit...
+  footerClasses: 'id-custom-cell'
+}
+```
+Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
+
+```js
+{
+  footerClasses: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerStyle'>column.footerStyle - [Object | Function]</a>
+Customized the inline-style on table footer column:
+
+```js
+{
+  // omit...
+  footerStyle: { backgroundColor: 'green' }
+}
+```
+
+Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
+
+```js
+{
+  footerStyle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerTitle'>column.footerTitle - [Bool | Function]</a>
+Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#title), 
+
+```js
+{
+  // omit...
+  footerTitle: true
+}
+```
+
+It's also available to custom via a callback function:
+```js
+{
+  footerTitle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerEvents'>column.footerEvents - [Object]</a>
+`footerEvents` same as [`column.events`](#events) but it is for footer column:
+
+```js
+{
+  // omit...
+  footerEvents: {
+    onClick: e => { ... }
+  }
+}
+```
+
+## <a name='footerAlign'>column.footerAlign - [String | Function]</a>
+It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on footer column. 
+
+```js
+{
+  // omit...
+  footerAlign: 'center'
+}
+```
+
+Also, you can custom the align by a callback function:
+
+```js
+{
+  // omit...
+  footerAlign: (column, colIndex) => {
+    // column is an object and perform itself
+    // return custom title here
+  }
+}
+```
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## <a name='footerAttrs'>column.footerAttrs - [Object | Function]</a>
+`footerAttrs` is similar to [`column.attrs`](#attrs) but it works for footer column. 
+```js
+{
+  // omit...
+  footerAttrs: {
+    title: 'bar',
+    'data-test': 'foo'
+  }
+}
+```
+
+Additionally, customize the header attributes by a **2** arguments callback function:
+
+```js
+{
+  // omit...
+  footerAttrs: (column, colIndex) => ({
+    // return customized HTML attribute here
+  })
+}
+```
+
+**Parameters**
+* `column`: The value of current column. 
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
 
 ## <a name='editable'>column.editable - [Bool | Function]</a>
 `column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.
@@ -444,10 +715,221 @@ 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'
 }
-```
+```
+
+If you want to perform a asycn validation, you can do it like this:
+```js
+{
+  // omit...
+  validator: (newValue, row, column, done) => {
+    settimeout(() => {
+      // async validation ok
+      return done();
+
+      // async validation not ok
+      return done({
+        valid: false,
+        message: 'SOME_REASON_HERE'
+      });
+
+    }, 2000);
+    return { async: true };
+  }
+}
+```
+
+
+## <a name='editCellStyle'>column.editCellStyle - [Object | Function]</a>
+You can use `column.editCellStyle` to custom the style of `<td>` when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
+
+**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]
+}
+```
+
+## <a name='searchable'>column.searchable - [Boolean]</a>
+Default the column is searchable. Give `false` to disable search functionality on specified column.
+
+## <a name='csvType'>column.csvType - [Object]</a>
+Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
+
+## <a name='csvFormatter'>column.csvFormatter - [Function]</a>
+
+This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV.
+
+## <a name='csvText'>column.csvText - [String]</a>
+Custom the CSV header cell, Default is [`column.text`](#text).
+
+## <a name='csvExport'>column.csvExport - [Bool]</a>
+Default is `true`, `false` will hide this column when export CSV.

docs/development.md

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

docs/migration.md

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

docs/row-expand.md

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

docs/row-selection.md

@@ -1,32 +1,45 @@
 
 # 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 prepend a new selection column. 
 
+## Required
+* [mode (**required**)](#mode)
 
-## Available properties
+## Optional
+* [selected](#selected)
+* [style](#style)
+* [classes)](#classes)
+* [bgColor](#bgColor)
+* [nonSelectable)](#nonSelectable)
+* [clickToSelect)](#clickToSelect)
+* [clickToExpand)](#clickToExpand)
+* [clickToEdit](#clickToEdit)
+* [onSelect](#onSelect)
+* [onSelectAll](#onSelectAll)
+* [selectColumnPosition](#selectColumnPosition)
+* [hideSelectColumn](#hideSelectColumn)
+* [hideSelectAll](#hideSelectAll)
+* [selectionRenderer](#selectionRenderer)
+* [selectionHeaderRenderer](#selectionHeaderRenderer)
+* [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
 
-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 +48,299 @@ 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='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
+Default is false, enable it will let user able to expand and select row when user clicking on the row.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  clickToExpand: true
+};
+```
+
+### <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
+Able to click to edit cell and select row
+
+```js
+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, rowIndex }) => (
+    // ....
+  )
+};
+```
+
+> 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='headerColumnStyle'>selectRow.headerColumnStyle - [Object | Function]</a>
+A way to custome the selection header cell. `headerColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  headerColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  headerColumnStyle:  (status) => (
+    // status available value is checked, indeterminate and unchecked
+    return { backgroundColor: 'blue' };
+  )
+};
+```
+
+### <a name='selectColumnStyle'>selectRow.selectColumnStyle - [Object | Function]</a>
+A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+If a callback function present, you can get below information to custom the selection cell:
+
+* `checked`: Whether current row is seleccted or not
+* `disabled`: Whether current row is disabled or not
+* `rowIndex`: Current row index
+* `rowKey`: Current row key
+
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle:  ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => (
+    // ....
+    return { backgroundColor: 'blue' };
+  )
+};
+```
+
+### <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) => {
+    // ...
+  }
+};
+```
+
+> If you want to reject current select action, just return `false`:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelect: (row, isSelect, rowIndex, e) => {
+    if (SOME_CONDITION) {
+      return false;
+    }
+  }
+};
+```
+
+### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
+This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelectAll: (isSelect, rows, e) => {
+    // ...
+  }
+};
+```
+
+> If you want to control the final selection result, just return a row key array:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  onSelectAll: (isSelect, rows, e) => {
+    if (isSelect && SOME_CONDITION) {
+      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
+    }
+  }
+};
+```
+
+### <a name='selectColumnPosition'>selectRow.selectColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnPosition: 'right'
+};
+```
+
+### <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'
+};
+```
+
+### <a name='hideSelectAll'>selectRow.hideSelectAll - [Bool]</a>
+Default is `false`, if you don't want to render the select all checkbox on the header of selection column, give this prop as `true`!
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  hideSelectAll: true
+};
+```

enzyme-setup.js

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

gulpfile.babel.js

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

lerna.json

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

package.json

@@ -1,76 +1,106 @@
 {
   "name": "react-bootstrap-table2",
   "version": "0.0.1",
+  "private": true,
   "description": "Rebuilt for react-bootstrap-table",
   "main": "index.js",
   "scripts": {
     "postinstall": "lerna bootstrap",
-    "start": "node -r babel-register ./node_modules/.bin/webpack-dev-server --config webpack.config.babel.js",
+    "build": "./node_modules/.bin/gulp prod",
     "lint": "eslint ./packages --ext .js --ext .jsx --ignore-path .gitignore",
     "pretest": "yarn lint --cache",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch",
-    "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook"
+    "test:watch": "jest --coverage --watch",
+    "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook",
+    "gh-pages:clean": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:clean",
+    "gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build",
+    "release": "yarn install && yarn build && lerna publish"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
   },
-  "author": "",
-  "license": "ISC",
+  "author": "AllenFang",
+  "contributors": [
+    {
+      "name": "Allen Fang",
+      "email": "ayu780129@hotmail.com",
+      "url": "https://github.com/AllenFang"
+    },
+    {
+      "name": "Chun-MingChen",
+      "email": "nick830314@gmail.com",
+      "url": "https://github.com/Chun-MingChen"
+    }
+  ],
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/react-bootstrap-table/react-bootstrap-table2/issues"
   },
   "homepage": "https://github.com/react-bootstrap-table/react-bootstrap-table2#readme",
   "devDependencies": {
-    "babel-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.4.0",
+    "enzyme-adapter-react-16.3": "1.0.0",
+    "enzyme-to-json": "3.3.4",
+    "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.7.0",
+    "eslint-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.4.0",
+    "react-dom": "16.4.0",
+    "underscore": "1.9.1"
   },
   "jest": {
     "collectCoverageFrom": [
-      "packages/**/*.js"
+      "packages/*/src/**/*.js",
+      "packages/*/index.js",
+      "!packages/react-bootstrap-table2-example/**/*.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,272 @@
+# 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. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop.
+
+#### editor.options
+This is most simple case for assign the dropdown options data directly.   
+
+```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'
+    }]
+  }
+}];
+```
+
+#### editor.getOptions
+It is much flexible which accept a function and you can assign the dropdown options dynamically.
+
+There are two case for `getOptions`:
+
+* *Synchronous*: Just return the options array in `getOptions` callback function
+* *Asynchronous*: Call `setOptions` function argument when you get the options from remote. 
+
+
+```js
+// Synchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => [.....]
+  }
+}];
+
+// Asynchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => {
+      setTimeout(() => setOptions([...]), 1500);
+    }
+  }
+}];
+
+```
+
+[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example.
+
+### 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.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+```
+
+### Textarea Editor
+Textarea editor is use `<input type="textarea">`, user can press `ENTER` to change line and in the `react-bootstrap-table2`, user allow to save result via press `SHIFT` + `ENTER`.
+
+```js
+const columns = [
+  ..., {
+  dataField: 'comment',
+  text: 'Product Comments',
+  editor: {
+    type: Type.TEXTAREA
+  }
+}];
+```
+### Checkbox Editor
+Checkbox editor allow you to have a pair value choice, the `editor.value` is required value to represent the actual value for check and uncheck.
+
+```js
+const columns = [
+  ..., {
+  dataField: 'comment',
+  text: 'Product Comments',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'Y:N'
+  }
+}];
+```
+
+## Customize Editor
+If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via [column.editorRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). It accept a function and pass following arguments when function called:
+
+* `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
+* `value`: Current cell value
+* `row`: Current row data
+* `column`: Current column definition
+* `rowIndex`: Current row index
+* `columnIndex`: Current column index
+
+> Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
+
+> Note when you want to save value, you can call **editorProps.onUpdate** function
+
+Following is a short example:
+
+```js
+class QualityRanger extends React.Component {
+  static propTypes = {
+    value: PropTypes.number,
+    onUpdate: PropTypes.func.isRequired
+  }
+  static defaultProps = {
+    value: 0
+  }
+  getValue() {
+    return parseInt(this.range.value, 10);
+  }
+  render() {
+    const { value, onUpdate, ...rest } = this.props;
+    return [
+      <input
+        { ...rest }
+        key="range"
+        ref={ node => this.range = node }
+        type="range"
+        min="0"
+        max="100"
+      />,
+      <button
+        key="submit"
+        className="btn btn-default"
+        onClick={ () => onUpdate(this.getValue()) }
+      >
+        done
+      </button>
+    ];
+  }
+}
+
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quality',
+  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+    <QualityRanger { ...editorProps } value={ value } />
+  )
+}];
+```

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,88 @@
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+class DropDownEditor extends Component {
+  constructor(props) {
+    super(props);
+    let options = props.options;
+    if (props.getOptions) {
+      options = props.getOptions(
+        this.setOptions.bind(this),
+        {
+          row: props.row,
+          column: props.column
+        }
+      ) || [];
+    }
+    this.state = { options };
+  }
+
+  componentDidMount() {
+    const { defaultValue, didMount } = this.props;
+    this.select.value = defaultValue;
+    this.select.focus();
+    if (didMount) didMount();
+  }
+
+  setOptions(options) {
+    this.setState({ options });
+  }
+
+  getValue() {
+    return this.select.value;
+  }
+
+  render() {
+    const { defaultValue, didMount, getOptions, className, ...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 }
+      >
+        {
+          this.state.options.map(({ label, value }) => (
+            <option key={ value } value={ value }>{ label }</option>
+          ))
+        }
+      </select>
+    );
+  }
+}
+
+DropDownEditor.propTypes = {
+  row: PropTypes.object.isRequired,
+  column: PropTypes.object.isRequired,
+  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
+    }))
+  ]),
+  didMount: PropTypes.func,
+  getOptions: PropTypes.func
+};
+DropDownEditor.defaultProps = {
+  className: '',
+  defaultValue: '',
+  style: {},
+  options: [],
+  didMount: undefined,
+  getOptions: undefined
+};
+export default DropDownEditor;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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-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/preview-head.html

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

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

@@ -1,7 +1,15 @@
 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 toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const toolkitStylePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -11,6 +19,13 @@ const aliasPath = {
   src: srcPath,
   components: path.join(srcPath, 'components'),
   utils: path.join(srcPath, 'utils'),
+
+  'react-bootstrap-table-next': sourcePath,
+  'react-bootstrap-table2-editor': editorSourcePath,
+  'react-bootstrap-table2-filter': filterSourcePath,
+  'react-bootstrap-table2-overlay': overlaySourcePath,
+  'react-bootstrap-table2-paginator': paginationSourcePath,
+  'react-bootstrap-table2-toolkit': toolkitSourcePath
 };
 
 const loaders = [{
@@ -22,15 +37,20 @@ 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,
+    toolkitStylePath
+  ],
 }, {
   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/exposed-function.js

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { 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/large-table.js

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { 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/basic/tabindex-column.js

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

packages/react-bootstrap-table2-example/examples/bootstrap4/column-toggle.js

@@ -0,0 +1,81 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <ToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <ToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

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

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

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

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

@@ -0,0 +1,90 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <ClearSearchButton { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <ClearSearchButton { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { 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-async-hooks-table.js

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

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

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

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

@@ -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,32 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const cellEdit = {
-  mode: 'click',
-  beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
-  afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
-};
-
-<BootstrapTableful
-  keyField='id'
+<BootstrapTable
+  keyField="id"
   data={ products }
   columns={ columns }
-  cellEdit={ cellEdit }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('start to edit!!!'); },
+    beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+    afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+  }) }
 />
 `;
 
-const cellEdit = {
-  mode: 'click',
-  beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
-  afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
-};
 export default () => (
   <div>
-    <BootstrapTableful keyField="id" data={ products } columns={ columns } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('Start to edit!!!'); },
+        beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
+        afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
+      }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

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

@@ -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-edit-with-data-type.js

@@ -0,0 +1,123 @@
+/* eslint prefer-template: 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 products = stockGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Stock ID'
+}, {
+  dataField: 'name',
+  text: 'Stock Name'
+}, {
+  dataField: 'price',
+  text: 'Price',
+  type: 'number'
+}, {
+  dataField: 'visible',
+  text: 'Visible?',
+  type: 'bool',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'true:false'
+  }
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  type: 'date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Stock ID'
+}, {
+  dataField: 'name',
+  text: 'Stock Name'
+}, {
+  dataField: 'price',
+  text: 'Price',
+  type: 'number'
+}, {
+  dataField: 'visible',
+  text: 'Visible?',
+  type: 'bool',
+  editor: {
+    type: Type.CHECKBOX,
+    value: 'true:false'
+  }
+}, {
+  dataField: 'inStockDate',
+  text: 'Stock Date',
+  type: 'date',
+  formatter: (cell) => {
+    let dateObj = cell;
+    if (typeof cell !== 'object') {
+      dateObj = new Date(cell);
+    }
+    return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
+  },
+  editor: {
+    type: Type.DATE
+  }
+}];
+
+function afterSaveCell(oldValue, newValue) {
+  console.log('--after save cell--');
+  console.log('New Value was apply as');
+  console.log(newValue);
+  console.log(\`and the type is $\{typeof newValue}\`);
+}
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  cellEdit={ cellEditFactory({
+    mode: 'click',
+    blurToSave: true,
+    afterSaveCell
+  }) }
+/>
+`;
+
+function afterSaveCell(oldValue, newValue) {
+  console.log('--after save cell--');
+  console.log('New Value was apply as');
+  console.log(newValue);
+  console.log(`and the type is ${typeof newValue}`);
+}
+
+export default () => (
+  <div>
+    <h3>Save Cell Value with Specified Data Type</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      cellEdit={ cellEditFactory({
+        mode: 'click',
+        blurToSave: true,
+        afterSaveCell
+      }) }
+    />
+    <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>Checkbox Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ todos }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { 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/dbclick-to-edit-with-selection-table.js

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

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

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

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

@@ -0,0 +1,164 @@
+/* eslint no-console: 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 { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator().map(j => ({
+  ...j,
+  type2: j.type
+}));
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type1',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => {
+      console.log(`current editing row id: ${row.id}`);
+      console.log(`current editing column: ${column.dataField}`);
+      return [{
+        value: 'A',
+        label: 'A'
+      }, {
+        value: 'B',
+        label: 'B'
+      }, {
+        value: 'C',
+        label: 'C'
+      }, {
+        value: 'D',
+        label: 'D'
+      }, {
+        value: 'E',
+        label: 'E'
+      }];
+    }
+  }
+}, {
+  dataField: 'type2',
+  text: 'Job Type2',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => {
+        setOptions([{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }, {
+          value: 'D',
+          label: 'D'
+        }, {
+          value: 'E',
+          label: 'E'
+        }]);
+      }, 2000);
+    }
+  }
+}];
+
+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 Type1',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => {
+      console.log(\`current editing row id: $\{row.id}\`);
+      console.log(\`current editing column: $\{column.dataField}\`);
+      return [{
+        value: 'A',
+        label: 'A'
+      }, {
+        value: 'B',
+        label: 'B'
+      }, {
+        value: 'C',
+        label: 'C'
+      }, {
+        value: 'D',
+        label: 'D'
+      }, {
+        value: 'E',
+        label: 'E'
+      }];
+    }
+  }
+}, {
+  dataField: 'type2',
+  text: 'Job Type2',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions) => {
+      setTimeout(() => {
+        setOptions([{
+          value: 'A',
+          label: 'A'
+        }, {
+          value: 'B',
+          label: 'B'
+        }, {
+          value: 'C',
+          label: 'C'
+        }, {
+          value: 'D',
+          label: 'D'
+        }, {
+          value: 'E',
+          label: 'E'
+        }]);
+      }, 2000);
+    }
+  }
+}];
+
+<BootstrapTable
+  keyField="id"
+  data={ jobs }
+  columns={ columns }
+  cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Dropdown Editor with Dynamic Options</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>Textarea Editor</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      cellEdit={ cellEditFactory({ mode: 'click', blurToSave: true }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

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

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

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

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

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

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

@@ -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 { jobsGenerator1 } from 'utils/common';
+
+const jobs = jobsGenerator1(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-filter.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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