Publish

- react-bootstrap-table2-editor@0.1.3
 - react-bootstrap-table2-example@0.1.4
 - react-bootstrap-table-next@0.1.5

.travis.yml

@@ -9,8 +9,7 @@ cache:
 
 branches:
   only:
-  # skip master branch when it's under development phase
+  - master
-  # - master 
   - develop
 
 before_install:

CONTRIBUTING.md

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

LICENSE

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

README.md

@@ -1,12 +1,42 @@
 # react-bootstrap-table2
+[![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)  
 Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
-## Development
+> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it   
-Please check [development guide](./docs/development.md).
+
+`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
+
+* [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+
+This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP).
+
+## Migration
+If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md).
 
 ## Usage
 See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
 
+## Online Demo
+See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
+
 ## Roadmap
 See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
 
+## Development
+Please check [development guide](./docs/development.md).
+
+## How should I run storybook example in my local?
+
+```sh
+$ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
+$ cd react-bootstrap-table2
+$ yarn install
+$ yarn storybook
+$ Go to localhost:6006
+```
+
+**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**

_config.yml

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

docs/README.md

@@ -15,6 +15,8 @@
 * [bordered](#bordered)
 * [hover](#hover)
 * [condensed](#condensed)
+* [id](#id)
+* [classes](#classes)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
 * [rowStyle](#rowStyle)
@@ -59,14 +61,14 @@ A special case for remote pagination:
 remote={ { pagination: true, filter: false, sort: false } }
 ```
 
-There is a apecial case for remote pagination, even you only specified the paignation need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall datas.
+There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
 
 ### <a name='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 funtion which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
+`overlay` accept a factory function which should returning a higher order component. By default, `react-bootstrap-table2-overlay` can be a good option for you:
 
 ```sh
 $ npm install react-bootstrap-table2-overlay
@@ -100,6 +102,10 @@ Same as bootstrap `.table-hover` class for adding mouse hover effect (grey backg
 ### <a name='condensed'>condensed - [Bool]</a>
 Same as bootstrap `.table-condensed` class for making a table more compact by cutting cell padding in half.
 
+### <a name='id'>id - [String]</a>
+Customize id on `table` element.
+### <a name='classes'>classes - [String]</a>
+Customize class on `table` element.
 ### <a name='cellEdit'>cellEdit - [Object]</a>
 Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 
@@ -145,7 +151,7 @@ Custom the events on row:
 
 ```js
 const rowEvents = {
-  onClick: (e) => {
+  onClick: (e, row, rowIndex) => {
     ....
   }
 };
@@ -163,7 +169,7 @@ const defaultSorted = [{
 ```
 
 ### <a name='pagination'>pagination - [Object]</a>
-`pagination` allow user to render a pagination panel on the bottom of table. But pagination funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionaly.
+`pagination` allow user to render a pagination panel on the bottom of table. But pagination functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-paginator` additionally.
 
 ```sh
 $ npm install react-bootstrap-table2-paginator --save
@@ -205,7 +211,7 @@ paginator({
   prePageTitle: 'Go to previous', // the title of previous page button
   firstPageTitle: 'Go to first', // the title of first page button
   lastPageTitle: 'Go to last', // the title of last page button
-  hideSizePerPage: true, // hide the size per page dorpdown
+  hideSizePerPage: true, // hide the size per page dropdown
   hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
   onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
   onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
@@ -213,7 +219,7 @@ paginator({
 ```
 
 ### <a name='filter'>filter - [Object]</a>
-`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
+`filter` allow user to filter data by column. However, filter functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
 
 ```sh
 $ npm install react-bootstrap-table2-filter --save

docs/columns.md

@@ -12,6 +12,7 @@ Available properties in a column object:
 * [formatExtraData](#formatExtraData)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
+* [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
 * [title](#title)
@@ -122,8 +123,21 @@ Enable the column sort via a `true` value given.
 ```
 > The possible value of `order` argument is **`asc`** and **`desc`**.
 
+## <a name='sortFunc'>column.onSort - [Function]</a>
+`column.onSort` is an event listener for sort change event:
+
+```js
+{
+  // omit...
+  sort: true,
+  onSort: (field, order) => {
+    // ....
+  }
+}
+```
+
 ## <a name='classes'>column.classes - [String | Function]</a>
-It's availabe to have custom class on table column:
+It's available to have custom class on table column:
 
 ```js
 {
@@ -151,7 +165,7 @@ In addition, `classes` also accept a callback function which have more power to
 A new `String` will be the result as element class.
 
 ## <a name='headerClasses'>column.headerClasses - [String | Function]</a>
-It's similar to [`column.classes`](#classes), `headerClasses` is availabe to have customized class on table header column:
+It's similar to [`column.classes`](#classes), `headerClasses` is available to have customized class on table header column:
 
 ```js
 {
@@ -176,7 +190,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
 {
@@ -206,7 +220,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
 {
@@ -264,7 +278,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) { ... }
@@ -387,7 +401,7 @@ A new `Object` will be the result of element HTML attributes.
 
 > 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
 {
@@ -398,7 +412,7 @@ A new `Object` will be the result of element HTML attributes.
 ```
 
 ## <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...
@@ -430,7 +444,7 @@ A new `Object` will be the result of element headerAttrs.
 
 > Caution:   
 > Same as [column.attrs](#attrs), it has lower priority and will be
-> overwrited when other props related to HTML attributes were given.
+> overwritten when other props related to HTML attributes were given.
 
 ### <a name='headerSortingClasses'>headerSortingClasses - [String | Function]</a>
 
@@ -453,7 +467,7 @@ const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => { .
 
 ### <a name='headerSortingStyle'>headerSortingStyle - [Object | Function]</a>
 
-It's similiar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
+It's similar to [headerSortingClasses](#headerSortingClasses). It allows to customize the style of header cell when this column is sorting. A style `Object` and `callback` are acceptable. `callback` takes **4** arguments and an `Object` is expected to return:
 
 ```js
 const sortingHeaderStyle = {
@@ -488,7 +502,7 @@ If a callback function given, you can control the editable level as cell level:
 }
 ```
 
-The return value can be a bool or an object. If your valiation is pass, return `true` explicitly. If your valiation is invalid, return following object instead:
+The return value can be a bool or an object. If your validation is pass, return `true` explicitly. If your validation is invalid, return following object instead:
 ```js
 {
   valid: false,
@@ -542,6 +556,7 @@ Or take a callback function
 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`)
 
 We have a quick example to show you how to use `column.filter`:
 
@@ -559,7 +574,7 @@ import { textFilter } from 'react-bootstrap-table2-filter';
 For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.
 
 ## <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 filterd:
+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. 

docs/migration.md

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

docs/row-selection.md

@@ -6,6 +6,7 @@
 * [mode (**required**)](#mode)
 
 ## Optional
+* [selected](#selected)
 * [style](#style)
 * [classes)](#classes)
 * [bgColor](#bgColor)
@@ -52,6 +53,16 @@ const selectRow = {
 />
 ```
 
+### <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:
 
@@ -91,7 +102,7 @@ const selectRow = {
 ```
 
 ### <a name='bgColor'>selectRow.bgColor - [String | Function]</a>
-The backgroud color when row is selected
+The background color when row is selected
 
 ```js
 const selectRow = {

gulpfile.babel.js

@@ -24,6 +24,7 @@ const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
 
 const STYLE_PKGS = [
   'react-bootstrap-table2',
+  'react-bootstrap-table2-filter',
   'react-bootstrap-table2-paginator'
 ].reduce((pkg, curr) => `${curr}|${pkg}`, '');
 

package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-bootstrap-table2",
   "version": "0.0.1",
+  "private": true,
   "description": "Rebuilt for react-bootstrap-table",
   "main": "index.js",
   "scripts": {
@@ -20,11 +21,18 @@
     "url": "git+https://github.com/react-bootstrap-table/react-bootstrap-table2.git"
   },
   "author": "AllenFang",
-  "contributors": [{
+  "contributors": [
-    "name": "Chun-MingChen",
+    {
-    "email": "nick830314@gmail.com",
+      "name": "Allen Fang",
-    "url": "https://github.com/Chun-MingChen"
+      "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"
@@ -60,7 +68,7 @@
     "jest": "20.0.4",
     "jsdom": "11.2.0",
     "jsdom-global": "3.0.2",
-    "lerna": "2.0.0",
+    "lerna": "2.8.0",
     "node-sass": "4.5.3",
     "react-test-renderer": "16.0.0",
     "sass-loader": "6.0.6",

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

@@ -4,6 +4,8 @@
 
 **[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

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "0.0.3",
+  "version": "0.1.3",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {
@@ -28,6 +28,11 @@
   ],
   "author": "AllenFang",
   "contributors": [
+    {
+      "name": "Allen Fang",
+      "email": "ayu780129@hotmail.com",
+      "url": "https://github.com/AllenFang"
+    },
     {
       "name": "Chun-MingChen",
       "email": "nick830314@gmail.com",

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

@@ -32,9 +32,10 @@ TextEditor.propTypes = {
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ]).isRequired
+  ])
 };
 TextEditor.defaultProps = {
-  className: null
+  className: null,
+  defaultValue: ''
 };
 export default TextEditor;

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

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

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

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

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

@@ -18,6 +18,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable
   keyField="id"
   data={ products }

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

@@ -18,6 +18,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -0,0 +1,48 @@
+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 } />
+`;
+
+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 } />
+
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -18,6 +18,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

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

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

@@ -18,6 +18,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+// omit...
+
 <BootstrapTable
   keyField="id"
   data={ products }

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

@@ -19,8 +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'

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

@@ -23,8 +23,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -21,8 +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'

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

@@ -27,8 +27,9 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -34,8 +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'

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

@@ -21,8 +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'
@@ -45,6 +46,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Only Product Price is bigger than 2101 is editable</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

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

@@ -20,8 +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'
@@ -43,6 +44,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Click to edit cell</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

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

@@ -20,8 +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'
@@ -48,6 +49,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Product Name is non editable</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

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

@@ -19,8 +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'
@@ -42,6 +43,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Double click to edit cell</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

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

@@ -19,8 +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'
@@ -45,6 +46,7 @@ const columns = [{
 `;
 export default () => (
   <div>
+    <h3>Product ID: 0, 3 is non editable</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

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

@@ -32,6 +32,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const owners = ['Allen', 'Bob', 'Cat'];

packages/react-bootstrap-table2-example/examples/column-filter/custom-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

@@ -29,6 +29,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -22,6 +22,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{

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

@@ -22,6 +22,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
 
 const columns = [{

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

@@ -20,6 +20,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{

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

@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -39,6 +41,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Try to hover on Product Name header column</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>

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

@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -23,6 +23,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -31,6 +31,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function priceFormatter(cell, row) {
   if (row.onSale) {
     return (

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

@@ -34,6 +34,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function rankFormatter(cell, row, rowIndex, formatExtraData) {
   return (
     <i className={ formatExtraData[cell] } />

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

@@ -20,6 +20,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -33,6 +33,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -39,6 +39,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Try to hover on any Product Name cells</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>

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

@@ -32,6 +32,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'User ID'

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

@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -24,6 +24,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -23,10 +23,12 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
-  events: {
+  headerEvents: {
     onClick: () => alert('Click on Product ID header column')
   }
 }, {

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

@@ -41,6 +41,7 @@ const defaultSorted = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 // ...
 function priceFormatter(column, colIndex, { sortElement, filterElement }) {

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

@@ -26,6 +26,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 function priceFormatter(column, colIndex) {
   return (
     <h5><strong>$$ { column.text } $$</strong></h5>

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

@@ -32,6 +32,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -21,6 +21,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

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

@@ -22,7 +22,7 @@ const columns = [{
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -23,7 +23,7 @@ const columns = [{
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
-// ...
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

packages/react-bootstrap-table2-example/examples/remote/remote-celledit.js

@@ -19,8 +19,10 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import cellEditFactory from 'react-bootstrap-table2-editor';
 // ...
+
 const RemoteCellEdit = (props) => {
   const cellEdit = {
     mode: 'click',
@@ -42,12 +44,6 @@ const RemoteCellEdit = (props) => {
   );
 };
 
-RemoteCellEdit.propTypes = {
-  data: PropTypes.array.isRequired,
-  onTableChange: PropTypes.func.isRequired,
-  errorMessage: PropTypes.string.isRequired
-};
-
 class Container extends React.Component {
   constructor(props) {
     super(props);

packages/react-bootstrap-table2-example/examples/remote/remote-filter.js

@@ -23,6 +23,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 
 const columns = [{
@@ -38,7 +39,61 @@ const columns = [{
   filter: textFilter()
 }];
 
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+const RemoteFilter = props => (
+  <div>
+    <BootstrapTable
+      remote={ { filter: true } }
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+      filter={ filterFactory() }
+      onTableChange={ props.onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products
+    };
+  }
+
+  handleTableChange = (type, { filters }) => {
+    setTimeout(() => {
+      const result = products.filter((row) => {
+        let valid = true;
+        for (const dataField in filters) {
+          const { filterVal, filterType, comparator } = filters[dataField];
+
+          if (filterType === 'TEXT') {
+            if (comparator === Comparator.LIKE) {
+              valid = row[dataField].toString().indexOf(filterVal) > -1;
+            } else {
+              valid = row[dataField] === filterVal;
+            }
+          }
+          if (!valid) break;
+        }
+        return valid;
+      });
+      this.setState(() => ({
+        data: result
+      }));
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteFilter
+        data={ this.state.data }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
 `;
 
 const RemoteFilter = props => (

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

@@ -47,7 +47,7 @@ class Container extends React.Component {
     };
   }
 
-  handleTableChange = ({ page, sizePerPage }) => {
+  handleTableChange = (type, { page, sizePerPage }) => {
     const currentIndex = (page - 1) * sizePerPage;
     setTimeout(() => {
       this.setState(() => ({

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

@@ -21,7 +21,7 @@ const columns = [{
 }];
 
 const sourceCode = `\
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import BootstrapTable from 'react-bootstrap-table-next';
 
 const columns = [{
   dataField: 'id',
@@ -36,7 +36,64 @@ const columns = [{
   filter: textFilter()
 }];
 
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+const RemoteSort = props => (
+  <div>
+    <BootstrapTable
+      remote={ { sort: true } }
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+      onTableChange={ props.onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products
+    };
+  }
+
+  handleTableChange = (type, { sortField, sortOrder, data }) => {
+    setTimeout(() => {
+      let result;
+      if (sortOrder === 'asc') {
+        result = data.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return 1;
+          } else if (b[sortField] > a[sortField]) {
+            return -1;
+          }
+          return 0;
+        });
+      } else {
+        result = data.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return -1;
+          } else if (b[sortField] > a[sortField]) {
+            return 1;
+          }
+          return 0;
+        });
+      }
+      this.setState(() => ({
+        data: result
+      }));
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteSort
+        data={ this.state.data }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
 `;
 
 const RemoteSort = props => (

packages/react-bootstrap-table2-example/examples/row-selection/click-to-select-with-cell-edit.js

@@ -1,6 +1,7 @@
 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';
 
@@ -23,11 +24,10 @@ const selectRow = {
   clickToEdit: true
 };
 
-const cellEdit = {
-  mode: 'click'
-};
-
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -50,16 +50,23 @@ const cellEdit = {
 };
 
 <BootstrapTable
-  keyField='id'
+  keyField="id"
   data={ products }
   columns={ columns }
   selectRow={ selectRow }
+  cellEdit={ cellEditFactory({ mode: 'click' }) }
 />
 `;
 
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } cellEdit={ cellEdit } />
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ selectRow }
+      cellEdit={ cellEditFactory({ mode: 'click' }) }
+    />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/row-selection/click-to-select.js

@@ -23,6 +23,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -0,0 +1,59 @@
+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: 'checkbox',
+  clickToSelect: true,
+  selected: [1, 3]
+};
+
+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: 'checkbox',
+  clickToSelect: true,
+  selected: [1, 3]
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -25,6 +25,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -23,6 +23,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows.js

@@ -24,6 +24,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -31,6 +31,8 @@ const selectRow2 = {
 };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -32,6 +32,8 @@ const selectRow2 = {
 };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -34,6 +34,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -0,0 +1,144 @@
+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';
+
+class SelectionManagment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { selected: [0, 1] };
+  }
+
+  handleBtnClick = () => {
+    if (!this.state.selected.includes(2)) {
+      this.setState(() => ({
+        selected: [...this.state.selected, 2]
+      }));
+    } else {
+      this.setState(() => ({
+        selected: this.state.selected.filter(x => x !== 2)
+      }));
+    }
+  }
+
+  handleOnSelect = (row, isSelect) => {
+    if (isSelect) {
+      this.setState(() => ({
+        selected: [...this.state.selected, row.id]
+      }));
+    } else {
+      this.setState(() => ({
+        selected: this.state.selected.filter(x => x !== row.id)
+      }));
+    }
+  }
+
+  handleOnSelectAll = (isSelect, rows) => {
+    const ids = rows.map(r => r.id);
+    if (isSelect) {
+      this.setState(() => ({
+        selected: ids
+      }));
+    } else {
+      this.setState(() => ({
+        selected: []
+      }));
+    }
+  }
+
+  render() {
+    const selectRow = {
+      mode: 'checkbox',
+      clickToSelect: true,
+      selected: this.state.selected,
+      onSelect: this.handleOnSelect,
+      onSelectAll: this.handleOnSelectAll
+    };
+    return (
+      <div>
+        <button className="btn btn-success" onClick={ this.handleBtnClick }>Select/UnSelect 3rd row</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class SelectionManagment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { selected: [0, 1] };
+  }
+
+  handleBtnClick = () => {
+    if (!this.state.selected.includes(2)) {
+      this.setState(() => ({
+        selected: [...this.state.selected, 2]
+      }));
+    } else {
+      this.setState(() => ({
+        selected: this.state.selected.filter(x => x !== 2)
+      }));
+    }
+  }
+
+  handleOnSelect = (row, isSelect) => {
+    if (isSelect) {
+      this.setState(() => ({
+        selected: [...this.state.selected, row.id]
+      }));
+    } else {
+      this.setState(() => ({
+        selected: this.state.selected.filter(x => x !== row.id)
+      }));
+    }
+  }
+
+  handleOnSelectAll = (isSelect, rows) => {
+    const ids = rows.map(r => r.id);
+    if (isSelect) {
+      this.setState(() => ({
+        selected: ids
+      }));
+    } else {
+      this.setState(() => ({
+        selected: []
+      }));
+    }
+  }
+
+  render() {
+    const selectRow = {
+      mode: 'checkbox',
+      clickToSelect: true,
+      selected: this.state.selected,
+      onSelect: this.handleOnSelect,
+      onSelectAll: this.handleOnSelectAll
+    };
+    return (
+      <div>
+        <button className="btn btn-success" onClick={ this.handleBtnClick }>Select/UnSelect 3rd row</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -34,6 +34,8 @@ const selectRow2 = {
 };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

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

@@ -23,6 +23,8 @@ const selectRow = {
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

packages/react-bootstrap-table2-example/examples/rows/row-class.js

@@ -20,6 +20,8 @@ const columns = [{
 const rowClasses1 = 'custom-row-class';
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

packages/react-bootstrap-table2-example/examples/rows/row-event.js

@@ -1,5 +1,5 @@
 /* eslint no-unused-vars: 0 */
-/* eslint no-console: 0 */
+/* eslint no-alert: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -20,12 +20,14 @@ const columns = [{
 }];
 
 const rowEvents = {
-  onClick: (e) => {
+  onClick: (e, row, rowIndex) => {
-    console.log('click on row');
+    alert(`clicked on row with index: ${rowIndex}`);
   }
 };
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'
@@ -38,16 +40,17 @@ const columns = [{
 }];
 
 const rowEvents = {
-  onClick: (e) => {
+  onClick: (e, row, rowIndex) => {
-    console.log('click on row');
+    alert(\`clicked on row with index: \${rowIndex}\`);
   }
 };
 
-<BootstrapTable keyField='id' data={ products } columns={ columns } rowStyle={ rowStyle } />
+<BootstrapTable keyField='id' data={ products } columns={ columns } rowEvents={ rowEvents } />
 `;
 
 export default () => (
   <div>
+    <h3>Try to click on any rows</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } rowEvents={ rowEvents } />
     <Code>{ sourceCode }</Code>
   </div>

packages/react-bootstrap-table2-example/examples/rows/row-style.js

@@ -20,6 +20,8 @@ const columns = [{
 const rowStyle1 = { backgroundColor: '#c8e6c9' };
 
 const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID'

packages/react-bootstrap-table2-example/examples/sort/custom-sort-table.js

@@ -29,6 +29,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -54,6 +56,7 @@ const columns = [{
 
 export default () => (
   <div>
+    <h3>Product ID sorting is reverted</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>

packages/react-bootstrap-table2-example/examples/sort/default-sort-table.js

@@ -27,6 +27,8 @@ const defaultSorted = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',

packages/react-bootstrap-table2-example/examples/sort/enable-sort-table.js

@@ -20,6 +20,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const columns = [{
   dataField: 'id',
   text: 'Product ID',
@@ -36,9 +38,28 @@ const columns = [{
 <BootstrapTable keyField='id' data={ products } columns={ columns } />
 `;
 
-export default () => (
+export default class Test extends React.Component {
-  <div>
+  constructor(props) {
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    super(props);
-    <Code>{ sourceCode }</Code>
+    this.state = { data: products };
-  </div>
+  }
-);
+
+  handleClick = () => {
+    this.setState(() => {
+      const newProducts = productsGenerator(21);
+      return {
+        data: newProducts
+      };
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
+        <BootstrapTable keyField="id" data={ this.state.data } columns={ columns } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/sort/header-sorting-classes.js

@@ -31,6 +31,8 @@ const columns = [{
 }];
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const headerSortingClasses = (column, sortOrder, isLastSorting, colIndex) => (
   sortOrder === 'asc' ? 'demo-sorting-asc' : 'demo-sorting-desc'
 );

packages/react-bootstrap-table2-example/examples/sort/header-sorting-style.js

@@ -26,6 +26,8 @@ const columns = [{
 
 
 const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
 const headerSortingStyle = { backgroundColor: '#c8e6c9' };
 
 const columns = [{

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

@@ -0,0 +1,58 @@
+/* eslint no-console: 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,
+  onSort: (field, order) => {
+    console.log(`Sort Field: ${field}, Sort Order: ${order}`);
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+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,
+  onSort: (field, order) => {
+    console.log(....);
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } defaultSorted={ defaultSorted } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "0.0.3",
+  "version": "0.1.4",
   "description": "",
   "main": "index.js",
   "private": true,
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@storybook/addon-console": "^1.0.0",
     "@storybook/react": "^3.2.8",
+    "babel-plugin-transform-class-properties": "6.24.1",
     "babel-preset-env": "^1.6.1",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2",

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -20,6 +20,13 @@ export const productsGenerator = (quantity = 5, callback) => {
   );
 };
 
+export const productsQualityGenerator = (quantity = 5) =>
+  Array.from({ length: quantity }, (value, index) => ({
+    id: index,
+    name: `Item name ${index}`,
+    quality: index % 3
+  }));
+
 export const jobsGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,

packages/react-bootstrap-table2-example/stories/index.js

@@ -9,6 +9,7 @@ import BasicTable from 'examples/basic';
 import BorderlessTable from 'examples/basic/borderless-table';
 import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-table';
 import NoDataTable from 'examples/basic/no-data-table';
+import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 
 // work on columns
@@ -37,8 +38,16 @@ import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
 import TextFilter from 'examples/column-filter/text-filter';
 import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value';
 import TextFilterComparator from 'examples/column-filter/text-filter-eq-comparator';
+import TextFilterCaseSensitive from 'examples/column-filter/text-filter-caseSensitive';
 import CustomTextFilter from 'examples/column-filter/custom-text-filter';
 import CustomFilterValue from 'examples/column-filter/custom-filter-value';
+import SelectFilter from 'examples/column-filter/select-filter';
+import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
+import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
+import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
+import NumberFilter from 'examples/column-filter/number-filter';
+import NumberFilterWithDefaultValue from 'examples/column-filter/number-filter-default-value';
+import CustomNumberFilter from 'examples/column-filter/custom-number-filter';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -48,6 +57,7 @@ import RowEventTable from 'examples/rows/row-event';
 // table sort
 import EnableSortTable from 'examples/sort/enable-sort-table';
 import DefaultSortTable from 'examples/sort/default-sort-table';
+import SortEvents from 'examples/sort/sort-events';
 import CustomSortTable from 'examples/sort/custom-sort-table';
 import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
 import HeaderSortingStyleTable from 'examples/sort/header-sorting-style';
@@ -68,6 +78,8 @@ import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
 import SingleSelectionTable from 'examples/row-selection/single-selection';
 import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
 import ClickToSelectTable from 'examples/row-selection/click-to-select';
+import DefaultSelectTable from 'examples/row-selection/default-select';
+import SelectionManagement from 'examples/row-selection/selection-management';
 import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
@@ -96,8 +108,9 @@ import RemoteAll from 'examples/remote/remote-all';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'stories/stylesheet/tomorrow.min.css';
 import 'stories/stylesheet/storybook.scss';
-import 'react-bootstrap-table2/style/react-bootstrap-table2.scss';
+import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
-import 'react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
+import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
+import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
 
 // import { action } from '@storybook/addon-actions';
 
@@ -110,6 +123,7 @@ storiesOf('Basic Table', module)
   .add('striped, hover, condensed table', () => <StripHoverCondensedTable />)
   .add('borderless table', () => <BorderlessTable />)
   .add('Indication For Empty Table', () => <NoDataTable />)
+  .add('Customized id and class table', () => <CustomizedIdClassesTable />)
   .add('Table with caption', () => <CaptionTable />);
 
 storiesOf('Work on Columns', module)
@@ -138,8 +152,16 @@ storiesOf('Column Filter', module)
   .add('Text Filter', () => <TextFilter />)
   .add('Text Filter with Default Value', () => <TextFilterWithDefaultValue />)
   .add('Text Filter with Comparator', () => <TextFilterComparator />)
-  .add('Custom Text Filter', () => <CustomTextFilter />)
+  .add('Text Filter with Case Sensitive', () => <TextFilterCaseSensitive />)
   // add another filter type example right here.
+  .add('Select Filter', () => <SelectFilter />)
+  .add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)
+  .add('Select Filter with Comparator', () => <SelectFilterComparator />)
+  .add('Number Filter', () => <NumberFilter />)
+  .add('Number Filter with Default Value', () => <NumberFilterWithDefaultValue />)
+  .add('Custom Text Filter', () => <CustomTextFilter />)
+  .add('Custom Select Filter', () => <CustomSelectFilter />)
+  .add('Custom Number Filter', () => <CustomNumberFilter />)
   .add('Custom Filter Value', () => <CustomFilterValue />);
 
 storiesOf('Work on Rows', module)
@@ -150,6 +172,7 @@ storiesOf('Work on Rows', module)
 storiesOf('Sort Table', module)
   .add('Enable Sort', () => <EnableSortTable />)
   .add('Default Sort Table', () => <DefaultSortTable />)
+  .add('Sort Events', () => <SortEvents />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
   .add('Custom Style on Sorting Header Column', () => <HeaderSortingStyleTable />);
@@ -170,6 +193,8 @@ storiesOf('Row Selection', module)
   .add('Single Selection', () => <SingleSelectionTable />)
   .add('Multiple Selection', () => <MultipleSelectionTable />)
   .add('Click to Select', () => <ClickToSelectTable />)
+  .add('Default Select', () => <DefaultSelectTable />)
+  .add('Selection Management', () => <SelectionManagement />)
   .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)

packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss

@@ -0,0 +1,7 @@
+table.foo {
+  background-color: $grey-500;
+}
+
+table#bar {
+  background-color: $light-blue;
+}

packages/react-bootstrap-table2-example/stories/stylesheet/storybook.scss

@@ -3,6 +3,7 @@
 @import "base/github-corner";
 @import "base/code-block";
 
+@import "base-table/index";
 @import "welcome/index";
 @import "columns/index";
 @import "cell-edit/index";

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

@@ -4,6 +4,8 @@
 
 **[Live Demo For Column Filter](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/gh-pages-src/storybook/index.html?selectedKind=Column%20Filter)**
 
+**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html)**
+
 -----
 
 ## Install
@@ -15,8 +17,20 @@ $ npm install react-bootstrap-table2-filter --save
 You can get all types of filters via import and these filters are a factory function to create a individual filter instance. Currently, we support following filters:
 
 * TextFilter
+* SelectFilter
+* NumberFilter
 * **Coming soon!**
 
+## Add CSS
+
+```js
+// es5 
+require('react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css');
+
+// es6
+import 'react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css';
+```
+
 ## Text Filter
 Following is a quick demo for enable the column filter on **Product Price** column!!
 
@@ -45,9 +59,94 @@ const priceFilter = textFilter({
   className: 'my-custom-text-filter', // custom classname on input
   defaultValue: 'test', // default filtering value
   comparator: Comparator.EQ, // default is Comparator.LIKE
+  caseSensitive: true, // default is false, and true will only work when comparator is LIKE
   style: { ... }, // your custom styles on input
   delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
 });
 
 // omit...
 ```
+
+## Select Filter
+A quick example: 
+
+```js
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+// omit...
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+Following is an example for custom select filter:
+
+```js
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const qualityFilter = selectFilter({
+  options: selectOptions,
+  placeholder: 'My Custom PlaceHolder',  // custom the input placeholder
+  className: 'my-custom-text-filter', // custom classname on input
+  defaultValue: '2', // default filtering value
+  comparator: Comparator.LIKE, // default is Comparator.EQ
+  style: { ... }, // your custom styles on input
+  withoutEmptyOption: true  // hide the default select option
+});
+
+// omit...
+```
+
+## Number Filter
+
+```js
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [..., {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: numberFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+Numner filter is same as other filter, you can custom the number filter via `numberFilter` factory function:
+
+```js
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const numberFilter = numberFilter({
+  options: [2100, 2103, 2105],  // if options defined, will render number select instead of number input
+  delay: 600,  // how long will trigger filtering after user typing, default is 500 ms
+  placeholder: 'custom placeholder',  // placeholder for number input
+  withoutEmptyComparatorOption: true,  // dont render empty option for comparator
+  withoutEmptyNumberOption: true,  // dont render empty option for numner select if it is defined
+  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
+  style: { display: 'inline-grid' },  // custom the style on number filter
+  className: 'custom-numberfilter-class',  // custom the class on number filter
+  comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
+  comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
+  numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on number input/select
+  numberClassName: 'custom-number-class',  // custom the class on ber input/select
+  defaultValue: { number: 2103, comparator: Comparator.GT }  // default value
+})
+
+// omit...
+```

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

@@ -1,4 +1,6 @@
 import TextFilter from './src/components/text';
+import SelectFilter from './src/components/select';
+import NumberFilter from './src/components/number';
 import wrapperFactory from './src/wrapper';
 import * as Comparison from './src/comparison';
 
@@ -13,3 +15,13 @@ export const textFilter = (props = {}) => ({
   Filter: TextFilter,
   props
 });
+
+export const selectFilter = (props = {}) => ({
+  Filter: SelectFilter,
+  props
+});
+
+export const numberFilter = (props = {}) => ({
+  Filter: NumberFilter,
+  props
+});

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "0.0.3",
+  "version": "0.1.3",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {
@@ -25,6 +25,11 @@
   ],
   "author": "AllenFang",
   "contributors": [
+    {
+      "name": "Allen Fang",
+      "email": "ayu780129@hotmail.com",
+      "url": "https://github.com/AllenFang"
+    },
     {
       "name": "Chun-MingChen",
       "email": "nick830314@gmail.com",

packages/react-bootstrap-table2-filter/src/comparison.js

@@ -1,2 +1,7 @@
 export const LIKE = 'LIKE';
 export const EQ = '=';
+export const NE = '!=';
+export const GT = '>';
+export const GE = '>=';
+export const LT = '<';
+export const LE = '<=';

packages/react-bootstrap-table2-filter/src/components/number.js

@@ -0,0 +1,249 @@
+/* eslint no-return-assign: 0 */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as Comparator from '../comparison';
+import { FILTER_TYPE, FILTER_DELAY } from '../const';
+
+const legalComparators = [
+  Comparator.EQ,
+  Comparator.NE,
+  Comparator.GT,
+  Comparator.GE,
+  Comparator.LT,
+  Comparator.LE
+];
+
+class NumberFilter extends Component {
+  constructor(props) {
+    super(props);
+    this.comparators = props.comparators || legalComparators;
+    this.timeout = null;
+    let isSelected = props.defaultValue !== undefined && props.defaultValue.number !== undefined;
+    if (props.options && isSelected) {
+      isSelected = props.options.indexOf(props.defaultValue.number) > -1;
+    }
+    this.state = { isSelected };
+    this.onChangeNumber = this.onChangeNumber.bind(this);
+    this.onChangeNumberSet = this.onChangeNumberSet.bind(this);
+    this.onChangeComparator = this.onChangeComparator.bind(this);
+  }
+
+  componentDidMount() {
+    const { column, onFilter } = this.props;
+    const comparator = this.numberFilterComparator.value;
+    const number = this.numberFilter.value;
+    if (comparator && number) {
+      onFilter(column, { number, comparator }, FILTER_TYPE.NUMBER);
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  onChangeNumber(e) {
+    const { delay, column, onFilter } = this.props;
+    const comparator = this.numberFilterComparator.value;
+    if (comparator === '') {
+      return;
+    }
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    const filterValue = e.target.value;
+    this.timeout = setTimeout(() => {
+      onFilter(column, { number: filterValue, comparator }, FILTER_TYPE.NUMBER);
+    }, delay);
+  }
+
+  onChangeNumberSet(e) {
+    const { column, onFilter } = this.props;
+    const comparator = this.numberFilterComparator.value;
+    const { value } = e.target;
+    this.setState(() => ({ isSelected: (value !== '') }));
+    // if (comparator === '') {
+    //   return;
+    // }
+    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+  }
+
+  onChangeComparator(e) {
+    const { column, onFilter } = this.props;
+    const value = this.numberFilter.value;
+    const comparator = e.target.value;
+    // if (value === '') {
+    //   return;
+    // }
+    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+  }
+
+  getComparatorOptions() {
+    const optionTags = [];
+    const { withoutEmptyComparatorOption } = this.props;
+    if (!withoutEmptyComparatorOption) {
+      optionTags.push(<option key="-1" />);
+    }
+    for (let i = 0; i < this.comparators.length; i += 1) {
+      optionTags.push(
+        <option key={ i } value={ this.comparators[i] }>
+          { this.comparators[i] }
+        </option>
+      );
+    }
+    return optionTags;
+  }
+
+  getNumberOptions() {
+    const optionTags = [];
+    const { options, column, withoutEmptyNumberOption } = this.props;
+    if (!withoutEmptyNumberOption) {
+      optionTags.push(
+        <option key="-1" value="">
+          { this.props.placeholder || `Select ${column.text}...` }
+        </option>
+      );
+    }
+    for (let i = 0; i < options.length; i += 1) {
+      optionTags.push(<option key={ i } value={ options[i] }>{ options[i] }</option>);
+    }
+    return optionTags;
+  }
+
+  applyFilter(filterObj) {
+    const { column, onFilter } = this.props;
+    const { number, comparator } = filterObj;
+    this.setState(() => ({ isSelected: (number !== '') }));
+    this.numberFilterComparator.value = comparator;
+    this.numberFilter.value = number;
+    onFilter(column, { number, comparator }, FILTER_TYPE.NUMBER);
+  }
+
+  cleanFiltered() {
+    const { column, onFilter, defaultValue } = this.props;
+    const value = defaultValue ? defaultValue.number : '';
+    const comparator = defaultValue ? defaultValue.comparator : '';
+    this.setState(() => ({ isSelected: (value !== '') }));
+    this.numberFilterComparator.value = comparator;
+    this.numberFilter.value = value;
+    onFilter(column, { number: value, comparator }, FILTER_TYPE.NUMBER);
+  }
+
+  render() {
+    const { isSelected } = this.state;
+    const {
+      defaultValue,
+      column,
+      options,
+      style,
+      className,
+      numberStyle,
+      numberClassName,
+      comparatorStyle,
+      comparatorClassName,
+      placeholder
+    } = this.props;
+    const selectClass = `
+      select-filter 
+      number-filter-input 
+      form-control 
+      ${numberClassName} 
+      ${!isSelected ? 'placeholder-selected' : ''}
+    `;
+
+    return (
+      <div className={ `filter number-filter ${className}` } style={ style }>
+        <select
+          ref={ n => this.numberFilterComparator = n }
+          style={ comparatorStyle }
+          className={ `number-filter-comparator form-control ${comparatorClassName}` }
+          onChange={ this.onChangeComparator }
+          defaultValue={ defaultValue ? defaultValue.comparator : '' }
+        >
+          { this.getComparatorOptions() }
+        </select>
+        {
+          options ?
+            <select
+              ref={ n => this.numberFilter = n }
+              style={ numberStyle }
+              className={ selectClass }
+              onChange={ this.onChangeNumberSet }
+              defaultValue={ defaultValue ? defaultValue.number : '' }
+            >
+              { this.getNumberOptions() }
+            </select> :
+            <input
+              ref={ n => this.numberFilter = n }
+              type="number"
+              style={ numberStyle }
+              className={ `number-filter-input form-control ${numberClassName}` }
+              placeholder={ placeholder || `Enter ${column.text}...` }
+              onChange={ this.onChangeNumber }
+              defaultValue={ defaultValue ? defaultValue.number : '' }
+            />
+        }
+      </div>
+    );
+  }
+}
+
+NumberFilter.propTypes = {
+  onFilter: PropTypes.func.isRequired,
+  column: PropTypes.object.isRequired,
+  options: PropTypes.arrayOf(PropTypes.number),
+  defaultValue: PropTypes.shape({
+    number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    comparator: PropTypes.oneOf([...legalComparators, ''])
+  }),
+  delay: PropTypes.number,
+  /* eslint consistent-return: 0 */
+  comparators: (props, propName) => {
+    if (!props[propName]) {
+      return;
+    }
+    for (let i = 0; i < props[propName].length; i += 1) {
+      let comparatorIsValid = false;
+      for (let j = 0; j < legalComparators.length; j += 1) {
+        if (legalComparators[j] === props[propName][i] || props[propName][i] === '') {
+          comparatorIsValid = true;
+          break;
+        }
+      }
+      if (!comparatorIsValid) {
+        return new Error(`Number comparator provided is not supported.
+          Use only ${legalComparators}`);
+      }
+    }
+  },
+  placeholder: PropTypes.string,
+  withoutEmptyComparatorOption: PropTypes.bool,
+  withoutEmptyNumberOption: PropTypes.bool,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  comparatorStyle: PropTypes.object,
+  comparatorClassName: PropTypes.string,
+  numberStyle: PropTypes.object,
+  numberClassName: PropTypes.string
+};
+
+NumberFilter.defaultProps = {
+  delay: FILTER_DELAY,
+  options: undefined,
+  defaultValue: {
+    number: undefined,
+    comparator: ''
+  },
+  withoutEmptyComparatorOption: false,
+  withoutEmptyNumberOption: false,
+  comparators: legalComparators,
+  placeholder: undefined,
+  style: undefined,
+  className: '',
+  comparatorStyle: undefined,
+  comparatorClassName: '',
+  numberStyle: undefined,
+  numberClassName: ''
+};
+
+export default NumberFilter;