Publish

- react-bootstrap-table2-editor@1.0.0
 - react-bootstrap-table2-example@1.0.0
 - react-bootstrap-table2-filter@1.0.0
 - react-bootstrap-table2-overlay@1.0.0
 - react-bootstrap-table2-paginator@1.0.0
 - react-bootstrap-table2-toolkit@1.0.0
 - react-bootstrap-table-next@1.0.0

README.md

@@ -11,6 +11,7 @@ Rebuilt [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-tab
 * [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
 * [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
 * [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
 
 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).
 

docs/README.md

@@ -9,6 +9,7 @@
 
 #### Optional
 * [remote](#remote)
+* [bootstrap4](#bootstrap4)
 * [loading](#loading)
 * [caption](#caption)
 * [striped](#striped)
@@ -17,8 +18,11 @@
 * [condensed](#condensed)
 * [id](#id)
 * [classes](#classes)
+* [wrapperClasses](#wrapperClasses)
+* [headerClasses](#headerClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
+* [expandRow](#expandRow)
 * [rowStyle](#rowStyle)
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
@@ -64,6 +68,9 @@ remote={ { pagination: true, filter: false, sort: false } }
 
 There is a special case for remote pagination, even you only specified the pagination need to handle as remote, `react-bootstrap-table2` will handle all the table changes(filter, sort etc) as remote mode, because `react-bootstrap-table2` only know the data of current page, but filtering, searching or sort need to work on overall data.
 
+### <a name='bootstrap4'>bootstrap4 - [Bool]</a>
+`true` to indicate your bootstrap version is 4. Default version is 3.
+
 ### <a name='loading'>loading - [Bool]</a>
 Telling if table is loading or not, for example: waiting data loading, filtering etc. It's **only** valid when [`remote`](#remote) is enabled.
 When `loading` is `true`, `react-bootstrap-table2` will attend to render a overlay on table via [`overlay`](#overlay) prop, if [`overlay`](#overlay) prop is not given, `react-bootstrap-table2` will ignore the overlay rendering.
@@ -107,12 +114,22 @@ Same as bootstrap `.table-condensed` class for making a table more compact by cu
 Customize id on `table` element.
 ### <a name='classes'>classes - [String]</a>
 Customize class on `table` element.
+
+### <a name='wrapperClasses'>wrapperClasses - [String]</a>
+Customize class on the outer element which wrap up the `table` element. 
+
+### <a name='headerClasses'>headerClasses - [String]</a>
+Customize class on the header row(`tr`). 
+
 ### <a name='cellEdit'>cellEdit - [Object]</a>
 Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 
 ### <a name='selectRow'>selectRow - [Object]</a>
 Makes table rows selectable, please see [selectRow definition](./row-selection.md) for more detail.
 
+### <a name='expandRow'>expandRow - [Object]</a>
+Makes table rows expandable, please see [expandRow definition](./row-expand.md) for more detail.
+
 ### <a name='rowStyle'>rowStyle = [Object | Function]</a>
 Custom the style of table rows:
 
@@ -198,6 +215,7 @@ paginator({
   totalSize, // Total data size. It's necessary when remote is enabled
   pageStartIndex: 0, // first page will be 0, default is 1
   paginationSize: 3,  // the pagination bar size, default is 5
+  showTotal: true, // display pagination information
   sizePerPageList: [ {
     text: '5', value: 5
   }, {
@@ -219,6 +237,7 @@ paginator({
   hidePageListOnlyOnePage: true, // hide pagination bar when only one page, default is false
   onPageChange: (page, sizePerPage) => {}, // callback function when page was changing
   onSizePerPageChange: (sizePerPage, page) => {}, // callback function when page size was changing
+  paginationTotalRenderer: (from, to, size) => { ... }  // custom the pagination total
 })
 ```
 

docs/columns.md

@@ -38,6 +38,10 @@ Available properties in a column object:
 * [editorRenderer](#editorRenderer)
 * [filter](#filter)
 * [filterValue](#filterValue)
+* [csvType](#csvType)
+* [csvFormatter](#csvFormatter)
+* [csvText](#csvText)
+* [csvExport](#csvExport)
 
 Following is a most simplest and basic usage:
 
@@ -648,6 +652,8 @@ Configure `column.filter` will able to setup a column level filter on the header
 
 * Text(`textFilter`)
 * Select(`selectFilter`)
+* Number(`numberFilter`)
+* Date(`dateFilter`)
 
 We have a quick example to show you how to use `column.filter`:
 
@@ -683,4 +689,17 @@ A final `String` value you want to be filtered.
   filter: textFilter(),
   filterValue: (cell, row) => owners[cell]
 }
-```
+```
+
+## <a name='csvType'>column.csvType - [Object]</a>
+Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
+
+## <a name='csvFormatter'>column.csvFormatter - [Function]</a>
+
+This is same as [`column.formatter`](#formatter). But `csvFormatter` only for CSV export and called when export CSV.
+
+## <a name='csvText'>column.csvText - [String]</a>
+Custom the CSV header cell, Default is [`column.text`](#text).
+
+## <a name='csvExport'>column.csvExport - [Bool]</a>
+Default is `true`, `false` will hide this column when export CSV.

docs/migration.md

@@ -22,6 +22,8 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
   * Pagination Addons
 * [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
   * Overlay/Loading Addons
+* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+  * Table Toolkits, like search, csv etc.
 
 This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
 
@@ -72,7 +74,7 @@ Due to no `TableHeaderColumn` so that no `dataSort` here, please add [`sort`](ht
 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!!!
+No huge change for row selection.
 
 ## Column Filter
 
@@ -82,14 +84,14 @@ Please see [available filter configuration](https://react-bootstrap-table.github
 - [x] Text Filter
 - [x] Custom Text Filter
 - [x] Remote Filter
-- [ ] Custom Filter Component
+- [x] Custom Filter Component
 - [ ] Regex Filter
 - [x] Select Filter
 - [x] Custom Select Filter
 - [X] Number Filter
-- [ ] Date Filter
-- [ ] Array Filter
-- [ ] Programmatically Filter
+- [X] Date Filter
+- [X] Array Filter
+- [X] Programmatically Filter
 
 Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.   
 
@@ -113,6 +115,34 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
 
 No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
 
+## Table Search
+Ｔhe usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
+
+- [x] Custom search component and position
+- [x] Custom search value
+- [ ] Clear search
+- [ ] Multiple search
+- [ ] Strict search
+
+## Row Expand
+- [x] Expand Row Events
+- [x] Expand Row Indicator
+- [x] Expand Row Management
+- [x] Custom Expand Row Indicators
+- [ ] Compatiable with Row Selection
+- [ ] Expand Column position
+- [ ] Expand Column Style/Class
+
+## Export CSV
+Export CSV functionality is like search, which is one of functionality in the `react-bootstrap-table2-toolkit`. All of the legacy functions we already implemented.
+
 ## Remote
 
-> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
+> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
+
+
+## Row insert/Delete
+Not support yet
+
+## Keyboard Navigation
+Not support yet

docs/row-expand.md

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

docs/row-selection.md

@@ -16,6 +16,8 @@
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
 * [hideSelectColumn](#hideSelectColumn)
+* [selectionRenderer](#selectionRenderer)
+* [selectionHeaderRenderer](#selectionHeaderRenderer)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -156,6 +158,34 @@ const selectRow = {
 };
 ```
 
+### <a name='selectionRenderer'>selectRow.selectionRenderer - [Function]</a>
+Provide a callback function which allow you to custom the checkbox/radio box. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionRenderer: ({ mode, checked, disabled }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### <a name='selectionHeaderRenderer'>selectRow.selectionHeaderRenderer - [Function]</a>
+Provide a callback function which allow you to custom the checkbox/radio box in the selection header column. This callback only have one argument which is an object and contain following properties:
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectionHeaderRenderer: ({ mode, checked, indeterminate }) => (
+    // ....
+  )
+};
+```
+
+> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
 `row`, `isSelect`, `rowIndex` and `e`.

gulpfile.babel.js

@@ -17,7 +17,8 @@ const JS_PKGS = [
   'react-bootstrap-table2-editor',
   'react-bootstrap-table2-filter',
   'react-bootstrap-table2-overlay',
-  'react-bootstrap-table2-paginator'
+  'react-bootstrap-table2-paginator',
+  'react-bootstrap-table2-toolkit'
 ].reduce((pkg, curr) => `${curr}|${pkg}`, '');
 
 const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
@@ -25,7 +26,8 @@ const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
 const STYLE_PKGS = [
   'react-bootstrap-table2',
   'react-bootstrap-table2-filter',
-  'react-bootstrap-table2-paginator'
+  'react-bootstrap-table2-paginator',
+  'react-bootstrap-table2-toolkit',
 ].reduce((pkg, curr) => `${curr}|${pkg}`, '');
 
 const STYLE_SKIPS = `+(${NODE_MODULES})`;
@@ -78,7 +80,8 @@ function umd(done) {
     () => gulp.src('./webpack/editor.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
     () => gulp.src('./webpack/filter.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
     () => gulp.src('./webpack/overlay.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
-    () => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
+    () => gulp.src('./webpack/paginator.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>'])),
+    () => gulp.src('./webpack/toolkit.umd.babel.js').pipe(shell(['webpack --config <%= file.path %>']))
   )();
   done();
 }

package.json

@@ -11,10 +11,11 @@
     "pretest": "yarn lint --cache",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test:watch": "jest --coverage --watch",
     "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook",
     "gh-pages:clean": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:clean",
-    "gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build"
+    "gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build",
+    "release": "yarn install && yarn build && lerna publish"
   },
   "repository": {
     "type": "git",
@@ -49,8 +50,8 @@
     "babel-preset-stage-0": "6.24.1",
     "babel-register": "6.24.1",
     "css-loader": "0.28.1",
-    "enzyme": "3.1.1",
-    "enzyme-adapter-react-16": "1.0.4",
+    "enzyme": "3.3.0",
+    "enzyme-adapter-react-16": "1.1.1",
     "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",
     "eslint-loader": "1.9.0",
@@ -80,12 +81,12 @@
   "dependencies": {
     "classnames": "2.2.5",
     "prop-types": "15.5.10",
-    "react": "16.0.0",
-    "react-dom": "16.0.0"
+    "react": "16.3.2",
+    "react-dom": "16.3.2"
   },
   "jest": {
     "collectCoverageFrom": [
-      "packages/*/src/*.js",
+      "packages/*/src/**/*.js",
       "packages/*/index.js"
     ],
     "roots": [

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

@@ -1,4 +1,4 @@
-import wrapperFactory from './src/wrapper';
+import createContext from './src/context';
 import editingCellFactory from './src/editing-cell';
 import {
   EDITTYPE,
@@ -8,7 +8,7 @@ import {
 } from './src/const';
 
 export default (options = {}) => ({
-  wrapperFactory,
+  createContext,
   editingCellFactory,
   CLICK_TO_CELL_EDIT,
   DBCLICK_TO_CELL_EDIT,

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {
@@ -41,7 +41,7 @@
   ],
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   }
 }

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

@@ -1,16 +1,22 @@
 /* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
+/* eslint react/require-default-props: 0 */
+import React from 'react';
 import PropTypes from 'prop-types';
-
 import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
 
 export default (
-  Base,
-  { _, remoteResolver }
+  _,
+  dataOperator,
+  isRemoteCellEdit,
+  handleCellChange
 ) => {
   let EditingCell;
-  return class CellEditWrapper extends remoteResolver(Component) {
+  const CellEditContext = React.createContext();
+
+  class CellEditProvider extends React.Component {
     static propTypes = {
+      data: PropTypes.array.isRequired,
+      selectRow: PropTypes.object,
       options: PropTypes.shape({
         mode: PropTypes.oneOf([CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT]).isRequired,
         onErrorMessageDisappear: PropTypes.func,
@@ -19,7 +25,7 @@ export default (
         afterSaveCell: PropTypes.func,
         nonEditableRows: PropTypes.func,
         timeToCloseMessage: PropTypes.number,
-        errorMessage: PropTypes.string
+        errorMessage: PropTypes.any
       })
     }
 
@@ -33,41 +39,32 @@ export default (
       this.state = {
         ridx: null,
         cidx: null,
-        message: null,
-        isDataChanged: false
+        message: null
       };
     }
 
     componentWillReceiveProps(nextProps) {
-      if (nextProps.cellEdit && this.isRemoteCellEdit()) {
+      if (nextProps.cellEdit && isRemoteCellEdit()) {
         if (nextProps.cellEdit.options.errorMessage) {
           this.setState(() => ({
-            isDataChanged: false,
             message: nextProps.cellEdit.options.errorMessage
           }));
         } else {
-          this.setState(() => ({
-            isDataChanged: true
-          }));
           this.escapeEditing();
         }
-      } else {
-        this.setState(() => ({
-          isDataChanged: false
-        }));
       }
     }
 
     handleCellUpdate(row, column, newValue) {
-      const { keyField, cellEdit, store } = this.props;
+      const { keyField, cellEdit, data } = this.props;
       const { beforeSaveCell, afterSaveCell } = cellEdit.options;
       const oldValue = _.get(row, column.dataField);
       const rowId = _.get(row, keyField);
       if (_.isFunction(beforeSaveCell)) beforeSaveCell(oldValue, newValue, row, column);
-      if (this.isRemoteCellEdit()) {
-        this.handleCellChange(rowId, column.dataField, newValue);
+      if (isRemoteCellEdit()) {
+        handleCellChange(rowId, column.dataField, newValue);
       } else {
-        store.edit(rowId, column.dataField, newValue);
+        dataOperator.editCell(data, keyField, rowId, column.dataField, newValue);
         if (_.isFunction(afterSaveCell)) afterSaveCell(oldValue, newValue, row, column);
         this.completeEditing();
       }
@@ -77,8 +74,7 @@ export default (
       this.setState(() => ({
         ridx: null,
         cidx: null,
-        message: null,
-        isDataChanged: true
+        message: null
       }));
     }
 
@@ -86,8 +82,7 @@ export default (
       const editing = () => {
         this.setState(() => ({
           ridx,
-          cidx,
-          isDataChanged: false
+          cidx
         }));
       };
 
@@ -103,18 +98,19 @@ export default (
     }
 
     render() {
-      const { isDataChanged, ...stateRest } = this.state;
       const {
         cellEdit: {
           options: { nonEditableRows, errorMessage, ...optionsRest },
           editingCellFactory,
+          createContext,
           ...cellEditRest
         }
       } = this.props;
+
       const newCellEdit = {
         ...optionsRest,
         ...cellEditRest,
-        ...stateRest,
+        ...this.state,
         EditingCell,
         nonEditableRows: _.isDefined(nonEditableRows) ? nonEditableRows() : [],
         onStart: this.startEditing,
@@ -123,13 +119,16 @@ export default (
       };
 
       return (
-        <Base
-          { ...this.props }
-          data={ this.props.store.data }
-          isDataChanged={ isDataChanged }
-          cellEdit={ newCellEdit }
-        />
+        <CellEditContext.Provider
+          value={ { cellEdit: newCellEdit } }
+        >
+          { this.props.children }
+        </CellEditContext.Provider>
       );
     }
+  }
+  return {
+    Provider: CellEditProvider,
+    Consumer: CellEditContext.Consumer
   };
 };

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

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

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

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

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

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

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

@@ -8,6 +8,7 @@ const editorSourcePath = path.join(__dirname, '../../react-bootstrap-table2-edit
 const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
+const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -23,6 +24,7 @@ const aliasPath = {
   'react-bootstrap-table2-filter': filterSourcePath,
   'react-bootstrap-table2-overlay': overlaySourcePath,
   'react-bootstrap-table2-paginator': paginationSourcePath,
+  'react-bootstrap-table2-toolkit': toolkitSourcePath
 };
 
 const loaders = [{

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

@@ -33,6 +33,7 @@ const columns = [{
 
 <BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
 <BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
 `;
 
 export default () => (
@@ -43,6 +44,9 @@ export default () => (
     <h4> Customized table className </h4>
     <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
 
+    <h4> Customized wrapper className </h4>
+    <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
+
     <Code>{ sourceCode }</Code>
   </div>
 );

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

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

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

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

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

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

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

@@ -3,9 +3,9 @@ import React from 'react';
 import BootstrapTable from 'react-bootstrap-table-next';
 import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
-import { jobsGenerator } from 'utils/common';
+import { jobsGenerator1 } from 'utils/common';
 
-const jobs = jobsGenerator(5);
+const jobs = jobsGenerator1(5);
 
 const owners = ['Allen', 'Bob', 'Cat'];
 const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/react-bootstrap-table2-example/examples/csv/csv-column-formatter.js

@@ -0,0 +1,80 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+/* eslint no-unused-vars: 0 */
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  csvFormatter: (cell, row, rowIndex) => `$ ${cell}NTD`
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  csvFormatter: (cell, row, rowIndex) => \`$ \${cell}NTD\`
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable { ...props.baseProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable { ...props.baseProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/csv/csv-column-type.js

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

packages/react-bootstrap-table2-example/examples/csv/custom-csv-button.js

@@ -0,0 +1,97 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    props.onExport();
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
+    </div>
+  );
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <BootstrapTable { ...props.baseProps } />
+        <hr />
+        <MyExportCSV { ...props.csvProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const MyExportCSV = (props) => {
+  const handleClick = () => {
+    props.onExport();
+  };
+  return (
+    <div>
+      <button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
+    </div>
+  );
+};
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV
+    >
+      {
+        props => (
+          <div>
+            <BootstrapTable { ...props.baseProps } />
+            <hr />
+            <MyExportCSV { ...props.csvProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/csv/custom-csv-header.js

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

packages/react-bootstrap-table2-example/examples/csv/custom-csv.js

@@ -0,0 +1,82 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable { ...props.baseProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV={ {
+        fileName: 'custom.csv',
+        separator: '|',
+        ignoreHeader: true,
+        noAutoBOM: false
+      } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable { ...props.baseProps } />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

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

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

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

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

@@ -24,6 +24,12 @@ import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
 // ...
 
+const customTotal = (from, to, size) => (
+  <span className="react-bootstrap-table-pagination-total">
+    Showing { from } to { to } of { size } Results
+  </span>
+);
+
 const options = {
   paginationSize: 4,
   pageStartIndex: 0,
@@ -39,6 +45,8 @@ const options = {
   prePageTitle: 'Pre page',
   firstPageTitle: 'Next page',
   lastPageTitle: 'Last page',
+  showTotal: true,
+  paginationTotalRenderer: customTotal,
   sizePerPageList: [{
     text: '5', value: 5
   }, {
@@ -50,11 +58,18 @@ const options = {
 
 <BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginationFactory(options) } />
 `;
+
+const customTotal = (from, to, size) => (
+  <span className="react-bootstrap-table-pagination-total">
+    Showing { from } to { to } of { size } Results
+  </span>
+);
+
 const options = {
   paginationSize: 4,
   pageStartIndex: 0,
-  // alwaysShowAllBtns: true // Always show next and previous button
-  // withFirstAndLast: false // Hide the going to First and Last page button
+  // alwaysShowAllBtns: true, // Always show next and previous button
+  // withFirstAndLast: false, // Hide the going to First and Last page button
   // hideSizePerPage: true, // Hide the sizePerPage dropdown always
   // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
   firstPageText: 'First',
@@ -66,6 +81,7 @@ const options = {
   firstPageTitle: 'Next page',
   lastPageTitle: 'Last page',
   showTotal: true,
+  paginationTotalRenderer: customTotal,
   sizePerPageList: [{
     text: '5', value: 5
   }, {

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

@@ -4,53 +4,76 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
 import Code from 'components/common/code-block';
 import { productsGenerator } from 'utils/common';
 
-const products = productsGenerator(87);
+let products = productsGenerator(87);
 
 const columns = [{
   dataField: 'id',
-  text: 'Product ID'
+  text: 'Product ID',
+  sort: true
 }, {
   dataField: 'name',
   text: 'Product Name',
-  filter: textFilter()
+  filter: textFilter({
+    defaultValue: '8'
+  }),
+  sort: true
 }, {
   dataField: 'price',
   text: 'Product Price',
-  filter: textFilter()
+  filter: textFilter(),
+  sort: true
 }];
 
 const sourceCode = `\
 import BootstrapTable from 'react-bootstrap-table-next';
 import paginationFactory from 'react-bootstrap-table2-paginator';
+import cellEditFactory from 'react-bootstrap-table2-editor';
 import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
 // ...
 
 const columns = [{
   dataField: 'id',
-  text: 'Product ID'
+  text: 'Product ID',
+  sort: true
 }, {
   dataField: 'name',
   text: 'Product Name',
-  filter: textFilter()
+  filter: textFilter({
+    defaultValue: '8'
+  }),
+  sort: true
 }, {
   dataField: 'price',
   text: 'Product Price',
-  filter: textFilter()
+  filter: textFilter(),
+  sort: true
 }];
 
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+const cellEditProps = {
+  mode: 'click'
+};
+
 const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
   <div>
     <BootstrapTable
-      remote={ { pagination: true } }
+      remote
       keyField="id"
       data={ data }
       columns={ columns }
+      defaultSorted={ defaultSorted }
       filter={ filterFactory() }
       pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
+      cellEdit={ cellEditFactory(cellEditProps) }
       onTableChange={ onTableChange }
     />
     <Code>{ sourceCode }</Code>
@@ -77,10 +100,25 @@ class Container extends React.Component {
     this.handleTableChange = this.handleTableChange.bind(this);
   }
 
-  handleTableChange = (type, { page, sizePerPage, filters }) => {
+  handleTableChange = (type, { page, sizePerPage, filters, sortField, sortOrder, cellEdit }) => {
     const currentIndex = (page - 1) * sizePerPage;
     setTimeout(() => {
-      const result = products.filter((row) => {
+      // Handle cell editing
+      if (type === 'cellEdit') {
+        const { rowId, dataField, newValue } = cellEdit;
+        products = products.map((row) => {
+          if (row.id === rowId) {
+            const newRow = { ...row };
+            newRow[dataField] = newValue;
+            return newRow;
+          }
+          return row;
+        });
+      }
+      let result = products;
+
+      // Handle column filters
+      result = result.filter((row) => {
         let valid = true;
         for (const dataField in filters) {
           const { filterVal, filterType, comparator } = filters[dataField];
@@ -96,6 +134,26 @@ class Container extends React.Component {
         }
         return valid;
       });
+      // Handle column sort
+      if (sortOrder === 'asc') {
+        result = result.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return 1;
+          } else if (b[sortField] > a[sortField]) {
+            return -1;
+          }
+          return 0;
+        });
+      } else {
+        result = result.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return -1;
+          } else if (b[sortField] > a[sortField]) {
+            return 1;
+          }
+          return 0;
+        });
+      }
       this.setState(() => ({
         page,
         data: result.slice(currentIndex, currentIndex + sizePerPage),
@@ -120,18 +178,29 @@ class Container extends React.Component {
 }
 `;
 
+const defaultSorted = [{
+  dataField: 'name',
+  order: 'desc'
+}];
+
+const cellEditProps = {
+  mode: 'click'
+};
+
 const RemoteAll = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
   <div>
     <h3>When <code>remote.pagination</code> is enabled, the filtering,
       sorting and searching will also change to remote mode automatically</h3>
     <BootstrapTable
-      remote={ { pagination: true } }
+      remote
       keyField="id"
       data={ data }
       columns={ columns }
+      defaultSorted={ defaultSorted }
       filter={ filterFactory() }
       pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
       onTableChange={ onTableChange }
+      cellEdit={ cellEditFactory(cellEditProps) }
     />
     <Code>{ sourceCode }</Code>
   </div>
@@ -157,10 +226,24 @@ class Container extends React.Component {
     this.handleTableChange = this.handleTableChange.bind(this);
   }
 
-  handleTableChange = (type, { page, sizePerPage, filters }) => {
+  handleTableChange = (type, { page, sizePerPage, filters, sortField, sortOrder, cellEdit }) => {
     const currentIndex = (page - 1) * sizePerPage;
     setTimeout(() => {
-      const result = products.filter((row) => {
+      // Handle cell editing
+      if (type === 'cellEdit') {
+        const { rowId, dataField, newValue } = cellEdit;
+        products = products.map((row) => {
+          if (row.id === rowId) {
+            const newRow = { ...row };
+            newRow[dataField] = newValue;
+            return newRow;
+          }
+          return row;
+        });
+      }
+      let result = products;
+      // Handle column filters
+      result = result.filter((row) => {
         let valid = true;
         for (const dataField in filters) {
           const { filterVal, filterType, comparator } = filters[dataField];
@@ -176,6 +259,26 @@ class Container extends React.Component {
         }
         return valid;
       });
+      // Handle column sort
+      if (sortOrder === 'asc') {
+        result = result.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return 1;
+          } else if (b[sortField] > a[sortField]) {
+            return -1;
+          }
+          return 0;
+        });
+      } else {
+        result = result.sort((a, b) => {
+          if (a[sortField] > b[sortField]) {
+            return -1;
+          } else if (b[sortField] > a[sortField]) {
+            return 1;
+          }
+          return 0;
+        });
+      }
       this.setState(() => ({
         page,
         data: result.slice(currentIndex, currentIndex + sizePerPage),

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

@@ -0,0 +1,175 @@
+/* eslint guard-for-in: 0 */
+/* eslint no-restricted-syntax: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator(17);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const RemoteFilter = props => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+      search
+    >
+      {
+        toolkitprops => [
+          <SearchBar { ...toolkitprops.searchProps } />,
+          <BootstrapTable
+            { ...toolkitprops.baseProps }
+            remote={ { search: true } }
+            onTableChange={ props.onTableChange }
+          />
+        ]
+      }
+    </ToolkitProvider>
+    <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 => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ props.data }
+      columns={ columns }
+      search
+    >
+      {
+        toolkitprops => [
+          <SearchBar { ...toolkitprops.searchProps } />,
+          <BootstrapTable
+            { ...toolkitprops.baseProps }
+            remote={ { search: true } }
+            onTableChange={ props.onTableChange }
+          />
+        ]
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemoteFilter.propTypes = {
+  data: PropTypes.array.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: products
+    };
+  }
+
+  handleTableChange = (type, { searchText }) => {
+    setTimeout(() => {
+      const result = products.filter((row) => {
+        for (let cidx = 0; cidx < columns.length; cidx += 1) {
+          const column = columns[cidx];
+          let targetValue = row[column.dataField];
+          if (targetValue !== null && typeof targetValue !== 'undefined') {
+            targetValue = targetValue.toString().toLowerCase();
+            if (targetValue.indexOf(searchText) > -1) {
+              return true;
+            }
+          }
+        }
+        return false;
+      });
+      this.setState(() => ({
+        data: result
+      }));
+    }, 2000);
+  }
+
+  render() {
+    return (
+      <RemoteFilter
+        data={ this.state.data }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;

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

@@ -0,0 +1,107 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true,
+  expandHeaderColumnRenderer: ({ isAnyExpands }) => {
+    if (isAnyExpands) {
+      return <b>-</b>;
+    }
+    return <b>+</b>;
+  },
+  expandColumnRenderer: ({ expanded }) => {
+    if (expanded) {
+      return (
+        <b>-</b>
+      );
+    }
+    return (
+      <b>...</b>
+    );
+  }
+};
+
+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 expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true,
+  expandHeaderColumnRenderer: ({ isAnyExpands }) => {
+    if (isAnyExpands) {
+      return <b>-</b>;
+    }
+    return <b>+</b>;
+  },
+  expandColumnRenderer: ({ expanded }) => {
+    if (expanded) {
+      return (
+        <b>-</b>
+      );
+    }
+    return (
+      <b>...</b>
+    );
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true
+};
+
+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 expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,97 @@
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true,
+  onExpand: (row, isExpand, rowIndex, e) => {
+    console.log(row.id);
+    console.log(isExpand);
+    console.log(rowIndex);
+    console.log(e);
+  },
+  onExpandAll: (isExpandAll, rows, e) => {
+    console.log(isExpandAll);
+    console.log(rows);
+    console.log(e);
+  }
+};
+
+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 expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  showExpandColumn: true,
+  onExpand: (row, isExpand, rowIndex, e) => {
+    console.log(row.id);
+    console.log(isExpand);
+    console.log(rowIndex);
+    console.log(e);
+  },
+  onExpandAll: (isExpandAll, rows, e) => {
+    console.log(isExpandAll);
+    console.log(rows);
+    console.log(e);
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,138 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+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'
+}];
+
+class RowExpandManagment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { expanded: [0, 1] };
+  }
+
+  handleBtnClick = () => {
+    if (!this.state.expanded.includes(2)) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, 2]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== 2)
+      }));
+    }
+  }
+
+  handleOnExpand = (row, isExpand, rowIndex, e) => {
+    if (isExpand) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, row.id]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== row.id)
+      }));
+    }
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      expanded: this.state.expanded,
+      onExpand: this.handleOnExpand
+    };
+    return (
+      <div>
+        <button className="btn btn-success" onClick={ this.handleBtnClick }>Expand/Collapse 3rd row</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } expandRow={ expandRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class RowExpandManagment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { expanded: [0, 1] };
+  }
+
+  handleBtnClick = () => {
+    if (!this.state.expanded.includes(2)) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, 2]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== 2)
+      }));
+    }
+  }
+
+  handleOnExpand = (row, isExpand, rowIndex, e) => {
+    if (isExpand) {
+      this.setState(() => ({
+        expanded: [...this.state.expanded, row.id]
+      }));
+    } else {
+      this.setState(() => ({
+        expanded: this.state.expanded.filter(x => x !== row.id)
+      }));
+    }
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      expanded: this.state.expanded,
+      onExpand: this.handleOnExpand
+    };
+    return (
+      <div>
+        <button className="btn btn-success" onClick={ this.handleBtnClick }>Expand/Collapse 3rd row</button>
+        <BootstrapTable keyField="id" data={ products } columns={ columns } expandRow={ expandRow } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/row-expand/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+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 expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/row-expand/non-expandable-rows.js

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  nonExpandable: [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 expandRow = {
+  renderer: row => (
+    <div>
+      <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>
+      <p>You can render anything here, also you can add additional data on every row object</p>
+      <p>expandRow.renderer callback will pass the origin row object to you</p>
+    </div>
+  ),
+  nonExpandable: [1, 3]
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>The second and fourth row is not expandable</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,107 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-param-reassign: 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'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'radio',
+  clickToSelect: true,
+  selectionHeaderRenderer: () => 'X',
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+    <input
+      type="checkbox"
+      ref={ (input) => {
+        if (input) input.indeterminate = indeterminate;
+      } }
+      { ...rest }
+    />
+  ),
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+  mode: 'radio',
+  clickToSelect: true,
+  selectionHeaderRenderer: () => 'X',
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ....;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectionHeaderRenderer: ({ indeterminate, ...rest }) => (
+    <input
+      type="checkbox"
+      ref={ (input) => {
+        if (input) input.indeterminate = indeterminate;
+      } }
+      { ...rest }
+    />
+  ),
+  selectionRenderer: ({ mode, ...rest }) => (
+    <input type={ mode } { ...rest } />
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

@@ -0,0 +1,102 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { jobsGenerator1 } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = jobsGenerator1(5);
+
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID',
+  searchable: false,
+  hidden: true
+}, {
+  dataField: 'owner',
+  text: 'Job Owner',
+  formatter: (cell, row) => owners[cell],
+  filterValue: (cell, row) => owners[cell] // we will search the value after filterValue called
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  formatter: (cell, row) => types[cell],
+  filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID',
+  searchable: false,
+  hidden: true
+}, {
+  dataField: 'owner',
+  text: 'Job Owner',
+  formatter: (cell, row) => owners[cell],
+  filterValue: (cell, row) => owners[cell] // we will search the value after filterValue called
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  formatter: (cell, row) => types[cell],
+  filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/search/default-custom-search.js

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

packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js

@@ -0,0 +1,116 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-return-assign: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider from 'react-bootstrap-table2-toolkit';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const MySearch = (props) => {
+  let input;
+  const handleClick = () => {
+    props.onSearch(input.value);
+  };
+  return (
+    <div>
+      <input
+        className="form-control"
+        style={ { backgroundColor: 'pink' } }
+        ref={ n => input = n }
+        type="text"
+      />
+      <button className="btn btn-warning" onClick={ handleClick }>Click to Search!!</button>
+    </div>
+  );
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search
+>
+  {
+    props => (
+      <div>
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+        <MySearch { ...props.searchProps } />
+        <br />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const MySearch = (props) => {
+  let input;
+  const handleClick = () => {
+    props.onSearch(input.value);
+  };
+  return (
+    <div>
+      <input
+        className="form-control"
+        style={ { backgroundColor: 'pink' } }
+        ref={ n => input = n }
+        type="text"
+      />
+      <button className="btn btn-warning" onClick={ handleClick }>Click to Search!!</button>
+    </div>
+  );
+};
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search
+    >
+      {
+        props => (
+          <div>
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+            <MySearch { ...props.searchProps } />
+            <br />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

packages/react-bootstrap-table2-example/examples/search/search-formatted.js

@@ -0,0 +1,85 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  formatter: cell => `USD ${cell}`
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  formatter: cell => \`USD \${cell}\`  // we will search the data after formatted
+}];
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ { searchFormatted: true } }
+>
+  {
+    props => (
+      <div>
+        <h3>Try to Search USD at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search={ { searchFormatted: true } }
+    >
+      {
+        props => (
+          <div>
+            <h3>Try to Search USD at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "0.1.7",
+  "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "private": true,
@@ -14,8 +14,8 @@
   "license": "ISC",
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^116.3.0"
   },
   "dependencies": {
     "bootstrap": "^3.3.7"

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

@@ -41,6 +41,14 @@ export const jobsGenerator = (quantity = 5) =>
     type: jobType[Math.floor((Math.random() * 4) + 1)]
   }));
 
+export const jobsGenerator1 = (quantity = 5) =>
+  Array.from({ length: quantity }, (value, index) => ({
+    id: index,
+    name: `Job name ${index}`,
+    owner: Math.floor((Math.random() * 2) + 1),
+    type: Math.floor((Math.random() * 4) + 1)
+  }));
+
 export const todosGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,
@@ -60,3 +68,17 @@ export const stockGenerator = (quantity = 5) =>
   }));
 
 export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+export const productsExpandRowsGenerator = (quantity = 5, callback) => {
+  if (callback) return Array.from({ length: quantity }, callback);
+
+  // if no given callback, retrun default product format.
+  return (
+    Array.from({ length: quantity }, (value, index) => ({
+      id: index,
+      name: `Item name ${index}`,
+      price: 2100 + index,
+      expand: productsQualityGenerator(index)
+    }))
+  );
+};

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

@@ -33,6 +33,7 @@ import HeaderColumnEventTable from 'examples/header-columns/column-event-table';
 import HeaderColumnClassTable from 'examples/header-columns/column-class-table';
 import HeaderColumnStyleTable from 'examples/header-columns/column-style-table';
 import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
+import HeaderClassTable from 'examples/header-columns/header-class-table';
 
 // column filter
 import TextFilter from 'examples/column-filter/text-filter';
@@ -45,12 +46,23 @@ 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 MultiSelectFilter from 'examples/column-filter/multi-select-filter';
+import MultiSelectFilterDefaultValue from 'examples/column-filter/multi-select-filter-default-value';
+import CustomMultiSelectFilter from 'examples/column-filter/custom-multi-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';
+import DateFilter from 'examples/column-filter/date-filter';
+import DateFilterWithDefaultValue from 'examples/column-filter/date-filter-default-value';
+import CustomDateFilter from 'examples/column-filter/custom-date-filter';
 import ProgrammaticallyTextFilter from 'examples/column-filter/programmatically-text-filter';
 import ProgrammaticallySelectFilter from 'examples/column-filter/programmatically-select-filter';
 import ProgrammaticallyNumberFilter from 'examples/column-filter/programmatically-number-filter';
+import ProgrammaticallyDateFilter from 'examples/column-filter/programmatically-date-filter';
+import ProgrammaticallyMultiSelectFilter from 'examples/column-filter/programmatically-multi-select-filter';
+import CustomFilter from 'examples/column-filter/custom-filter';
+import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
+import ClearAllFilters from 'examples/column-filter/clear-all-filters';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -95,16 +107,41 @@ import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-sele
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
+import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
 import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
 
+// work on row expand
+import BasicRowExpand from 'examples/row-expand';
+import RowExpandManagement from 'examples/row-expand/expand-management';
+import NonExpandableRows from 'examples/row-expand/non-expandable-rows';
+import ExpandColumn from 'examples/row-expand/expand-column';
+import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
+import ExpandHooks from 'examples/row-expand/expand-hooks';
+
 // pagination
 import PaginationTable from 'examples/pagination';
 import PaginationHooksTable from 'examples/pagination/pagination-hooks';
 import CustomPaginationTable from 'examples/pagination/custom-pagination';
 
+// search
+import SearchTable from 'examples/search';
+import DefaultCustomSearch from 'examples/search/default-custom-search';
+import FullyCustomSearch from 'examples/search/fully-custom-search';
+import SearchFormattedData from 'examples/search/search-formatted';
+import CustomSearchValue from 'examples/search/custom-search-value';
+
+// CSV
+import ExportCSV from 'examples/csv';
+import CSVFormatter from 'examples/csv/csv-column-formatter';
+import CustomCSVHeader from 'examples/csv/custom-csv-header';
+import HideCSVColumn from 'examples/csv/hide-column';
+import CSVColumnType from 'examples/csv/csv-column-type';
+import CustomCSVButton from 'examples/csv/custom-csv-button';
+import CustomCSV from 'examples/csv/custom-csv';
+
 // loading overlay
 import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay';
 import TableOverlay from 'examples/loading-overlay/table-overlay';
@@ -113,6 +150,7 @@ import TableOverlay from 'examples/loading-overlay/table-overlay';
 import RemoteSort from 'examples/remote/remote-sort';
 import RemoteFilter from 'examples/remote/remote-filter';
 import RemotePaginationTable from 'examples/remote/remote-pagination';
+import RemoteSearch from 'examples/remote/remote-search';
 import RemoteCellEdit from 'examples/remote/remote-celledit';
 import RemoteAll from 'examples/remote/remote-all';
 
@@ -158,7 +196,8 @@ storiesOf('Work on Header Columns', module)
   .add('Column Event', () => <HeaderColumnEventTable />)
   .add('Customize Column Class', () => <HeaderColumnClassTable />)
   .add('Customize Column Style', () => <HeaderColumnStyleTable />)
-  .add('Customize Column HTML attribute', () => <HeaderColumnAttrsTable />);
+  .add('Customize Column HTML attribute', () => <HeaderColumnAttrsTable />)
+  .add('Header Class', () => <HeaderClassTable />);
 
 storiesOf('Column Filter', module)
   .add('Text Filter', () => <TextFilter />)
@@ -169,15 +208,26 @@ storiesOf('Column Filter', module)
   .add('Select Filter', () => <SelectFilter />)
   .add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)
   .add('Select Filter with Comparator', () => <SelectFilterComparator />)
+  .add('MultiSelect Filter', () => <MultiSelectFilter />)
+  .add('MultiSelect Filter with Default Value', () => <MultiSelectFilterDefaultValue />)
   .add('Number Filter', () => <NumberFilter />)
   .add('Number Filter with Default Value', () => <NumberFilterWithDefaultValue />)
+  .add('Date Filter', () => <DateFilter />)
+  .add('Date Filter with Default Value', () => <DateFilterWithDefaultValue />)
   .add('Custom Text Filter', () => <CustomTextFilter />)
   .add('Custom Select Filter', () => <CustomSelectFilter />)
   .add('Custom Number Filter', () => <CustomNumberFilter />)
+  .add('Custom Date Filter', () => <CustomDateFilter />)
+  .add('Custom MultiSelect Filter', () => <CustomMultiSelectFilter />)
   .add('Custom Filter Value', () => <CustomFilterValue />)
-  .add('Programmatically Text Filter ', () => <ProgrammaticallyTextFilter />)
-  .add('Programmatically Select Filter ', () => <ProgrammaticallySelectFilter />)
-  .add('Programmatically Number Filter ', () => <ProgrammaticallyNumberFilter />);
+  .add('Programmatically Text Filter', () => <ProgrammaticallyTextFilter />)
+  .add('Programmatically Select Filter', () => <ProgrammaticallySelectFilter />)
+  .add('Programmatically Number Filter', () => <ProgrammaticallyNumberFilter />)
+  .add('Programmatically Date Filter', () => <ProgrammaticallyDateFilter />)
+  .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
+  .add('Custom Filter', () => <CustomFilter />)
+  .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
+  .add('Clear All Filters', () => <ClearAllFilters />);
 
 storiesOf('Work on Rows', module)
   .add('Customize Row Style', () => <RowStyleTable />)
@@ -222,16 +272,41 @@ storiesOf('Row Selection', module)
   .add('Selection without Data', () => <SelectionNoDataTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
+  .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
   .add('Hide Selection Column', () => <HideSelectionColumnTable />);
 
+storiesOf('Row Expand', module)
+  .add('Basic Row Expand', () => <BasicRowExpand />)
+  .add('Expand Management', () => <RowExpandManagement />)
+  .add('Non Expandabled Rows', () => <NonExpandableRows />)
+  .add('Expand Indicator', () => <ExpandColumn />)
+  .add('Custom Expand Indicator', () => <CustomExpandColumn />)
+  .add('Expand Hooks', () => <ExpandHooks />);
+
 storiesOf('Pagination', module)
   .add('Basic Pagination Table', () => <PaginationTable />)
   .add('Pagination Hooks', () => <PaginationHooksTable />)
   .add('Custom Pagination', () => <CustomPaginationTable />);
 
+storiesOf('Table Search', module)
+  .add('Basic Search Table', () => <SearchTable />)
+  .add('Default Custom Search', () => <DefaultCustomSearch />)
+  .add('Fully Custom Search', () => <FullyCustomSearch />)
+  .add('Search Fromatted Value', () => <SearchFormattedData />)
+  .add('Custom Search Value', () => <CustomSearchValue />);
+
+storiesOf('Export CSV', module)
+  .add('Basic Export CSV', () => <ExportCSV />)
+  .add('Format CSV Column', () => <CSVFormatter />)
+  .add('Custom CSV Header', () => <CustomCSVHeader />)
+  .add('Hide CSV Column', () => <HideCSVColumn />)
+  .add('CSV Column Type', () => <CSVColumnType />)
+  .add('Custom CSV Button', () => <CustomCSVButton />)
+  .add('Custom CSV', () => <CustomCSV />);
+
 storiesOf('EmptyTableOverlay', module)
   .add('Empty Table Overlay', () => <EmptyTableOverlay />)
   .add('Table Overlay', () => <TableOverlay />);
@@ -240,5 +315,6 @@ storiesOf('Remote', module)
   .add('Remote Sort', () => <RemoteSort />)
   .add('Remote Filter', () => <RemoteFilter />)
   .add('Remote Pagination', () => <RemotePaginationTable />)
+  .add('Remote Search', () => <RemoteSearch />)
   .add('Remote Cell Editing', () => <RemoteCellEdit />)
   .add('Remote All', () => <RemoteAll />);

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

@@ -5,3 +5,7 @@ table.foo {
 table#bar {
   background-color: $light-blue;
 }
+
+div.boo {
+  border: 2px solid salmon;
+}

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

@@ -9,4 +9,8 @@
 
 .demo-row-odd {
   background-color: $green-lighten-4;
+}
+
+.header-class {
+  background-color: $green-lighten-4;
 }

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

@@ -0,0 +1,3 @@
+.custome-search-field {
+  background-color: #c8e6c9;
+}

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

@@ -10,4 +10,5 @@
 @import "row-selection/index";
 @import "rows/index";
 @import "sort/index";
+@import "search/index";
 @import "loading-overlay/index";

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

@@ -18,7 +18,10 @@ You can get all types of filters via import and these filters are a factory func
 
 * TextFilter
 * SelectFilter
+* MultiSelectFilter
 * NumberFilter
+* DateFilter
+* CustomFilter
 * **Coming soon!**
 
 ## Add CSS
@@ -112,6 +115,52 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
+## MultiSelect Filter
+
+A quick example: 
+
+```js
+import filterFactory, { multiSelectFilter } 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: multiSelectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+Following is an example for custom select filter:
+
+```js
+import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const qualityFilter = multiSelectFilter({
+  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
@@ -129,7 +178,7 @@ const columns = [..., {
 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';
+import filterFactory, { selectFilter, Comparator, numberFilter } from 'react-bootstrap-table2-filter';
 // omit...
 
 const numberFilter = numberFilter({
@@ -149,4 +198,93 @@ const numberFilter = numberFilter({
 })
 
 // omit...
-```
+```
+
+## Date Filter
+
+```js
+import filterFactory, { dateFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [..., {
+  dataField: 'date',
+  text: 'Product date',
+  filter: dateFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+> **Notes:** date filter accept a Javascript Date object in your raw data and you have to use `column.formatter` to make it as your prefer string result
+
+Date filter is same as other filter, you can custom the date filter via `dateFilter` factory function:
+
+```js
+import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter';
+// omit...
+
+const dateFilter = dateFilter({
+  delay: 600,  // how long will trigger filtering after user typing, default is 500 ms
+  placeholder: 'custom placeholder',  // placeholder for date input
+  withoutEmptyComparatorOption: true,  // dont render empty option for comparator
+  comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],  // Custom the comparators
+  style: { display: 'inline-grid' },  // custom the style on date filter
+  className: 'custom-dateFilter-class',  // custom the class on date filter
+  comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select
+  comparatorClassName: 'custom-comparator-class',  // custom the class on comparator select
+  dateStyle: { backgroundColor: 'cadetblue', margin: '0px' },  // custom the style on date input
+  dateClassName: 'custom-date-class',  // custom the class on date input
+  defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }  // default value
+})
+
+// omit...
+```
+
+## Custom Filter
+
+```js
+import filterFactory, { customFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [..., {
+  dataField: 'date',
+  text: 'Product Name',
+  filter: customFilter(),
+  filterRenderer: (onFilter, column) => .....
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+In custom filter case, you are suppose to finish following two steps:
+1. Call `customFilter` and pass to `column.filter`
+2. Give `column.filterRenderer` as a callback function and return your custom filter element.
+
+### column.filterRenderer
+
+This function will pass two argument to you:
+1. `onFilter`: call it to trigger filter when you need.
+2. `column`: Just the column object!
+
+In the end, please remember to return your custom filter element!
+
+### customFilter
+
+`customFilter` function just same as `textFilter`, `selectFilter` etc, it is for customization reason. However, in the custom filter case, there's only one props is valid: `type`
+
+
+```js
+import filterFactory, { FILTER_TYPES } from 'react-bootstrap-table2-filter';
+
+const customFilter = customFilter({
+  type: FILTER_TYPES.NUMBER,  // default is FILTER_TYPES.TEXT
+})
+```
+
+`type` is a way to ask `react-bootstrap-table` to filter you data as number, select, date or normal text.
+
+### FILTER_TYPES
+
+Following properties is valid in `FILTER_TYPES`:
+* TEXT
+* SELECT
+* NUMBER
+* DATE

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

@@ -1,14 +1,19 @@
 import TextFilter from './src/components/text';
 import SelectFilter from './src/components/select';
+import MultiSelectFilter from './src/components/multiselect';
 import NumberFilter from './src/components/number';
-import wrapperFactory from './src/wrapper';
+import DateFilter from './src/components/date';
+import createContext from './src/context';
 import * as Comparison from './src/comparison';
+import { FILTER_TYPE } from './src/const';
 
 export default (options = {}) => ({
-  wrapperFactory,
+  createContext,
   options
 });
 
+export const FILTER_TYPES = FILTER_TYPE;
+
 export const Comparator = Comparison;
 
 export const textFilter = (props = {}) => ({
@@ -21,7 +26,21 @@ export const selectFilter = (props = {}) => ({
   props
 });
 
+export const multiSelectFilter = (props = {}) => ({
+  Filter: MultiSelectFilter,
+  props
+});
+
 export const numberFilter = (props = {}) => ({
   Filter: NumberFilter,
   props
 });
+
+export const dateFilter = (props = {}) => ({
+  Filter: DateFilter,
+  props
+});
+
+export const customFilter = (props = {}) => ({
+  props
+});

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "0.1.6",
+  "version": "1.0.0",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {
@@ -38,7 +38,7 @@
   ],
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   }
 }

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

@@ -0,0 +1,213 @@
+/* eslint react/require-default-props: 0 */
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
+/* eslint no-return-assign: 0 */
+/* eslint prefer-template: 0 */
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+
+import * as Comparator from '../comparison';
+import { FILTER_TYPE } from '../const';
+
+const legalComparators = [
+  Comparator.EQ,
+  Comparator.NE,
+  Comparator.GT,
+  Comparator.GE,
+  Comparator.LT,
+  Comparator.LE
+];
+
+function dateParser(d) {
+  return `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`;
+}
+
+class DateFilter extends Component {
+  constructor(props) {
+    super(props);
+    this.timeout = null;
+    this.comparators = props.comparators || legalComparators;
+    this.applyFilter = this.applyFilter.bind(this);
+    this.onChangeDate = this.onChangeDate.bind(this);
+    this.onChangeComparator = this.onChangeComparator.bind(this);
+  }
+
+  componentDidMount() {
+    const { getFilter } = this.props;
+    const comparator = this.dateFilterComparator.value;
+    const date = this.inputDate.value;
+    if (comparator && date) {
+      this.applyFilter(date, comparator, true);
+    }
+
+    // export onFilter function to allow users to access
+    if (getFilter) {
+      getFilter((filterVal) => {
+        this.dateFilterComparator.value = filterVal.comparator;
+        this.inputDate.value = dateParser(filterVal.date);
+
+        this.applyFilter(filterVal.date, filterVal.comparator);
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.timeout) clearTimeout(this.timeout);
+  }
+
+  onChangeDate(e) {
+    const comparator = this.dateFilterComparator.value;
+    const filterValue = e.target.value;
+    this.applyFilter(filterValue, comparator);
+  }
+
+  onChangeComparator(e) {
+    const value = this.inputDate.value;
+    const comparator = e.target.value;
+    this.applyFilter(value, comparator);
+  }
+
+  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;
+  }
+
+  getDefaultDate() {
+    let defaultDate = '';
+    const { defaultValue } = this.props;
+    if (defaultValue && defaultValue.date) {
+      // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
+      defaultDate = dateParser(new Date(defaultValue.date));
+    }
+    return defaultDate;
+  }
+
+  applyFilter(value, comparator, isInitial) {
+    // if (!comparator || !value) {
+    //  return;
+    // }
+    const { column, onFilter, delay } = this.props;
+    const execute = () => {
+      // Incoming value should always be a string, and the defaultDate
+      // above is implemented as an empty string, so we can just check for that.
+      // instead of parsing an invalid Date. The filter function will interpret
+      // null as an empty date field
+      const date = value === '' ? null : new Date(value);
+      onFilter(column, FILTER_TYPE.DATE, isInitial)({ date, comparator });
+    };
+    if (delay) {
+      this.timeout = setTimeout(() => { execute(); }, delay);
+    } else {
+      execute();
+    }
+  }
+
+  render() {
+    const {
+      placeholder,
+      column: { text },
+      style,
+      comparatorStyle,
+      dateStyle,
+      className,
+      comparatorClassName,
+      dateClassName,
+      defaultValue
+    } = this.props;
+
+    return (
+      <div
+        onClick={ e => e.stopPropagation() }
+        className={ `filter date-filter ${className}` }
+        style={ style }
+      >
+        <select
+          ref={ n => this.dateFilterComparator = n }
+          style={ comparatorStyle }
+          className={ `date-filter-comparator form-control ${comparatorClassName}` }
+          onChange={ this.onChangeComparator }
+          defaultValue={ defaultValue ? defaultValue.comparator : '' }
+        >
+          { this.getComparatorOptions() }
+        </select>
+        <input
+          ref={ n => this.inputDate = n }
+          className={ `filter date-filter-input form-control ${dateClassName}` }
+          style={ dateStyle }
+          type="date"
+          onChange={ this.onChangeDate }
+          placeholder={ placeholder || `Enter ${text}...` }
+          defaultValue={ this.getDefaultDate() }
+        />
+      </div>
+    );
+  }
+}
+
+DateFilter.propTypes = {
+  onFilter: PropTypes.func.isRequired,
+  column: PropTypes.object.isRequired,
+  delay: PropTypes.number,
+  defaultValue: PropTypes.shape({
+    date: PropTypes.oneOfType([PropTypes.object]),
+    comparator: PropTypes.oneOf([...legalComparators, ''])
+  }),
+  /* 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(`Date comparator provided is not supported.
+          Use only ${legalComparators}`);
+      }
+    }
+  },
+  placeholder: PropTypes.string,
+  withoutEmptyComparatorOption: PropTypes.bool,
+  style: PropTypes.object,
+  comparatorStyle: PropTypes.object,
+  dateStyle: PropTypes.object,
+  className: PropTypes.string,
+  comparatorClassName: PropTypes.string,
+  dateClassName: PropTypes.string,
+  getFilter: PropTypes.func
+};
+
+DateFilter.defaultProps = {
+  delay: 0,
+  defaultValue: {
+    date: undefined,
+    comparator: ''
+  },
+  withoutEmptyComparatorOption: false,
+  comparators: legalComparators,
+  placeholder: undefined,
+  style: undefined,
+  className: '',
+  comparatorStyle: undefined,
+  comparatorClassName: '',
+  dateStyle: undefined,
+  dateClassName: ''
+};
+
+
+export default DateFilter;

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

@@ -0,0 +1,152 @@
+/* eslint react/require-default-props: 0 */
+/* eslint no-return-assign: 0 */
+/* eslint no-param-reassign: 0 */
+/* eslint react/no-unused-prop-types: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { LIKE, EQ } from '../comparison';
+import { FILTER_TYPE } from '../const';
+
+
+function optionsEquals(currOpts, prevOpts) {
+  const keys = Object.keys(currOpts);
+  for (let i = 0; i < keys.length; i += 1) {
+    if (currOpts[keys[i]] !== prevOpts[keys[i]]) {
+      return false;
+    }
+  }
+  return Object.keys(currOpts).length === Object.keys(prevOpts).length;
+}
+
+const getSelections = container =>
+  Array.from(container.selectedOptions).map(item => item.value);
+
+class MultiSelectFilter extends Component {
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.applyFilter = this.applyFilter.bind(this);
+    const isSelected = props.defaultValue.map(item => props.options[item]).length > 0;
+    this.state = { isSelected };
+  }
+
+  componentDidMount() {
+    const { getFilter } = this.props;
+
+    const value = getSelections(this.selectInput);
+    if (value && value.length > 0) {
+      this.applyFilter(value);
+    }
+
+    // export onFilter function to allow users to access
+    if (getFilter) {
+      getFilter((filterVal) => {
+        this.selectInput.value = filterVal;
+        this.applyFilter(filterVal);
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    let needFilter = false;
+    if (this.props.defaultValue !== prevProps.defaultValue) {
+      needFilter = true;
+    } else if (!optionsEquals(this.props.options, prevProps.options)) {
+      needFilter = true;
+    }
+    if (needFilter) {
+      this.applyFilter(this.selectInput.value);
+    }
+  }
+
+  getOptions() {
+    const optionTags = [];
+    const { options, placeholder, column, withoutEmptyOption } = this.props;
+    if (!withoutEmptyOption) {
+      optionTags.push((
+        <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
+      ));
+    }
+    Object.keys(options).forEach(key =>
+      optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
+    );
+    return optionTags;
+  }
+
+  cleanFiltered() {
+    const value = (this.props.defaultValue !== undefined) ? this.props.defaultValue : [];
+    this.selectInput.value = value;
+    this.applyFilter(value);
+  }
+
+  applyFilter(value) {
+    if (value.length === 1 && value[0] === '') {
+      value = [];
+    }
+    this.setState(() => ({ isSelected: value.length > 0 }));
+    this.props.onFilter(this.props.column, FILTER_TYPE.MULTISELECT)(value);
+  }
+
+  filter(e) {
+    const value = getSelections(e.target);
+    this.applyFilter(value);
+  }
+
+  render() {
+    const {
+      style,
+      className,
+      defaultValue,
+      onFilter,
+      column,
+      options,
+      comparator,
+      withoutEmptyOption,
+      caseSensitive,
+      getFilter,
+      ...rest
+    } = this.props;
+
+    const selectClass =
+      `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
+
+    return (
+      <select
+        { ...rest }
+        ref={ n => this.selectInput = n }
+        style={ style }
+        multiple
+        className={ selectClass }
+        onChange={ this.filter }
+        onClick={ e => e.stopPropagation() }
+        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+      >
+        { this.getOptions() }
+      </select>
+    );
+  }
+}
+
+MultiSelectFilter.propTypes = {
+  onFilter: PropTypes.func.isRequired,
+  column: PropTypes.object.isRequired,
+  options: PropTypes.object.isRequired,
+  comparator: PropTypes.oneOf([LIKE, EQ]),
+  placeholder: PropTypes.string,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  withoutEmptyOption: PropTypes.bool,
+  defaultValue: PropTypes.array,
+  caseSensitive: PropTypes.bool,
+  getFilter: PropTypes.func
+};
+
+MultiSelectFilter.defaultProps = {
+  defaultValue: [],
+  className: '',
+  withoutEmptyOption: false,
+  comparator: EQ,
+  caseSensitive: true
+};
+
+export default MultiSelectFilter;

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

@@ -1,3 +1,4 @@
+/* eslint jsx-a11y/no-static-element-interactions: 0 */
 /* eslint react/require-default-props: 0 */
 /* eslint no-return-assign: 0 */
 
@@ -35,7 +36,7 @@ class NumberFilter extends Component {
     const comparator = this.numberFilterComparator.value;
     const number = this.numberFilter.value;
     if (comparator && number) {
-      onFilter(column, FILTER_TYPE.NUMBER)({ number, comparator });
+      onFilter(column, FILTER_TYPE.NUMBER, true)({ number, comparator });
     }
 
     // export onFilter function to allow users to access
@@ -167,7 +168,11 @@ class NumberFilter extends Component {
     `;
 
     return (
-      <div className={ `filter number-filter ${className}` } style={ style }>
+      <div
+        onClick={ e => e.stopPropagation() }
+        className={ `filter number-filter ${className}` }
+        style={ style }
+      >
         <select
           ref={ n => this.numberFilterComparator = n }
           style={ comparatorStyle }

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

@@ -29,7 +29,7 @@ class SelectFilter extends Component {
 
     const value = this.selectInput.value;
     if (value && value !== '') {
-      onFilter(column, FILTER_TYPE.SELECT)(value);
+      onFilter(column, FILTER_TYPE.SELECT, true)(value);
     }
 
     // export onFilter function to allow users to access
@@ -116,6 +116,7 @@ class SelectFilter extends Component {
         style={ style }
         className={ selectClass }
         onChange={ this.filter }
+        onClick={ e => e.stopPropagation() }
         defaultValue={ defaultValue !== undefined ? defaultValue : '' }
       >
         { this.getOptions() }

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

@@ -23,7 +23,7 @@ class TextFilter extends Component {
     const defaultValue = this.input.value;
 
     if (defaultValue) {
-      onFilter(this.props.column, FILTER_TYPE.TEXT)(defaultValue);
+      onFilter(this.props.column, FILTER_TYPE.TEXT, true)(defaultValue);
     }
 
     // export onFilter function to allow users to access

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

@@ -1,7 +1,9 @@
 export const FILTER_TYPE = {
   TEXT: 'TEXT',
   SELECT: 'SELECT',
-  NUMBER: 'NUMBER'
+  MULTISELECT: 'MULTISELECT',
+  NUMBER: 'NUMBER',
+  DATE: 'DATE'
 };
 
 export const FILTER_DELAY = 500;

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

@@ -0,0 +1,99 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { filters } from './filter';
+import { LIKE, EQ } from './comparison';
+import { FILTER_TYPE } from './const';
+
+export default (
+  _,
+  isRemoteFiltering,
+  handleFilterChange
+) => {
+  const FilterContext = React.createContext();
+
+  class FilterProvider extends React.Component {
+    static propTypes = {
+      data: PropTypes.array.isRequired,
+      columns: PropTypes.array.isRequired
+    }
+
+    constructor(props) {
+      super(props);
+      this.currFilters = {};
+      this.onFilter = this.onFilter.bind(this);
+      this.onExternalFilter = this.onExternalFilter.bind(this);
+    }
+
+    componentDidMount() {
+      if (isRemoteFiltering() && Object.keys(this.currFilters).length > 0) {
+        handleFilterChange(this.currFilters);
+      }
+    }
+
+    onFilter(column, filterType, initialize = false) {
+      return (filterVal) => {
+        // watch out here if migration to context API, #334
+        const currFilters = Object.assign({}, this.currFilters);
+        const { dataField, filter } = column;
+
+        const needClearFilters =
+          !_.isDefined(filterVal) ||
+          filterVal === '' ||
+          filterVal.length === 0;
+
+        if (needClearFilters) {
+          delete currFilters[dataField];
+        } else {
+          // select default comparator is EQ, others are LIKE
+          const {
+            comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
+            caseSensitive = false
+          } = filter.props;
+          currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
+        }
+
+        this.currFilters = currFilters;
+
+        if (isRemoteFiltering()) {
+          if (!initialize) {
+            handleFilterChange(this.currFilters);
+          }
+          return;
+        }
+
+        this.forceUpdate();
+      };
+    }
+
+    onExternalFilter(column, filterType) {
+      return (value) => {
+        this.onFilter(column, filterType)(value);
+      };
+    }
+
+    render() {
+      let { data } = this.props;
+      if (!isRemoteFiltering()) {
+        data = filters(data, this.props.columns, _)(this.currFilters);
+      }
+      return (
+        <FilterContext.Provider value={ {
+          data,
+          onFilter: this.onFilter,
+          onExternalFilter: this.onExternalFilter
+        } }
+        >
+          { this.props.children }
+        </FilterContext.Provider>
+      );
+    }
+  }
+
+  return {
+    Provider: FilterProvider,
+    Consumer: FilterContext.Consumer
+  };
+};

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

@@ -91,6 +91,122 @@ export const filterByNumber = _ => (
   })
 );
 
+export const filterByDate = _ => (
+  data,
+  dataField,
+  { filterVal: { comparator, date } },
+  customFilterValue
+) => {
+  if (!date || !comparator) return data;
+  const filterDate = date.getDate();
+  const filterMonth = date.getMonth();
+  const filterYear = date.getFullYear();
+
+  return data.filter((row) => {
+    let valid = true;
+    let cell = _.get(row, dataField);
+
+    if (customFilterValue) {
+      cell = customFilterValue(cell, row);
+    }
+
+    if (typeof cell !== 'object') {
+      cell = new Date(cell);
+    }
+
+    const targetDate = cell.getDate();
+    const targetMonth = cell.getMonth();
+    const targetYear = cell.getFullYear();
+
+
+    switch (comparator) {
+      case EQ: {
+        if (
+          filterDate !== targetDate ||
+          filterMonth !== targetMonth ||
+          filterYear !== targetYear
+        ) {
+          valid = false;
+        }
+        break;
+      }
+      case GT: {
+        if (cell <= date) {
+          valid = false;
+        }
+        break;
+      }
+      case GE: {
+        if (targetYear < filterYear) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth < filterMonth) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth === filterMonth &&
+          targetDate < filterDate) {
+          valid = false;
+        }
+        break;
+      }
+      case LT: {
+        if (cell >= date) {
+          valid = false;
+        }
+        break;
+      }
+      case LE: {
+        if (targetYear > filterYear) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth > filterMonth) {
+          valid = false;
+        } else if (targetYear === filterYear &&
+          targetMonth === filterMonth &&
+          targetDate > filterDate) {
+          valid = false;
+        }
+        break;
+      }
+      case NE: {
+        if (
+          filterDate === targetDate &&
+          filterMonth === targetMonth &&
+          filterYear === targetYear
+        ) {
+          valid = false;
+        }
+        break;
+      }
+      default: {
+        console.error('Date comparator provided is not supported');
+        break;
+      }
+    }
+    return valid;
+  });
+};
+
+export const filterByArray = _ => (
+  data,
+  dataField,
+  { filterVal, comparator }
+) => {
+  if (filterVal.length === 0) return data;
+  const refinedFilterVal = filterVal
+    .filter(x => _.isDefined(x))
+    .map(x => x.toString());
+  return data.filter((row) => {
+    const cell = _.get(row, dataField);
+    let cellStr = _.isDefined(cell) ? cell.toString() : '';
+    if (comparator === EQ) {
+      return refinedFilterVal.indexOf(cellStr) !== -1;
+    }
+    cellStr = cellStr.toLocaleUpperCase();
+    return refinedFilterVal.some(item => cellStr.indexOf(item.toLocaleUpperCase()) !== -1);
+  });
+};
+
 export const filterFactory = _ => (filterType) => {
   let filterFn;
   switch (filterType) {
@@ -98,18 +214,24 @@ export const filterFactory = _ => (filterType) => {
     case FILTER_TYPE.SELECT:
       filterFn = filterByText(_);
       break;
+    case FILTER_TYPE.MULTISELECT:
+      filterFn = filterByArray(_);
+      break;
     case FILTER_TYPE.NUMBER:
       filterFn = filterByNumber(_);
       break;
+    case FILTER_TYPE.DATE:
+      filterFn = filterByDate(_);
+      break;
     default:
       filterFn = filterByText(_);
   }
   return filterFn;
 };
 
-export const filters = (store, columns, _) => (currFilters) => {
+export const filters = (data, columns, _) => (currFilters) => {
   const factory = filterFactory(_);
-  let result = store.getAllData();
+  let result = data;
   let filterFn;
   Object.keys(currFilters).forEach((dataField) => {
     const filterObj = currFilters[dataField];

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

@@ -1,92 +0,0 @@
-/* eslint no-param-reassign: 0 */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { filters } from './filter';
-import { LIKE, EQ } from './comparison';
-import { FILTER_TYPE } from './const';
-
-export default (Base, {
-  _,
-  remoteResolver
-}) =>
-  class FilterWrapper extends remoteResolver(Component) {
-    static propTypes = {
-      store: PropTypes.object.isRequired,
-      columns: PropTypes.array.isRequired
-    }
-
-    constructor(props) {
-      super(props);
-      this.state = { currFilters: {}, isDataChanged: props.isDataChanged || false };
-      this.onFilter = this.onFilter.bind(this);
-    }
-
-    componentWillReceiveProps({ isDataChanged, store, columns }) {
-      // consider to use lodash.isEqual
-      const isRemoteFilter = this.isRemoteFiltering() || this.isRemotePagination();
-      if (isRemoteFilter ||
-        JSON.stringify(this.state.currFilters) !== JSON.stringify(store.filters)) {
-        // I think this condition only isRemoteFilter is enough
-        store.filteredData = store.getAllData();
-        this.setState(() => ({ isDataChanged: true, currFilters: store.filters }));
-      } else if (isDataChanged) {
-        if (!isRemoteFilter && Object.keys(this.state.currFilters).length > 0) {
-          store.filteredData = filters(store, columns, _)(this.state.currFilters);
-        }
-        this.setState(() => ({ isDataChanged }));
-      } else {
-        this.setState(() => ({ isDataChanged: false }));
-      }
-    }
-
-    /**
-     * filter the table like below:
-     * onFilter(column, filterType)(filterVal)
-     * @param {Object} column
-     * @param {String} filterType
-     * @param {String} filterVal - user input for filtering.
-     */
-    onFilter(column, filterType) {
-      return (filterVal) => {
-        const { store, columns } = this.props;
-        const currFilters = Object.assign({}, this.state.currFilters);
-        const { dataField, filter } = column;
-
-        if (!_.isDefined(filterVal) || filterVal === '') {
-          delete currFilters[dataField];
-        } else {
-          // select default comparator is EQ, others are LIKE
-          const {
-            comparator = (filterType === FILTER_TYPE.SELECT ? EQ : LIKE),
-            caseSensitive = false
-          } = filter.props;
-          currFilters[dataField] = { filterVal, filterType, comparator, caseSensitive };
-        }
-
-        store.filters = currFilters;
-
-        if (this.isRemoteFiltering() || this.isRemotePagination()) {
-          this.handleRemoteFilterChange();
-          // when remote filtering is enable, dont set currFilters state
-          // in the componentWillReceiveProps,
-          // it's the key point that we can know the filter is changed
-          return;
-        }
-
-        store.filteredData = filters(store, columns, _)(currFilters);
-        this.setState(() => ({ currFilters, isDataChanged: true }));
-      };
-    }
-
-    render() {
-      return (
-        <Base
-          { ...this.props }
-          data={ this.props.store.data }
-          onFilter={ this.onFilter }
-          isDataChanged={ this.state.isDataChanged }
-        />
-      );
-    }
-  };

packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss

@@ -5,7 +5,8 @@
 .react-bootstrap-table > table > thead > tr > th .select-filter option[value=''],
 .react-bootstrap-table > table > thead > tr > th .select-filter.placeholder-selected,
 .react-bootstrap-table > table > thead > tr > th .filter::-webkit-input-placeholder,
-.react-bootstrap-table > table > thead > tr > th .number-filter-input::-webkit-input-placeholder {
+.react-bootstrap-table > table > thead > tr > th .number-filter-input::-webkit-input-placeholder,
+.react-bootstrap-table > table > thead > tr > th .date-filter-input::-webkit-input-placeholder {
   color: lightgrey;
   font-style: italic;
 }
@@ -15,17 +16,20 @@
   font-style: initial;
 }
 
-.react-bootstrap-table > table > thead > tr > th .number-filter {
+.react-bootstrap-table > table > thead > tr > th .number-filter,
+.react-bootstrap-table > table > thead > tr > th .date-filter {
   display: flex;
 }
 
-.react-bootstrap-table > table > thead > tr > th .number-filter-input {
+.react-bootstrap-table > table > thead > tr > th .number-filter-input,
+.react-bootstrap-table > table > thead > tr > th .date-filter-input {
   margin-left: 5px;
   float: left;
   width: calc(100% - 67px - 5px);
 }
 
-.react-bootstrap-table > table > thead > tr > th .number-filter-comparator {
+.react-bootstrap-table > table > thead > tr > th .number-filter-comparator,
+.react-bootstrap-table > table > thead > tr > th .date-filter-comparator {
   width: 67px;
   float: left;
 }

packages/react-bootstrap-table2-filter/test/components/date.test.js

@@ -0,0 +1,264 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount } from 'enzyme';
+import DateFilter from '../../src/components/date';
+import { FILTER_TYPE } from '../../src/const';
+import * as Comparator from '../../src/comparison';
+
+
+describe('Date Filter', () => {
+  let wrapper;
+
+
+  const onFilterFirstReturn = jest.fn();
+  const onFilter = jest.fn().mockReturnValue(onFilterFirstReturn);
+
+  const column = {
+    dataField: 'price',
+    text: 'Product Price'
+  };
+
+  afterEach(() => {
+    onFilter.mockClear();
+    onFilterFirstReturn.mockClear();
+
+    // onFilter.returns(onFilterFirstReturn);
+  });
+
+  describe('initialization', () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter onFilter={ onFilter } column={ column } />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-input')).toHaveLength(1);
+      expect(wrapper.find('.date-filter-comparator')).toHaveLength(1);
+      expect(wrapper.find('.date-filter')).toHaveLength(1);
+    });
+
+    it('should rendering comparator options correctly', () => {
+      const select = wrapper.find('select');
+      expect(select.find('option')).toHaveLength(wrapper.prop('comparators').length + 1);
+    });
+  });
+
+  describe('when withoutEmptyComparatorOption prop is true', () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          withoutEmptyComparatorOption
+        />
+      );
+    });
+
+    it('should rendering comparator options correctly', () => {
+      const select = wrapper.find('.date-filter-comparator');
+      expect(select.find('option')).toHaveLength(wrapper.prop('comparators').length);
+    });
+  });
+
+  describe('when defaultValue.date props is defined', () => {
+    const date = new Date(2018, 0, 1);
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          defaultValue={ { date } }
+        />
+      );
+    });
+
+    it('should rendering input successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      const input = wrapper.find('.date-filter-input');
+      expect(input).toHaveLength(1);
+      expect(input.props().defaultValue).toEqual(wrapper.instance().getDefaultDate());
+    });
+  });
+
+  describe('when defaultValue.comparator props is defined', () => {
+    const comparator = Comparator.EQ;
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          defaultValue={ { comparator } }
+        />
+      );
+    });
+
+    it('should rendering comparator select successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      const select = wrapper.find('.date-filter-comparator');
+      expect(select).toHaveLength(1);
+      expect(select.props().defaultValue).toEqual(comparator);
+    });
+  });
+
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const comparator = Comparator.EQ;
+    const date = new Date(2018, 0, 1);
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter onFilter={ onFilter } column={ column } getFilter={ getFilter } />
+      );
+
+      programmaticallyFilter({ comparator, date });
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter).toHaveBeenCalledTimes(1);
+      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE, undefined);
+      expect(onFilterFirstReturn).toHaveBeenCalledTimes(1);
+      expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date });
+    });
+  });
+
+  describe('when defaultValue.number and defaultValue.comparator props are defined', () => {
+    let date;
+    let comparator;
+
+    beforeEach(() => {
+      date = new Date();
+      comparator = Comparator.EQ;
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          defaultValue={ { date, comparator } }
+        />
+      );
+    });
+
+    it('should calling onFilter on componentDidMount', () => {
+      expect(onFilter).toHaveBeenCalledTimes(1);
+      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE, true);
+      expect(onFilterFirstReturn).toHaveBeenCalledTimes(1);
+      // expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date });
+    });
+  });
+
+  describe('when style props is defined', () => {
+    const style = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          style={ style }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter').prop('style')).toEqual(style);
+    });
+  });
+
+  describe('when dateStyle props is defined', () => {
+    const dateStyle = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          dateStyle={ dateStyle }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-input').prop('style')).toEqual(dateStyle);
+    });
+  });
+
+  describe('when comparatorStyle props is defined', () => {
+    const comparatorStyle = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          comparatorStyle={ comparatorStyle }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-comparator').prop('style')).toEqual(comparatorStyle);
+    });
+  });
+
+  describe('when className props is defined', () => {
+    const className = 'test';
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          className={ className }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.hasClass(className)).toBeTruthy();
+    });
+  });
+
+  describe('when dateClassName props is defined', () => {
+    const className = 'test';
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          dateClassName={ className }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-input').prop('className').indexOf(className) > -1).toBeTruthy();
+    });
+  });
+
+  describe('when comparatorClassName props is defined', () => {
+    const className = 'test';
+    beforeEach(() => {
+      wrapper = mount(
+        <DateFilter
+          onFilter={ onFilter }
+          column={ column }
+          comparatorClassName={ className }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('.date-filter-comparator').prop('className').indexOf(className) > -1).toBeTruthy();
+    });
+  });
+});

packages/react-bootstrap-table2-filter/test/components/multiselect.test.js

@@ -0,0 +1,354 @@
+import 'jsdom-global/register';
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import MultiSelectFilter from '../../src/components/multiselect';
+import { FILTER_TYPE } from '../../src/const';
+
+
+describe('Multi Select Filter', () => {
+  let wrapper;
+  let instance;
+
+  // onFilter(x)(y) = filter result
+  const onFilter = sinon.stub();
+  const onFilterFirstReturn = sinon.stub();
+
+  const column = {
+    dataField: 'quality',
+    text: 'Product Quality'
+  };
+
+  const options = {
+    0: 'Bad',
+    1: 'Good',
+    2: 'Unknown'
+  };
+
+  afterEach(() => {
+    onFilter.reset();
+    onFilterFirstReturn.reset();
+
+    onFilter.returns(onFilterFirstReturn);
+  });
+
+  describe('initialization', () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <MultiSelectFilter onFilter={ onFilter } column={ column } options={ options } />
+      );
+      instance = wrapper.instance();
+    });
+
+    it('should have correct state', () => {
+      expect(instance.state.isSelected).toBeFalsy();
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('select')).toHaveLength(1);
+      expect(wrapper.find('.select-filter')).toHaveLength(1);
+      expect(wrapper.find('.placeholder-selected')).toHaveLength(1);
+    });
+
+    it('should rendering select options correctly', () => {
+      const select = wrapper.find('select');
+      expect(select.find('option')).toHaveLength(Object.keys(options).length + 1);
+      expect(select.childAt(0).text()).toEqual(`Select ${column.text}...`);
+
+      Object.keys(options).forEach((key, i) => {
+        expect(select.childAt(i + 1).prop('value')).toEqual(key);
+        expect(select.childAt(i + 1).text()).toEqual(options[key]);
+      });
+    });
+  });
+
+  describe('when defaultValue is defined', () => {
+    let defaultValue;
+
+    describe('and it is valid', () => {
+      beforeEach(() => {
+        defaultValue = ['0'];
+        wrapper = mount(
+          <MultiSelectFilter
+            onFilter={ onFilter }
+            column={ column }
+            options={ options }
+            defaultValue={ defaultValue }
+          />
+        );
+        instance = wrapper.instance();
+      });
+
+      it('should have correct state', () => {
+        expect(instance.state.isSelected).toBeTruthy();
+      });
+
+      it('should rendering component successfully', () => {
+        expect(wrapper).toHaveLength(1);
+        expect(wrapper.find('.placeholder-selected')).toHaveLength(0);
+      });
+
+      it('should calling onFilter on componentDidMount', () => {
+        expect(onFilter.calledOnce).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.MULTISELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+        expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
+      });
+    });
+  });
+
+  describe('when props.getFilter is defined', () => {
+    let programmaticallyFilter;
+
+    const filterValue = ['foo'];
+
+    const getFilter = (filter) => {
+      programmaticallyFilter = filter;
+    };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <MultiSelectFilter
+          onFilter={ onFilter }
+          column={ column }
+          options={ options }
+          getFilter={ getFilter }
+        />
+      );
+      instance = wrapper.instance();
+
+      programmaticallyFilter(filterValue);
+    });
+
+    it('should do onFilter correctly when exported function was executed', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.MULTISELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(filterValue)).toBeTruthy();
+    });
+
+    it('should setState correctly when exported function was executed', () => {
+      expect(instance.state.isSelected).toBeTruthy();
+    });
+  });
+
+  describe('when placeholder is defined', () => {
+    const placeholder = 'test';
+    beforeEach(() => {
+      wrapper = mount(
+        <MultiSelectFilter
+          onFilter={ onFilter }
+          column={ column }
+          options={ options }
+          placeholder={ placeholder }
+        />
+      );
+      instance = wrapper.instance();
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      const select = wrapper.find('select');
+      expect(select.childAt(0).text()).toEqual(placeholder);
+    });
+  });
+
+  describe('when style is defined', () => {
+    const style = { backgroundColor: 'red' };
+    beforeEach(() => {
+      wrapper = mount(
+        <MultiSelectFilter
+          onFilter={ onFilter }
+          column={ column }
+          options={ options }
+          style={ style }
+        />
+      );
+    });
+
+    it('should rendering component successfully', () => {
+      expect(wrapper).toHaveLength(1);
+      expect(wrapper.find('select').prop('style')).toEqual(style);
+    });
+  });
+
+  describe('when withoutEmptyOption is defined', () => {
+    beforeEach(() => {
+      wrapper = mount(
+        <MultiSelectFilter
+          onFilter={ onFilter }
+          column={ column }
+          options={ options }
+          withoutEmptyOption
+        />
+      );
+    });
+
+    it('should rendering select without default empty option', () => {
+      const select = wrapper.find('select');
+      expect(select.find('option')).toHaveLength(Object.keys(options).length);
+    });
+  });
+
+  describe('componentDidUpdate', () => {
+    let prevProps;
+
+    describe('when props.defaultValue is diff from prevProps.defaultValue', () => {
+      const defaultValue = ['0'];
+
+      beforeEach(() => {
+        wrapper = mount(
+          <MultiSelectFilter
+            onFilter={ onFilter }
+            column={ column }
+            options={ options }
+            defaultValue={ defaultValue }
+          />
+        );
+        prevProps = {
+          column,
+          options,
+          defaultValue: ['1']
+        };
+        instance = wrapper.instance();
+        instance.componentDidUpdate(prevProps);
+      });
+
+      it('should update', () => {
+        expect(onFilter.callCount).toBe(2);
+        expect(onFilter.calledWith(column, FILTER_TYPE.MULTISELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
+      });
+    });
+
+    describe('when props.options is diff from prevProps.options', () => {
+      const defaultValue = ['0'];
+      beforeEach(() => {
+        wrapper = mount(
+          <MultiSelectFilter
+            onFilter={ onFilter }
+            column={ column }
+            options={ {
+              ...options,
+              3: 'Best'
+            } }
+            defaultValue={ defaultValue }
+          />
+        );
+        prevProps = {
+          column,
+          options
+        };
+        instance = wrapper.instance();
+        instance.componentDidUpdate(prevProps);
+      });
+
+      it('should update', () => {
+        expect(onFilter.callCount).toBe(2);
+        expect(onFilter.calledWith(column, FILTER_TYPE.MULTISELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(instance.props.defaultValue)).toBeTruthy();
+      });
+    });
+  });
+
+  describe('cleanFiltered', () => {
+    describe('when props.defaultValue is defined', () => {
+      const defaultValue = ['0'];
+      beforeEach(() => {
+        wrapper = mount(
+          <MultiSelectFilter
+            onFilter={ onFilter }
+            column={ column }
+            options={ options }
+            defaultValue={ defaultValue }
+          />
+        );
+        instance = wrapper.instance();
+        instance.cleanFiltered();
+      });
+
+      it('should setting state correctly', () => {
+        expect(instance.state.isSelected).toBeTruthy();
+      });
+
+      it('should calling onFilter correctly', () => {
+        expect(onFilter.callCount).toBe(2);
+        expect(onFilter.calledWith(column, FILTER_TYPE.MULTISELECT)).toBeTruthy();
+        expect(onFilterFirstReturn.callCount).toBe(2);
+        expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
+      });
+    });
+
+    describe('when props.defaultValue is not defined', () => {
+      beforeEach(() => {
+        wrapper = mount(
+          <MultiSelectFilter
+            onFilter={ onFilter }
+            column={ column }
+            options={ options }
+          />
+        );
+        instance = wrapper.instance();
+        instance.cleanFiltered();
+      });
+
+      it('should setting state correctly', () => {
+        expect(instance.state.isSelected).toBeFalsy();
+      });
+
+      it('should calling onFilter correctly', () => {
+        expect(onFilter.callCount).toBe(1);
+        expect(onFilterFirstReturn.callCount).toBe(1);
+      });
+    });
+  });
+
+  describe('applyFilter', () => {
+    const values = ['2'];
+    beforeEach(() => {
+      wrapper = mount(
+        <MultiSelectFilter onFilter={ onFilter } column={ column } options={ options } />
+      );
+      instance = wrapper.instance();
+      instance.applyFilter(values);
+    });
+
+    it('should setting state correctly', () => {
+      expect(instance.state.isSelected).toBeTruthy();
+    });
+
+    it('should calling onFilter correctly', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.MULTISELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(values)).toBeTruthy();
+    });
+  });
+
+  describe('filter', () => {
+    const event = { target: { selectedOptions: [{ value: 'tester' }] } };
+
+    beforeEach(() => {
+      wrapper = mount(
+        <MultiSelectFilter onFilter={ onFilter } column={ column } options={ options } />
+      );
+      instance = wrapper.instance();
+      instance.filter(event);
+    });
+
+    it('should setting state correctly', () => {
+      expect(instance.state.isSelected).toBeTruthy();
+    });
+
+    it('should calling onFilter correctly', () => {
+      expect(onFilter.calledOnce).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.MULTISELECT)).toBeTruthy();
+      expect(onFilterFirstReturn.calledOnce).toBeTruthy();
+      expect(onFilterFirstReturn.calledWith(
+        event.target.selectedOptions.map(item => item.value))).toBeTruthy();
+    });
+  });
+});

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

@@ -147,7 +147,7 @@ describe('Number Filter', () => {
 
     it('should calling onFilter on componentDidMount', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.NUMBER, true)).toBeTruthy();
       expect(onFilterFirstReturn.calledOnce).toBeTruthy();
       expect(onFilterFirstReturn.calledWith({ number: `${number}`, comparator })).toBeTruthy();
     });

packages/react-bootstrap-table2-filter/test/components/select.test.js

@@ -91,7 +91,7 @@ describe('Select Filter', () => {
 
       it('should calling onFilter on componentDidMount', () => {
         expect(onFilter.calledOnce).toBeTruthy();
-        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT)).toBeTruthy();
+        expect(onFilter.calledWith(column, FILTER_TYPE.SELECT, true)).toBeTruthy();
         expect(onFilterFirstReturn.calledOnce).toBeTruthy();
         expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
       });

packages/react-bootstrap-table2-filter/test/components/text.test.js

@@ -65,7 +65,7 @@ describe('Text Filter', () => {
 
     it('should calling onFilter on componentDidMount', () => {
       expect(onFilter.calledOnce).toBeTruthy();
-      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT)).toBeTruthy();
+      expect(onFilter.calledWith(column, FILTER_TYPE.TEXT, true)).toBeTruthy();
       expect(onFilterFirstReturn.calledOnce).toBeTruthy();
       expect(onFilterFirstReturn.calledWith(defaultValue)).toBeTruthy();
     });

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

@@ -0,0 +1,253 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+import _ from 'react-bootstrap-table-next/src/utils';
+import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
+
+import {
+  FILTER_TYPE
+} from '../src/const';
+import createFilterContext from '../src/context';
+import { textFilter } from '../index';
+
+describe('FilterContext', () => {
+  let wrapper;
+  let FilterContext;
+
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+
+  const columns = [{
+    dataField: 'id',
+    text: 'ID',
+    filter: textFilter()
+  }, {
+    dataField: 'name',
+    text: 'Name',
+    filter: textFilter()
+  }];
+
+  const mockBase = jest.fn((props => (
+    <BootstrapTable
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      { ...props }
+    />
+  )));
+
+  const handleFilterChange = jest.fn();
+
+  function shallowContext(
+    enableRemote = false
+  ) {
+    mockBase.mockReset();
+    handleFilterChange.mockReset();
+    FilterContext = createFilterContext(
+      _,
+      jest.fn().mockReturnValue(enableRemote),
+      handleFilterChange
+    );
+
+    return (
+      <FilterContext.Provider
+        columns={ columns }
+        data={ data }
+      >
+        <FilterContext.Consumer>
+          {
+            filterProps => mockBase(filterProps)
+          }
+        </FilterContext.Consumer>
+      </FilterContext.Provider>
+    );
+  }
+
+  describe('default render', () => {
+    beforeEach(() => {
+      wrapper = shallow(shallowContext());
+      wrapper.render();
+    });
+
+    it('should have correct Provider property after calling createFilterContext', () => {
+      expect(FilterContext.Provider).toBeDefined();
+    });
+
+    it('should have correct Consumer property after calling createFilterContext', () => {
+      expect(FilterContext.Consumer).toBeDefined();
+    });
+
+    it('should have correct currFilters', () => {
+      expect(wrapper.instance().currFilters).toEqual({});
+    });
+
+    it('should pass correct cell editing props to children element', () => {
+      expect(wrapper.length).toBe(1);
+      expect(mockBase).toHaveBeenCalledWith({
+        data,
+        onFilter: wrapper.instance().onFilter,
+        onExternalFilter: wrapper.instance().onExternalFilter
+      });
+    });
+  });
+
+  describe('when remote filter is enable', () => {
+    beforeEach(() => {
+      wrapper = shallow(shallowContext(true));
+      wrapper.render();
+      wrapper.instance().currFilters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
+    });
+
+    it('should pass original data without internal filtering', () => {
+      expect(wrapper.length).toBe(1);
+      expect(mockBase).toHaveBeenCalledWith({
+        data,
+        onFilter: wrapper.instance().onFilter,
+        onExternalFilter: wrapper.instance().onExternalFilter
+      });
+    });
+  });
+
+  describe('componentDidMount', () => {
+    describe('when remote filter is disabled', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.render();
+        wrapper.instance().componentDidMount();
+      });
+
+      it('should not call handleFilterChange', () => {
+        expect(handleFilterChange).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    describe('when remote filter is enable but currFilters is empty', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(true));
+        wrapper.render();
+        wrapper.instance().componentDidMount();
+      });
+
+      it('should not call handleFilterChange', () => {
+        expect(handleFilterChange).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    describe('when remote filter is enable and currFilters is not empty', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(true));
+        wrapper.instance().currFilters.price = { filterVal: 40, filterType: FILTER_TYPE.TEXT };
+      });
+
+      it('should not call handleFilterChange', () => {
+        wrapper.instance().componentDidMount();
+        expect(handleFilterChange).toHaveBeenCalledTimes(1);
+        expect(handleFilterChange).toHaveBeenCalledWith(wrapper.instance().currFilters);
+      });
+    });
+  });
+
+  describe('onFilter', () => {
+    let instance;
+    describe('when filterVal is empty or undefined', () => {
+      const filterVals = ['', undefined, []];
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should correct currFilters', () => {
+        filterVals.forEach((filterVal) => {
+          instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
+          expect(Object.keys(instance.currFilters)).toHaveLength(0);
+        });
+      });
+    });
+
+    describe('when filterVal is existing', () => {
+      const filterVal = '3';
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should correct currFilters', () => {
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(Object.keys(instance.currFilters)).toHaveLength(1);
+      });
+    });
+
+    describe('when remote filter is enabled', () => {
+      const filterVal = '3';
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(true));
+        wrapper.render();
+        instance = wrapper.instance();
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
+      });
+
+      it('should correct currFilters', () => {
+        expect(Object.keys(instance.currFilters)).toHaveLength(1);
+      });
+
+      it('should calling handleFilterChange correctly', () => {
+        expect(handleFilterChange).toHaveBeenCalledTimes(1);
+        expect(handleFilterChange).toHaveBeenCalledWith(instance.currFilters);
+      });
+    });
+
+    describe('when remote filter is enabled but initialize argument is true', () => {
+      const filterVal = '3';
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(true));
+        wrapper.render();
+        instance = wrapper.instance();
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT, true)(filterVal);
+      });
+
+      it('should correct currFilters', () => {
+        expect(Object.keys(instance.currFilters)).toHaveLength(1);
+      });
+
+      it('should not call handleFilterChange correctly', () => {
+        expect(handleFilterChange).toHaveBeenCalledTimes(0);
+      });
+    });
+
+    describe('combination', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should set correct currFilters', () => {
+        instance.onFilter(columns[0], FILTER_TYPE.TEXT)('3');
+        expect(Object.keys(instance.currFilters)).toHaveLength(1);
+
+        instance.onFilter(columns[0], FILTER_TYPE.TEXT)('2');
+        expect(Object.keys(instance.currFilters)).toHaveLength(1);
+
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT)('2');
+        expect(Object.keys(instance.currFilters)).toHaveLength(2);
+
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT)('');
+        expect(Object.keys(instance.currFilters)).toHaveLength(1);
+
+        instance.onFilter(columns[0], FILTER_TYPE.TEXT)('');
+        expect(Object.keys(instance.currFilters)).toHaveLength(0);
+      });
+    });
+  });
+});

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

@@ -1,6 +1,4 @@
-import sinon from 'sinon';
 import _ from 'react-bootstrap-table-next/src/utils';
-import Store from 'react-bootstrap-table-next/src/store';
 
 import { filters } from '../src/filter';
 import { FILTER_TYPE } from '../src/const';
@@ -11,19 +9,16 @@ for (let i = 0; i < 20; i += 1) {
   data.push({
     id: i,
     name: `itme name ${i}`,
-    price: 200 + i
+    price: 200 + i,
+    date: new Date(2017, i, 1)
   });
 }
 
 describe('filter', () => {
-  let store;
-  let filterFn;
   let currFilters;
   let columns;
 
   beforeEach(() => {
-    store = new Store('id');
-    store.data = data;
     currFilters = {};
     columns = [{
       dataField: 'id',
@@ -34,14 +29,13 @@ describe('filter', () => {
     }, {
       dataField: 'price',
       text: 'Price'
+    }, {
+      dataField: 'date',
+      text: 'Date'
     }];
   });
 
   describe('filterByText', () => {
-    beforeEach(() => {
-      filterFn = filters(store, columns, _);
-    });
-
     describe('when filter value is not a String', () => {
       it('should transform to string and do the filter', () => {
         currFilters.name = {
@@ -49,7 +43,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.TEXT
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
         expect(result).toHaveLength(2);
       });
@@ -62,7 +56,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.TEXT
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
         expect(result).toHaveLength(2);
       });
@@ -76,7 +70,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.TEXT
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
         expect(result).toHaveLength(0);
       });
@@ -90,7 +84,7 @@ describe('filter', () => {
           comparator: EQ
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
         expect(result).toHaveLength(1);
       });
@@ -98,8 +92,7 @@ describe('filter', () => {
 
     describe('column.filterValue is defined', () => {
       beforeEach(() => {
-        columns[1].filterValue = sinon.stub();
-        filterFn = filters(store, columns, _);
+        columns[1].filterValue = jest.fn();
       });
 
       it('should calling custom filterValue callback correctly', () => {
@@ -108,22 +101,64 @@ describe('filter', () => {
           filterType: FILTER_TYPE.TEXT
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
-        expect(columns[1].filterValue.callCount).toBe(data.length);
-        const calls = columns[1].filterValue.getCalls();
-        calls.forEach((call, i) => {
-          expect(call.calledWith(data[i].name, data[i])).toBeTruthy();
+        expect(columns[1].filterValue).toHaveBeenCalledTimes(data.length);
+        // const calls = columns[1].filterValue.mock.calls;
+        // calls.forEach((call, i) => {
+        //   expect(call).toEqual([data[i].name, data[i]]);
+        //   expect(call.calledWith(data[i].name, data[i])).toBeTruthy();
+        // });
+      });
+    });
+  });
+
+  describe('filterByArray', () => {
+    describe('when filter value is empty array', () => {
+      it('should return original data', () => {
+        currFilters.name = {
+          filterVal: [],
+          filterType: FILTER_TYPE.MULTISELECT
+        };
+
+        const result = filters(data, columns, _)(currFilters);
+        expect(result).toBeDefined();
+        expect(result).toHaveLength(data.length);
+      });
+    });
+
+    describe('when filter value is not an empty array', () => {
+      describe(`and comparator is ${EQ}`, () => {
+        it('should return data correctly', () => {
+          currFilters.price = {
+            filterVal: [201, 203],
+            filterType: FILTER_TYPE.MULTISELECT,
+            comparator: EQ
+          };
+
+          const result = filters(data, columns, _)(currFilters);
+          expect(result).toBeDefined();
+          expect(result).toHaveLength(2);
+        });
+      });
+
+      describe(`and comparator is ${LIKE}`, () => {
+        it('should return data correctly', () => {
+          currFilters.name = {
+            filterVal: ['name 3', '5'],
+            filterType: FILTER_TYPE.MULTISELECT,
+            comparator: LIKE
+          };
+
+          const result = filters(data, columns, _)(currFilters);
+          expect(result).toBeDefined();
+          expect(result).toHaveLength(3);
         });
       });
     });
   });
 
   describe('filterByNumber', () => {
-    beforeEach(() => {
-      filterFn = filters(store, columns, _);
-    });
-
     describe('when currFilters.filterVal.comparator is empty', () => {
       it('should returning correct result', () => {
         currFilters.price = {
@@ -131,11 +166,11 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        let result = filterFn(currFilters);
+        let result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(data.length);
 
         currFilters.price.filterVal.comparator = undefined;
-        result = filterFn(currFilters);
+        result = filters(result, columns, _)(currFilters);
         expect(result).toHaveLength(data.length);
       });
     });
@@ -147,7 +182,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(data.length);
       });
     });
@@ -159,11 +194,11 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        let result = filterFn(currFilters);
+        let result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(1);
 
         currFilters.price.filterVal.number = '0';
-        result = filterFn(currFilters);
+        result = filters(result, columns, _)(currFilters);
         expect(result).toHaveLength(0);
       });
     });
@@ -175,7 +210,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(16);
       });
     });
@@ -187,7 +222,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(17);
       });
     });
@@ -199,7 +234,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(3);
       });
     });
@@ -211,7 +246,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(4);
       });
     });
@@ -223,9 +258,46 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(19);
       });
     });
   });
+
+  describe('filterByDate', () => {
+    let filterFn;
+    beforeEach(() => {
+      filterFn = filters(data, columns, _);
+    });
+
+    describe('when currFilters.filterVal.comparator is empty', () => {
+      it('should returning correct result', () => {
+        currFilters.price = {
+          filterVal: { comparator: '', date: new Date() },
+          filterType: FILTER_TYPE.DATE
+        };
+
+        let result = filterFn(currFilters);
+        expect(result).toHaveLength(data.length);
+
+        currFilters.price.filterVal.comparator = undefined;
+        result = filterFn(currFilters);
+        expect(result).toHaveLength(data.length);
+      });
+    });
+
+    describe('when currFilters.filterVal.date is empty', () => {
+      it('should returning correct result', () => {
+        currFilters.price = {
+          filterVal: { comparator: EQ, date: '' },
+          filterType: FILTER_TYPE.DATE
+        };
+
+        const result = filterFn(currFilters);
+        expect(result).toHaveLength(data.length);
+      });
+    });
+
+    // TODO....
+  });
 });

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

@@ -1,252 +0,0 @@
-import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-
-import _ from 'react-bootstrap-table-next/src/utils';
-import remoteResolver from 'react-bootstrap-table-next/src/props-resolver/remote-resolver';
-import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
-import Store from 'react-bootstrap-table-next/src/store';
-import filter, { textFilter } from '..';
-import wrapperFactory from '../src/wrapper';
-import { FILTER_TYPE } from '../src/const';
-
-const data = [];
-for (let i = 0; i < 20; i += 1) {
-  data.push({
-    id: i,
-    name: `itme name ${i}`,
-    price: 200 + i
-  });
-}
-
-describe('Wrapper', () => {
-  let wrapper;
-  let instance;
-  const onTableChangeCB = sinon.stub();
-
-  afterEach(() => {
-    onTableChangeCB.reset();
-  });
-
-  const createTableProps = (props) => {
-    const tableProps = {
-      keyField: 'id',
-      columns: [{
-        dataField: 'id',
-        text: 'ID'
-      }, {
-        dataField: 'name',
-        text: 'Name',
-        filter: textFilter()
-      }, {
-        dataField: 'price',
-        text: 'Price',
-        filter: textFilter()
-      }],
-      data,
-      filter: filter(),
-      _,
-      store: new Store('id'),
-      onTableChange: onTableChangeCB,
-      ...props
-    };
-    tableProps.store.data = data;
-    return tableProps;
-  };
-
-  const FilterWrapper = wrapperFactory(BootstrapTable, {
-    _,
-    remoteResolver
-  });
-
-  const createFilterWrapper = (props, renderFragment = true) => {
-    wrapper = shallow(<FilterWrapper { ...props } />);
-    instance = wrapper.instance();
-    if (renderFragment) {
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
-    }
-  };
-
-  describe('default filter wrapper', () => {
-    const props = createTableProps();
-
-    beforeEach(() => {
-      createFilterWrapper(props);
-    });
-
-    it('should rendering correctly', () => {
-      expect(wrapper.length).toBe(1);
-    });
-
-    it('should initializing state correctly', () => {
-      expect(instance.state.isDataChanged).toBeFalsy();
-      expect(instance.state.currFilters).toEqual({});
-    });
-
-    it('should rendering BootstraTable correctly', () => {
-      const table = wrapper.find(BootstrapTable);
-      expect(table.length).toBe(1);
-      expect(table.prop('onFilter')).toBeDefined();
-      expect(table.prop('isDataChanged')).toEqual(instance.state.isDataChanged);
-    });
-  });
-
-  describe('componentWillReceiveProps', () => {
-    let nextProps;
-
-    describe('when props.store.filters is same as current state.currFilters', () => {
-      beforeEach(() => {
-        nextProps = createTableProps();
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should setting isDataChanged as false (Temporary solution)', () => {
-        expect(instance.state.isDataChanged).toBeFalsy();
-      });
-    });
-
-    describe('when props.isDataChanged is true', () => {
-      beforeEach(() => {
-        nextProps = createTableProps({ isDataChanged: true });
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should setting isDataChanged as true', () => {
-        expect(instance.state.isDataChanged).toBeTruthy();
-      });
-    });
-
-    describe('when props.store.filters is different from current state.currFilters', () => {
-      const nextData = [];
-
-      beforeEach(() => {
-        nextProps = createTableProps();
-        nextProps.store.filters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
-        nextProps.store.setAllData(nextData);
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should setting states correctly', () => {
-        expect(nextProps.store.filteredData).toEqual(nextData);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(instance.state.currFilters).toBe(nextProps.store.filters);
-      });
-    });
-
-    describe('when remote filter is enabled', () => {
-      let props;
-      const nextData = [];
-
-      beforeEach(() => {
-        props = createTableProps({ remote: { filter: true } });
-        createFilterWrapper(props);
-        nextProps = createTableProps({ remote: { filter: true } });
-        nextProps.store.setAllData(nextData);
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should setting states correctly', () => {
-        expect(nextProps.store.filteredData).toEqual(nextData);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(instance.state.currFilters).toBe(nextProps.store.filters);
-      });
-    });
-  });
-
-  describe('onFilter', () => {
-    let props;
-
-    beforeEach(() => {
-      props = createTableProps();
-      createFilterWrapper(props);
-    });
-
-    describe('when filterVal is empty or undefined', () => {
-      const filterVals = ['', undefined];
-
-      it('should setting store object correctly', () => {
-        filterVals.forEach((filterVal) => {
-          instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
-          expect(props.store.filtering).toBeFalsy();
-        });
-      });
-
-      it('should setting state correctly', () => {
-        filterVals.forEach((filterVal) => {
-          instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
-          expect(instance.state.isDataChanged).toBeTruthy();
-          expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
-        });
-      });
-    });
-
-    describe('when filterVal is existing', () => {
-      const filterVal = '3';
-
-      it('should setting store object correctly', () => {
-        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
-        expect(props.store.filters).toEqual(instance.state.currFilters);
-      });
-
-      it('should setting state correctly', () => {
-        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
-      });
-    });
-
-    describe('when remote filter is enabled', () => {
-      const filterVal = '3';
-
-      beforeEach(() => {
-        props = createTableProps();
-        props.remote = { filter: true };
-        createFilterWrapper(props);
-        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)(filterVal);
-      });
-
-      it('should not setting store object correctly', () => {
-        expect(props.store.filters).not.toEqual(instance.state.currFilters);
-      });
-
-      it('should not setting state', () => {
-        expect(instance.state.isDataChanged).toBeFalsy();
-        expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
-      });
-
-      it('should calling props.onRemoteFilterChange correctly', () => {
-        expect(onTableChangeCB.calledOnce).toBeTruthy();
-      });
-    });
-
-    describe('combination', () => {
-      it('should setting store object correctly', () => {
-        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('3');
-        expect(props.store.filters).toEqual(instance.state.currFilters);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
-
-        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('2');
-        expect(props.store.filters).toEqual(instance.state.currFilters);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
-
-        instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('2');
-        expect(props.store.filters).toEqual(instance.state.currFilters);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(Object.keys(instance.state.currFilters)).toHaveLength(2);
-
-        instance.onFilter(props.columns[2], FILTER_TYPE.TEXT)('');
-        expect(props.store.filters).toEqual(instance.state.currFilters);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(Object.keys(instance.state.currFilters)).toHaveLength(1);
-
-        instance.onFilter(props.columns[1], FILTER_TYPE.TEXT)('');
-        expect(props.store.filters).toEqual(instance.state.currFilters);
-        expect(instance.state.isDataChanged).toBeTruthy();
-        expect(Object.keys(instance.state.currFilters)).toHaveLength(0);
-      });
-    });
-  });
-});

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

@@ -1,16 +1,29 @@
 /* eslint no-return-assign: 0 */
 import React from 'react';
+import PropTypes from 'prop-types';
 import LoadingOverlay from 'react-loading-overlay';
 
-export default options => (element, loading) =>
+export default options => loading =>
   class TableLoadingOverlayWrapper extends React.Component {
+    static propTypes = {
+      children: PropTypes.element.isRequired
+    }
     componentDidMount() {
       if (loading) {
         const { wrapper } = this.overlay;
         const masker = wrapper.firstChild;
         const headerDOM = wrapper.parentElement.querySelector('thead');
         const bodyDOM = wrapper.parentElement.querySelector('tbody');
-        masker.style.marginTop = window.getComputedStyle(headerDOM).height;
+        const captionDOM = wrapper.parentElement.querySelector('caption');
+
+        let marginTop = window.getComputedStyle(headerDOM).height;
+        if (captionDOM) {
+          marginTop = parseFloat(marginTop.replace('px', ''));
+          marginTop += parseFloat(window.getComputedStyle(captionDOM).height.replace('px', ''));
+          marginTop = `${marginTop}px`;
+        }
+
+        masker.style.marginTop = marginTop;
         masker.style.height = window.getComputedStyle(bodyDOM).height;
       }
     }
@@ -22,7 +35,7 @@ export default options => (element, loading) =>
           { ...options }
           active={ loading }
         >
-          { element }
+          { this.props.children }
         </LoadingOverlay>
       );
     }

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-overlay",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "it's a loading overlay addons for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {
@@ -41,7 +41,7 @@
   },
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   }
 }

packages/react-bootstrap-table2-overlay/test/index.test.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import { shallow, render } from 'enzyme';
+import { render, shallow } from 'enzyme';
 import LoadingOverlay from 'react-loading-overlay';
 
-import overlayFactory from '..';
+import overlayFactory from '../index.js';
 
 describe('overlayFactory', () => {
   let wrapper;
-  // let instance;
 
   const createTable = () => (
     <table>
@@ -27,8 +26,8 @@ describe('overlayFactory', () => {
   describe('when loading is false', () => {
     beforeEach(() => {
       const tableElm = createTable();
-      const Overlay = overlayFactory()(tableElm, false);
-      wrapper = shallow(<Overlay />);
+      const Overlay = overlayFactory()(false);
+      wrapper = shallow(<Overlay>{ tableElm }</Overlay>);
     });
 
     it('should rendering Overlay component correctly', () => {
@@ -42,14 +41,12 @@ describe('overlayFactory', () => {
   describe('when loading is true', () => {
     beforeEach(() => {
       const tableElm = createTable();
-      const Overlay = overlayFactory()(tableElm, true);
-      wrapper = render(<Overlay />);
+      const Overlay = overlayFactory()(true);
+      wrapper = render(<Overlay>{ tableElm }</Overlay>);
     });
 
     it('should rendering Overlay component correctly', () => {
-      const overlay = wrapper.find(LoadingOverlay);
       expect(wrapper.length).toBe(1);
-      expect(overlay.length).toBe(0);
     });
   });
 
@@ -60,8 +57,8 @@ describe('overlayFactory', () => {
     };
     beforeEach(() => {
       const tableElm = createTable();
-      const Overlay = overlayFactory(options)(tableElm, false);
-      wrapper = shallow(<Overlay />);
+      const Overlay = overlayFactory(options)(false);
+      wrapper = shallow(<Overlay>{ tableElm }</Overlay>);
     });
 
     it('should rendering Overlay component with options correctly', () => {

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

@@ -1,6 +1,6 @@
-import wrapperFactory from './src/wrapper';
+import createContext from './src/context';
 
 export default (options = {}) => ({
-  wrapperFactory,
+  createContext,
   options
 });

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {
@@ -38,7 +38,7 @@
   ],
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   }
 }

packages/react-bootstrap-table2-paginator/src/bootstrap.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+// consider to have a common lib?1
+export const BootstrapContext = React.createContext({
+  bootstrap4: false
+});

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

@@ -3,6 +3,8 @@ export default {
   PAGE_START_INDEX: 1,
   With_FIRST_AND_LAST: true,
   SHOW_ALL_PAGE_BTNS: false,
+  SHOW_TOTAL: false,
+  PAGINATION_TOTAL: null,
   FIRST_PAGE_TEXT: '<<',
   PRE_PAGE_TEXT: '<',
   NEXT_PAGE_TEXT: '>',

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

@@ -0,0 +1,188 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+/* eslint no-lonely-if: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Const from './const';
+import { BootstrapContext } from './bootstrap';
+import Pagination from './pagination';
+import { getByCurrPage, alignPage } from './page';
+
+export default (
+  isRemotePagination,
+  handleRemotePageChange
+) => {
+  const PaginationContext = React.createContext();
+
+  class PaginationProvider extends React.Component {
+    static propTypes = {
+      data: PropTypes.array.isRequired
+    }
+
+    constructor(props) {
+      super(props);
+      this.handleChangePage = this.handleChangePage.bind(this);
+      this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+
+      let currPage;
+      let currSizePerPage;
+      const { options } = props.pagination;
+      const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
+
+      // initialize current page
+      if (typeof options.page !== 'undefined') {
+        currPage = options.page;
+      } else if (typeof options.pageStartIndex !== 'undefined') {
+        currPage = options.pageStartIndex;
+      } else {
+        currPage = Const.PAGE_START_INDEX;
+      }
+
+      // initialize current sizePerPage
+      if (typeof options.sizePerPage !== 'undefined') {
+        currSizePerPage = options.sizePerPage;
+      } else if (typeof sizePerPageList[0] === 'object') {
+        currSizePerPage = sizePerPageList[0].value;
+      } else {
+        currSizePerPage = sizePerPageList[0];
+      }
+
+      this.currPage = currPage;
+      this.currSizePerPage = currSizePerPage;
+    }
+
+    componentWillReceiveProps(nextProps) {
+      let needNewState = false;
+      let { currPage, currSizePerPage } = this;
+      const { page, sizePerPage, onPageChange } = nextProps.pagination.options;
+
+      const pageStartIndex = typeof nextProps.pagination.options.pageStartIndex !== 'undefined' ?
+        nextProps.pagination.options.pageStartIndex : Const.PAGE_START_INDEX;
+
+      if (typeof page !== 'undefined' && currPage !== page) { // user defined page
+        currPage = page;
+        needNewState = true;
+      } else {
+        // user should align the page when the page is not fit to the data size when remote enable
+        if (!isRemotePagination()) {
+          const newPage = alignPage(nextProps.data, currPage, currSizePerPage, pageStartIndex);
+          if (currPage !== newPage) {
+            currPage = newPage;
+            needNewState = true;
+          }
+        }
+      }
+
+      if (typeof sizePerPage !== 'undefined' && currSizePerPage !== sizePerPage) {
+        currSizePerPage = sizePerPage;
+        needNewState = true;
+      }
+
+      if (needNewState) {
+        if (onPageChange) {
+          onPageChange(currPage, currSizePerPage);
+        }
+        this.currPage = currPage;
+        this.currSizePerPage = currSizePerPage;
+      }
+    }
+
+    handleChangePage(currPage) {
+      const { currSizePerPage } = this;
+      const { pagination: { options } } = this.props;
+
+      if (options.onPageChange) {
+        options.onPageChange(currPage, currSizePerPage);
+      }
+
+      this.currPage = currPage;
+
+      if (isRemotePagination()) {
+        handleRemotePageChange(currPage, currSizePerPage);
+        return;
+      }
+      this.forceUpdate();
+    }
+
+    handleChangeSizePerPage(currSizePerPage, currPage) {
+      const { pagination: { options } } = this.props;
+
+      if (options.onSizePerPageChange) {
+        options.onSizePerPageChange(currSizePerPage, currPage);
+      }
+
+      this.currPage = currPage;
+      this.currSizePerPage = currSizePerPage;
+
+      if (isRemotePagination()) {
+        handleRemotePageChange(currPage, currSizePerPage);
+        return;
+      }
+      this.forceUpdate();
+    }
+
+    render() {
+      let { data } = this.props;
+      const { pagination: { options }, bootstrap4 } = this.props;
+      const { currPage, currSizePerPage } = this;
+      const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
+        Const.With_FIRST_AND_LAST : options.withFirstAndLast;
+      const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
+        Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
+      const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
+        Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
+      const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
+        Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
+      const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+        Const.PAGE_START_INDEX : options.pageStartIndex;
+
+      data = isRemotePagination() ?
+        data :
+        getByCurrPage(
+          data,
+          currPage,
+          currSizePerPage,
+          pageStartIndex
+        );
+
+      return (
+        <PaginationContext.Provider value={ { data } }>
+          { this.props.children }
+          <BootstrapContext.Provider value={ { bootstrap4 } }>
+            <Pagination
+              key="pagination"
+              dataSize={ options.totalSize || this.props.data.length }
+              currPage={ currPage }
+              currSizePerPage={ currSizePerPage }
+              onPageChange={ this.handleChangePage }
+              onSizePerPageChange={ this.handleChangeSizePerPage }
+              sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
+              paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
+              pageStartIndex={ pageStartIndex }
+              withFirstAndLast={ withFirstAndLast }
+              alwaysShowAllBtns={ alwaysShowAllBtns }
+              hideSizePerPage={ hideSizePerPage }
+              hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
+              showTotal={ options.showTotal }
+              paginationTotalRenderer={ options.paginationTotalRenderer }
+              firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
+              prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
+              nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
+              lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
+              prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
+              nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
+              firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
+              lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
+            />
+          </BootstrapContext.Provider>
+        </PaginationContext.Provider>
+      );
+    }
+  }
+
+  return {
+    Provider: PaginationProvider,
+    Consumer: PaginationContext.Consumer
+  };
+};

packages/react-bootstrap-table2-paginator/src/page.js

@@ -1,16 +1,52 @@
-export const getByCurrPage = (store, pageStartIndex) => {
-  const dataSize = store.data.length;
+const getNormalizedPage = (
+  page,
+  pageStartIndex
+) => {
+  const offset = Math.abs(1 - pageStartIndex);
+  return page + offset;
+};
+
+const endIndex = (
+  page,
+  sizePerPage,
+  pageStartIndex
+) => (getNormalizedPage(page, pageStartIndex) * sizePerPage) - 1;
+
+const startIndex = (
+  end,
+  sizePerPage,
+) => end - (sizePerPage - 1);
+
+export const alignPage = (
+  data,
+  page,
+  sizePerPage,
+  pageStartIndex
+) => {
+  const end = endIndex(page, sizePerPage, pageStartIndex);
+  const dataSize = data.length;
+
+  if (end - 1 > dataSize) {
+    return pageStartIndex;
+  }
+  return page;
+};
+
+export const getByCurrPage = (
+  data,
+  page,
+  sizePerPage,
+  pageStartIndex
+) => {
+  const dataSize = data.length;
   if (!dataSize) return [];
-  const getNormalizedPage = () => {
-    const offset = Math.abs(1 - pageStartIndex);
-    return store.page + offset;
-  };
-  const end = (getNormalizedPage() * store.sizePerPage) - 1;
-  const start = end - (store.sizePerPage - 1);
+
+  const end = endIndex(page, sizePerPage, pageStartIndex);
+  const start = startIndex(end, sizePerPage);
 
   const result = [];
   for (let i = start; i <= end; i += 1) {
-    result.push(store.data[i]);
+    result.push(data[i]);
     if (i + 1 === dataSize) break;
   }
   return result;

packages/react-bootstrap-table2-paginator/src/pagination-total.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const PaginationTotal = props => (
-  <span>
+  <span className="react-bootstrap-table-pagination-total">
     &nbsp;Showing rows { props.from } to&nbsp;{ props.to + 1 } of&nbsp;{ props.dataSize }
   </span>
 );

packages/react-bootstrap-table2-paginator/src/pagination.js

@@ -87,10 +87,28 @@ class Pagination extends pageResolver(Component) {
     }
   }
 
+  defaultTotal = (from, to, size) => (
+    <PaginationTotal
+      from={ from }
+      to={ to }
+      dataSize={ size }
+    />
+  );
+
+  setTotal = (from, to, size, total) => {
+    if (total && (typeof total === 'function')) {
+      return total(from, to, size);
+    }
+
+    return this.defaultTotal(from, to, size);
+  };
+
   render() {
     const { totalPages, lastPage, dropdownOpen: open } = this.state;
     const {
       showTotal,
+      dataSize,
+      paginationTotalRenderer,
       sizePerPageList,
       currSizePerPage,
       hideSizePerPage,
@@ -121,11 +139,12 @@ class Pagination extends pageResolver(Component) {
           }
           {
             showTotal ?
-              <PaginationTotal
-                from={ from }
-                to={ to }
-                dataSize={ this.props.dataSize }
-              /> : null
+              this.setTotal(
+                from,
+                to,
+                dataSize,
+                paginationTotalRenderer
+              ) : null
           }
         </div>
         <div className={ pageListClass }>
@@ -145,6 +164,8 @@ Pagination.propTypes = {
   onSizePerPageChange: PropTypes.func.isRequired,
   pageStartIndex: PropTypes.number,
   paginationSize: PropTypes.number,
+  showTotal: PropTypes.bool,
+  paginationTotalRenderer: PropTypes.func,
   firstPageText: PropTypes.string,
   prePageText: PropTypes.string,
   nextPageText: PropTypes.string,
@@ -164,6 +185,8 @@ Pagination.defaultProps = {
   paginationSize: Const.PAGINATION_SIZE,
   withFirstAndLast: Const.With_FIRST_AND_LAST,
   alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
+  showTotal: Const.SHOW_TOTAL,
+  paginationTotalRenderer: Const.PAGINATION_TOTAL,
   firstPageText: Const.FIRST_PAGE_TEXT,
   prePageText: Const.PRE_PAGE_TEXT,
   nextPageText: Const.NEXT_PAGE_TEXT,

packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import cs from 'classnames';
 import PropTypes from 'prop-types';
+import { BootstrapContext } from './bootstrap';
 import SizePerPageOption from './size-per-page-option';
 
 const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
@@ -20,44 +21,60 @@ const SizePerPageDropDown = (props) => {
   } = props;
 
   const dropDownStyle = { visibility: hidden ? 'hidden' : 'visible' };
+  const openClass = open ? 'open show' : '';
   const dropdownClasses = cs(
-    open ? 'open show' : '',
+    openClass,
     sizePerPageDefaultClass,
     variation,
     className,
   );
 
   return (
-    <span
-      style={ dropDownStyle }
-      className={ dropdownClasses }
-    >
-      <button
-        id="pageDropDown"
-        className={ `btn ${btnContextual} dropdown-toggle` }
-        data-toggle="dropdown"
-        aria-expanded={ open }
-        onClick={ onClick }
-        onBlur={ onBlur }
-      >
-        { currSizePerPage }
-        <span>
-          { ' ' }
-          <span className="caret" />
-        </span>
-      </button>
-      <ul className="dropdown-menu" role="menu" aria-labelledby="pageDropDown">
-        {
-          options.map(option => (
-            <SizePerPageOption
-              { ...option }
-              key={ option.text }
-              onSizePerPageChange={ onSizePerPageChange }
-            />
-          ))
-        }
-      </ul>
-    </span>
+    <BootstrapContext.Consumer>
+      {
+        ({ bootstrap4 }) => (
+          <span
+            style={ dropDownStyle }
+            className={ dropdownClasses }
+          >
+            <button
+              id="pageDropDown"
+              className={ `btn ${btnContextual} dropdown-toggle` }
+              data-toggle="dropdown"
+              aria-expanded={ open }
+              onClick={ onClick }
+              onBlur={ onBlur }
+            >
+              { currSizePerPage }
+              { ' ' }
+              {
+                bootstrap4 ? null : (
+                  <span>
+                    <span className="caret" />
+                  </span>
+                )
+              }
+            </button>
+            <ul
+              className={ `dropdown-menu ${openClass}` }
+              role="menu"
+              aria-labelledby="pageDropDown"
+            >
+              {
+                options.map(option => (
+                  <SizePerPageOption
+                    { ...option }
+                    key={ option.text }
+                    bootstrap4={ bootstrap4 }
+                    onSizePerPageChange={ onSizePerPageChange }
+                  />
+                ))
+              }
+            </ul>
+          </span>
+        )
+      }
+    </BootstrapContext.Consumer>
   );
 };
 

packages/react-bootstrap-table2-paginator/src/size-per-page-option.js

@@ -5,9 +5,28 @@ import PropTypes from 'prop-types';
 const SizePerPageOption = ({
   text,
   page,
-  onSizePerPageChange
-}) => (
-  <li key={ text } role="presentation" className="dropdown-item">
+  onSizePerPageChange,
+  bootstrap4
+}) => (bootstrap4 ? (
+  <a
+    href="#"
+    tabIndex="-1"
+    role="menuitem"
+    className="dropdown-item"
+    data-page={ page }
+    onMouseDown={ (e) => {
+      e.preventDefault();
+      onSizePerPageChange(page);
+    } }
+  >
+    { text }
+  </a>
+) : (
+  <li
+    key={ text }
+    role="presentation"
+    className="dropdown-item"
+  >
     <a
       href="#"
       tabIndex="-1"
@@ -21,12 +40,17 @@ const SizePerPageOption = ({
       { text }
     </a>
   </li>
-);
+));
 
 SizePerPageOption.propTypes = {
   text: PropTypes.string.isRequired,
   page: PropTypes.number.isRequired,
-  onSizePerPageChange: PropTypes.func.isRequired
+  onSizePerPageChange: PropTypes.func.isRequired,
+  bootstrap4: PropTypes.bool
+};
+
+SizePerPageOption.defaultProps = {
+  bootstrap4: false
 };
 
 export default SizePerPageOption;

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

@@ -1,160 +0,0 @@
-/* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import Const from './const';
-import Pagination from './pagination';
-import { getByCurrPage } from './page';
-
-export default (Base, {
-  remoteResolver
-}) =>
-  class PaginationWrapper extends remoteResolver(Component) {
-    static propTypes = {
-      store: PropTypes.object.isRequired
-    }
-
-    constructor(props) {
-      super(props);
-      this.handleChangePage = this.handleChangePage.bind(this);
-      this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
-
-      let currPage;
-      let currSizePerPage;
-      const { options } = props.pagination;
-      const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
-
-      // initialize current page
-      if (typeof options.page !== 'undefined') {
-        currPage = options.page;
-      } else if (typeof options.pageStartIndex !== 'undefined') {
-        currPage = options.pageStartIndex;
-      } else {
-        currPage = Const.PAGE_START_INDEX;
-      }
-
-      // initialize current sizePerPage
-      if (typeof options.sizePerPage !== 'undefined') {
-        currSizePerPage = options.sizePerPage;
-      } else if (typeof sizePerPageList[0] === 'object') {
-        currSizePerPage = sizePerPageList[0].value;
-      } else {
-        currSizePerPage = sizePerPageList[0];
-      }
-
-      this.state = { currPage, currSizePerPage };
-      this.saveToStore(currPage, currSizePerPage);
-    }
-
-    componentWillReceiveProps(nextProps) {
-      let needNewState = false;
-      let { currPage, currSizePerPage } = this.state;
-      const { page, sizePerPage, pageStartIndex, onPageChange } = nextProps.pagination.options;
-
-      if (typeof page !== 'undefined' && currPage !== page) { // user defined page
-        currPage = page;
-        needNewState = true;
-      } else if (nextProps.isDataChanged) { // user didn't defined page but data change
-        currPage = typeof pageStartIndex !== 'undefined' ? pageStartIndex : Const.PAGE_START_INDEX;
-        needNewState = true;
-      }
-
-      if (typeof sizePerPage !== 'undefined') {
-        currSizePerPage = sizePerPage;
-        needNewState = true;
-      }
-
-      this.saveToStore(currPage, currSizePerPage);
-
-      if (needNewState) {
-        if (onPageChange) {
-          onPageChange(currPage, currSizePerPage);
-        }
-        this.setState(() => ({ currPage, currSizePerPage }));
-      }
-    }
-
-    saveToStore(page, sizePerPage) {
-      this.props.store.page = page;
-      this.props.store.sizePerPage = sizePerPage;
-    }
-
-    handleChangePage(currPage) {
-      const { currSizePerPage } = this.state;
-      const { pagination: { options } } = this.props;
-      this.saveToStore(currPage, currSizePerPage);
-
-      if (options.onPageChange) {
-        options.onPageChange(currPage, currSizePerPage);
-      }
-      if (this.isRemotePagination()) {
-        this.handleRemotePageChange();
-        return;
-      }
-      this.setState(() => ({ currPage }));
-    }
-
-    handleChangeSizePerPage(currSizePerPage, currPage) {
-      const { pagination: { options } } = this.props;
-      this.saveToStore(currPage, currSizePerPage);
-
-      if (options.onSizePerPageChange) {
-        options.onSizePerPageChange(currSizePerPage, currPage);
-      }
-      if (this.isRemotePagination()) {
-        this.handleRemotePageChange();
-        return;
-      }
-      this.setState(() => ({
-        currPage,
-        currSizePerPage
-      }));
-    }
-
-    render() {
-      const { pagination: { options }, store } = this.props;
-      const { currPage, currSizePerPage } = this.state;
-      const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
-        Const.With_FIRST_AND_LAST : options.withFirstAndLast;
-      const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
-        Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
-      const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
-        Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
-      const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
-        Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
-      const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
-        Const.PAGE_START_INDEX : options.pageStartIndex;
-
-      const data = this.isRemotePagination() ?
-        this.props.data :
-        getByCurrPage(store, pageStartIndex);
-
-      return [
-        <Base key="table" { ...this.props } data={ data } />,
-        <Pagination
-          key="pagination"
-          dataSize={ options.totalSize || store.data.length }
-          currPage={ currPage }
-          currSizePerPage={ currSizePerPage }
-          onPageChange={ this.handleChangePage }
-          onSizePerPageChange={ this.handleChangeSizePerPage }
-          sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
-          paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
-          pageStartIndex={ pageStartIndex }
-          withFirstAndLast={ withFirstAndLast }
-          alwaysShowAllBtns={ alwaysShowAllBtns }
-          hideSizePerPage={ hideSizePerPage }
-          hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
-          showTotal={ options.showTotal }
-          firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
-          prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
-          nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
-          lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
-          prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
-          nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
-          firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
-          lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
-        />
-      ];
-    }
-  };

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

@@ -0,0 +1,773 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
+
+import Pagination from '../src/pagination';
+import Const from '../src/const';
+import createPaginationContext from '../src/context';
+import paginationFactory from '../index';
+
+const data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({
+    id: i,
+    name: `itme name ${i}`
+  });
+}
+
+describe('PaginationContext', () => {
+  let wrapper;
+  let PaginationContext;
+
+  const columns = [{
+    dataField: 'id',
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
+
+  const defaultPagination = { options: {} };
+
+  const mockBase = jest.fn((props => (
+    <BootstrapTable
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      { ...props }
+    />
+  )));
+
+  const handleRemotePaginationChange = jest.fn();
+
+  function shallowContext(
+    customPagination = defaultPagination,
+    enableRemote = false
+  ) {
+    mockBase.mockReset();
+    handleRemotePaginationChange.mockReset();
+    PaginationContext = createPaginationContext(
+      jest.fn().mockReturnValue(enableRemote),
+      handleRemotePaginationChange
+    );
+
+    return (
+      <PaginationContext.Provider
+        pagination={ paginationFactory(customPagination) }
+        columns={ columns }
+        data={ data }
+      >
+        <PaginationContext.Consumer>
+          {
+            paginationProps => mockBase(paginationProps)
+          }
+        </PaginationContext.Consumer>
+      </PaginationContext.Provider>
+    );
+  }
+
+  describe('default render', () => {
+    beforeEach(() => {
+      wrapper = shallow(shallowContext());
+      wrapper.render();
+    });
+
+    it('should have correct Provider property after calling createPaginationContext', () => {
+      expect(PaginationContext.Provider).toBeDefined();
+    });
+
+    it('should have correct Consumer property after calling createPaginationContext', () => {
+      expect(PaginationContext.Consumer).toBeDefined();
+    });
+
+    it('should have correct currPage', () => {
+      expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
+    });
+
+    it('should have correct currSizePerPage', () => {
+      expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
+    });
+
+    it('should render Pagination component correctly', () => {
+      expect(wrapper.length).toBe(1);
+      const instance = wrapper.instance();
+      const pagination = wrapper.find(Pagination);
+      expect(pagination).toHaveLength(1);
+      expect(pagination.prop('dataSize')).toEqual(data.length);
+      expect(pagination.prop('currPage')).toEqual(instance.currPage);
+      expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage);
+      expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
+      expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
+      expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
+      expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
+      expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
+      expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
+      expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
+      expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
+      expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
+      expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
+      expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
+      expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
+      expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
+      expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
+      expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
+      expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+      expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+      expect(pagination.prop('paginationTotalRenderer')).toBeNull();
+    });
+
+    it('should pass correct cell editing props to children element', () => {
+      expect(mockBase.mock.calls[0][0].data).toHaveLength(Const.SIZE_PER_PAGE_LIST[0]);
+    });
+  });
+
+  describe('componentWillReceiveProps', () => {
+    let instance;
+    let nextProps;
+
+    describe('when nextProps.pagination.options.page is existing', () => {
+      const onPageChange = jest.fn();
+      afterEach(() => {
+        onPageChange.mockReset();
+      });
+
+      describe('and if it is different with currPage', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext());
+          instance = wrapper.instance();
+          wrapper.render();
+          nextProps = {
+            data,
+            pagination: {
+              options: {
+                page: 2,
+                onPageChange
+              }
+            }
+          };
+          instance.componentWillReceiveProps(nextProps);
+        });
+
+        it('should call options.onPageChange', () => {
+          expect(onPageChange).toHaveBeenCalledTimes(1);
+          expect(onPageChange).toHaveBeenCalledWith(
+            instance.currPage,
+            instance.currSizePerPage
+          );
+        });
+
+        it('should set correct currPage', () => {
+          expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+        });
+      });
+
+      describe('and if it is same as currPage', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext());
+          instance = wrapper.instance();
+          wrapper.render();
+          nextProps = {
+            data,
+            pagination: {
+              options: {
+                page: 1,
+                onPageChange
+              }
+            }
+          };
+          instance.componentWillReceiveProps(nextProps);
+        });
+
+        it('shouldn\'t call options.onPageChange', () => {
+          expect(onPageChange).toHaveBeenCalledTimes(0);
+        });
+
+        it('should have correct currPage', () => {
+          expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+        });
+      });
+    });
+
+    describe('when nextProps.pagination.options.page is not existing', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          page: 3
+        }));
+        instance = wrapper.instance();
+        wrapper.render();
+        nextProps = { data, pagination: defaultPagination };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should not set currPage', () => {
+        expect(instance.currPage).toEqual(3);
+      });
+    });
+
+    describe('when nextProps.pagination.options.sizePerPage is existing', () => {
+      const onPageChange = jest.fn();
+      afterEach(() => {
+        onPageChange.mockReset();
+      });
+
+      describe('and if it is different with currSizePerPage', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext());
+          instance = wrapper.instance();
+          wrapper.render();
+          nextProps = {
+            data,
+            pagination: {
+              options: {
+                sizePerPage: Const.SIZE_PER_PAGE_LIST[2],
+                onPageChange
+              }
+            }
+          };
+          instance.componentWillReceiveProps(nextProps);
+        });
+
+        it('should call options.onPageChange', () => {
+          expect(onPageChange).toHaveBeenCalledTimes(1);
+          expect(onPageChange).toHaveBeenCalledWith(
+            instance.currPage,
+            instance.currSizePerPage
+          );
+        });
+
+        it('should set correct currSizePerPage', () => {
+          expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+        });
+      });
+
+      describe('and if it is same as currSizePerPage', () => {
+        beforeEach(() => {
+          wrapper = shallow(shallowContext());
+          instance = wrapper.instance();
+          wrapper.render();
+          nextProps = {
+            data,
+            pagination: {
+              options: {
+                sizePerPage: Const.SIZE_PER_PAGE_LIST[0],
+                onPageChange
+              }
+            }
+          };
+          instance.componentWillReceiveProps(nextProps);
+        });
+
+        it('shouldn\'t  call options.onPageChange', () => {
+          expect(onPageChange).toHaveBeenCalledTimes(0);
+        });
+
+        it('should have correct currSizePerPage', () => {
+          expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+        });
+      });
+    });
+
+    describe('when nextProps.pagination.options.sizePerPage is not existing', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          sizePerPage: Const.SIZE_PER_PAGE_LIST[2]
+        }));
+        instance = wrapper.instance();
+        wrapper.render();
+        nextProps = { data, pagination: defaultPagination };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should not set currPage', () => {
+        expect(instance.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[2]);
+      });
+    });
+  });
+
+  describe('handleChangePage', () => {
+    let instance;
+    const newPage = 3;
+
+    describe('should update component correctly', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        instance = wrapper.instance();
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangePage(newPage);
+      });
+
+      it('', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if options.onPageChange is defined', () => {
+      const onPageChange = jest.fn();
+      beforeEach(() => {
+        onPageChange.mockClear();
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          onPageChange
+        }));
+        instance = wrapper.instance();
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangePage(newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call options.onPageChange correctly', () => {
+        expect(onPageChange).toHaveBeenCalledTimes(1);
+        expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage);
+      });
+    });
+
+    describe('if remote pagination is enable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination
+        }, true));
+        instance = wrapper.instance();
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangePage(newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
+      });
+
+      it('should call handleRemotePageChange correctly', () => {
+        expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
+        expect(handleRemotePaginationChange)
+          .toHaveBeenCalledWith(newPage, instance.currSizePerPage);
+      });
+    });
+  });
+
+  describe('handleChangeSizePerPage', () => {
+    let instance;
+    const newPage = 2;
+    const newSizePerPage = 15;
+
+    describe('should update component correctly', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext());
+        instance = wrapper.instance();
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangeSizePerPage(newSizePerPage, newPage);
+      });
+
+      it('', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.currSizePerPage).toEqual(newSizePerPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if options.onSizePerPageChange is defined', () => {
+      const onSizePerPageChange = jest.fn();
+      beforeEach(() => {
+        onSizePerPageChange.mockClear();
+        wrapper = shallow(shallowContext({
+          ...defaultPagination,
+          onSizePerPageChange
+        }));
+        instance = wrapper.instance();
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangeSizePerPage(newSizePerPage, newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.currSizePerPage).toEqual(newSizePerPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call options.onSizePerPageChange correctly', () => {
+        expect(onSizePerPageChange).toHaveBeenCalledTimes(1);
+        expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage);
+      });
+    });
+
+    describe('if remote pagination is enable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultPagination
+        }, true));
+        instance = wrapper.instance();
+        jest.spyOn(instance, 'forceUpdate');
+        instance.handleChangeSizePerPage(newSizePerPage, newPage);
+      });
+
+      it('should still update component correctly', () => {
+        expect(instance.currPage).toEqual(newPage);
+        expect(instance.currSizePerPage).toEqual(newSizePerPage);
+        expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
+      });
+
+      it('should call handleRemotePageChange correctly', () => {
+        expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
+        expect(handleRemotePaginationChange)
+          .toHaveBeenCalledWith(newPage, newSizePerPage);
+      });
+    });
+  });
+
+  describe('when options.page is defined', () => {
+    const page = 3;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        page
+      }));
+      wrapper.render();
+    });
+
+    it('should set correct currPage', () => {
+      expect(wrapper.instance().currPage).toEqual(page);
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('currPage')).toEqual(page);
+    });
+  });
+
+  describe('when options.sizePerPage is defined', () => {
+    const sizePerPage = Const.SIZE_PER_PAGE_LIST[2];
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        sizePerPage
+      }));
+      wrapper.render();
+    });
+
+    it('should set correct currSizePerPage', () => {
+      expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage);
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
+    });
+  });
+
+  describe('when options.totalSize is defined', () => {
+    const totalSize = 100;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        totalSize
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('dataSize')).toEqual(totalSize);
+    });
+  });
+
+  describe('when options.showTotal is defined', () => {
+    const showTotal = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        showTotal
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('showTotal')).toEqual(showTotal);
+    });
+  });
+
+  describe('when options.pageStartIndex is defined', () => {
+    const pageStartIndex = -1;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        pageStartIndex
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
+    });
+  });
+
+  describe('when options.sizePerPageList is defined', () => {
+    const sizePerPageList = [10, 40];
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        sizePerPageList
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
+    });
+  });
+
+  describe('when options.paginationSize is defined', () => {
+    const paginationSize = 10;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        paginationSize
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('paginationSize')).toEqual(paginationSize);
+    });
+  });
+
+  describe('when options.withFirstAndLast is defined', () => {
+    const withFirstAndLast = false;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        withFirstAndLast
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
+    });
+  });
+
+  describe('when options.alwaysShowAllBtns is defined', () => {
+    const alwaysShowAllBtns = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        alwaysShowAllBtns
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
+    });
+  });
+
+  describe('when options.firstPageText is defined', () => {
+    const firstPageText = '1st';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        firstPageText
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('firstPageText')).toEqual(firstPageText);
+    });
+  });
+
+  describe('when options.prePageText is defined', () => {
+    const prePageText = 'PRE';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        prePageText
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('prePageText')).toEqual(prePageText);
+    });
+  });
+
+  describe('when options.nextPageText is defined', () => {
+    const nextPageText = 'NEXT';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        nextPageText
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('nextPageText')).toEqual(nextPageText);
+    });
+  });
+
+  describe('when options.lastPageText is defined', () => {
+    const lastPageText = 'LAST';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        lastPageText
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('lastPageText')).toEqual(lastPageText);
+    });
+  });
+
+  describe('when options.firstPageTitle is defined', () => {
+    const firstPageTitle = '1st';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        firstPageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
+    });
+  });
+
+  describe('when options.prePageTitle is defined', () => {
+    const prePageTitle = 'PRE';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        prePageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
+    });
+  });
+
+  describe('when options.nextPageTitle is defined', () => {
+    const nextPageTitle = 'NEXT';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        nextPageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
+    });
+  });
+
+  describe('when options.lastPageTitle is defined', () => {
+    const lastPageTitle = 'nth';
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        lastPageTitle
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
+    });
+  });
+
+  describe('when options.hideSizePerPage is defined', () => {
+    const hideSizePerPage = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        hideSizePerPage
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
+    });
+  });
+
+  describe('when options.hidePageListOnlyOnePage is defined', () => {
+    const hidePageListOnlyOnePage = true;
+
+    beforeEach(() => {
+      wrapper = shallow(shallowContext({
+        ...defaultPagination,
+        hidePageListOnlyOnePage
+      }));
+      wrapper.render();
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
+    });
+  });
+});

packages/react-bootstrap-table2-paginator/test/page.test.js

@@ -1,9 +1,8 @@
-import Store from 'react-bootstrap-table-next/src/store';
-import { getByCurrPage } from '../src/page';
+
+import { getByCurrPage, alignPage } from '../src/page';
 
 describe('Page Functions', () => {
   let data;
-  let store;
   const params = [
     // [page, sizePerPage, pageStartIndex]
     [1, 10, 1],
@@ -23,29 +22,54 @@ describe('Page Functions', () => {
       for (let i = 0; i < 100; i += 1) {
         data.push({ id: i, name: `test_name${i}` });
       }
-      store = new Store('id');
-      store.data = data;
     });
 
     it('should always return correct data', () => {
       params.forEach(([page, sizePerPage, pageStartIndex]) => {
-        store.page = page;
-        store.sizePerPage = sizePerPage;
-        const rows = getByCurrPage(store, pageStartIndex);
+        const rows = getByCurrPage(data, page, sizePerPage, pageStartIndex);
         expect(rows).toBeDefined();
         expect(Array.isArray(rows)).toBeTruthy();
         expect(rows.every(row => !!row)).toBeTruthy();
       });
     });
 
-    it('should return empty array when store.data is empty', () => {
-      store.data = [];
+    it('should return empty array when data is empty', () => {
+      data = [];
       params.forEach(([page, sizePerPage, pageStartIndex]) => {
-        store.page = page;
-        store.sizePerPage = sizePerPage;
-        const rows = getByCurrPage(store, pageStartIndex);
+        const rows = getByCurrPage(data, page, sizePerPage, pageStartIndex);
         expect(rows).toHaveLength(0);
       });
     });
   });
+
+  describe('alignPage', () => {
+    const pageStartIndex = 1;
+    const sizePerPage = 10;
+    const page = 2;
+    describe('if the length of store.data is less than the end page index', () => {
+      beforeEach(() => {
+        data = [];
+        for (let i = 0; i < 15; i += 1) {
+          data.push({ id: i, name: `test_name${i}` });
+        }
+      });
+
+      it('should return pageStartIndex argument', () => {
+        expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
+      });
+    });
+
+    describe('if the length of store.data is large than the end page index', () => {
+      beforeEach(() => {
+        data = [];
+        for (let i = 0; i < 30; i += 1) {
+          data.push({ id: i, name: `test_name${i}` });
+        }
+      });
+
+      it('should return current page', () => {
+        expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(page);
+      });
+    });
+  });
 });

packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js

@@ -5,6 +5,12 @@ import { shallow } from 'enzyme';
 import SizePerPageOption from '../src/size-per-page-option';
 import SizePerPageDropDown from '../src/size-per-page-dropdown';
 
+const shallowWithContext = (elem, context = {}) => {
+  const wrapper = shallow(elem);
+  const Children = wrapper.props().children(context);
+  return shallow(Children);
+};
+
 describe('SizePerPageDropDown', () => {
   let wrapper;
   const currSizePerPage = '25';
@@ -28,8 +34,9 @@ describe('SizePerPageDropDown', () => {
 
   describe('default SizePerPageDropDown component', () => {
     beforeEach(() => {
-      wrapper = shallow(
-        <SizePerPageDropDown { ...props } />
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } />,
+        { bootstrap4: false }
       );
     });
 
@@ -47,6 +54,7 @@ describe('SizePerPageDropDown', () => {
         const option = options[i];
         expect(sizePerPage.prop('text')).toEqual(option.text);
         expect(sizePerPage.prop('page')).toEqual(option.page);
+        expect(sizePerPage.prop('bootstrap4')).toBeFalsy();
         expect(sizePerPage.prop('onSizePerPageChange')).toEqual(onSizePerPageChange);
       });
     });
@@ -61,10 +69,52 @@ describe('SizePerPageDropDown', () => {
     });
   });
 
+  describe('when bootstrap4 context is true', () => {
+    beforeEach(() => {
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } />,
+        { bootstrap4: true }
+      );
+    });
+
+    it('should rendering SizePerPageDropDown correctly', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('button').length).toBe(1);
+      expect(wrapper.find('button').text()).toEqual(`${currSizePerPage} `);
+    });
+
+    it('should rendering SizePerPageOption successfully', () => {
+      expect(wrapper.find('ul.dropdown-menu').length).toBe(1);
+      const sizePerPageOptions = wrapper.find(SizePerPageOption);
+      expect(sizePerPageOptions.length).toBe(options.length);
+      sizePerPageOptions.forEach((sizePerPage, i) => {
+        const option = options[i];
+        expect(sizePerPage.prop('text')).toEqual(option.text);
+        expect(sizePerPage.prop('page')).toEqual(option.page);
+        expect(sizePerPage.prop('bootstrap4')).toBeTruthy();
+        expect(sizePerPage.prop('onSizePerPageChange')).toEqual(onSizePerPageChange);
+      });
+    });
+
+    it('no need to render caret', () => {
+      expect(wrapper.find('.caret')).toHaveLength(0);
+    });
+
+    it('default variation is dropdown', () => {
+      expect(wrapper.hasClass('dropdown')).toBeTruthy();
+    });
+
+    it('default dropdown is not open', () => {
+      expect(wrapper.hasClass('open show')).toBeFalsy();
+      expect(wrapper.find('[aria-expanded=false]').length).toBe(1);
+    });
+  });
+
   describe('when open prop is true', () => {
     beforeEach(() => {
-      wrapper = shallow(
-        <SizePerPageDropDown { ...props } open />
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } open />,
+        { bootstrap4: false }
       );
     });
 
@@ -76,8 +126,9 @@ describe('SizePerPageDropDown', () => {
 
   describe('when hidden prop is true', () => {
     beforeEach(() => {
-      wrapper = shallow(
-        <SizePerPageDropDown { ...props } hidden />
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } hidden />,
+        { bootstrap4: false }
       );
     });
 
@@ -89,8 +140,9 @@ describe('SizePerPageDropDown', () => {
   describe('when btnContextual prop is defined', () => {
     const contextual = 'btn-warning';
     beforeEach(() => {
-      wrapper = shallow(
-        <SizePerPageDropDown { ...props } btnContextual={ contextual } />
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } btnContextual={ contextual } />,
+        { bootstrap4: false }
       );
     });
 
@@ -102,8 +154,9 @@ describe('SizePerPageDropDown', () => {
   describe('when variation prop is defined', () => {
     const variation = 'dropup';
     beforeEach(() => {
-      wrapper = shallow(
-        <SizePerPageDropDown { ...props } variation={ variation } />
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } variation={ variation } />,
+        { bootstrap4: false }
       );
     });
 
@@ -115,8 +168,9 @@ describe('SizePerPageDropDown', () => {
   describe('when className prop is defined', () => {
     const className = 'custom-class';
     beforeEach(() => {
-      wrapper = shallow(
-        <SizePerPageDropDown { ...props } className={ className } />
+      wrapper = shallowWithContext(
+        <SizePerPageDropDown { ...props } className={ className } />,
+        { bootstrap4: false }
       );
     });
 

packages/react-bootstrap-table2-paginator/test/size-per-page-option.test.js

@@ -11,29 +11,64 @@ describe('SizePerPageOption', () => {
   const onSizePerPageChange = sinon.stub();
 
   beforeEach(() => {
-    const props = { text, page, onSizePerPageChange };
-    wrapper = shallow(
-      <SizePerPageOption { ...props } />
-    );
+    onSizePerPageChange.reset();
   });
 
-  it('should render SizePerPageOption correctly', () => {
-    expect(wrapper.length).toBe(1);
-    expect(wrapper.find('.dropdown-item').length).toBe(1);
-    expect(wrapper.find(`[data-page=${page}]`).length).toBe(1);
-    expect(wrapper.text()).toEqual(text);
-  });
-
-  describe('when MouseDown event happen', () => {
-    const preventDefault = sinon.stub();
+  describe('when bootstrap4 prop is true', () => {
     beforeEach(() => {
-      wrapper.find('a').simulate('mousedown', { preventDefault });
+      const props = { text, page, onSizePerPageChange };
+      wrapper = shallow(
+        <SizePerPageOption { ...props } />
+      );
     });
 
-    it('should calling props.onSizePerPageChange correctly', () => {
-      expect(preventDefault.calledOnce).toBeTruthy();
-      expect(onSizePerPageChange.calledOnce).toBeTruthy();
-      expect(onSizePerPageChange.calledWith(page)).toBeTruthy();
+    it('should render SizePerPageOption correctly', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('li.dropdown-item').length).toBe(1);
+      expect(wrapper.find(`[data-page=${page}]`).length).toBe(1);
+      expect(wrapper.text()).toEqual(text);
+    });
+
+    describe('when MouseDown event happen', () => {
+      const preventDefault = sinon.stub();
+      beforeEach(() => {
+        wrapper.find('a').simulate('mousedown', { preventDefault });
+      });
+
+      it('should calling props.onSizePerPageChange correctly', () => {
+        expect(preventDefault.calledOnce).toBeTruthy();
+        expect(onSizePerPageChange.calledOnce).toBeTruthy();
+        expect(onSizePerPageChange.calledWith(page)).toBeTruthy();
+      });
+    });
+  });
+
+  describe('when bootstrap4 prop is true', () => {
+    beforeEach(() => {
+      const props = { text, page, onSizePerPageChange };
+      wrapper = shallow(
+        <SizePerPageOption { ...props } bootstrap4 />
+      );
+    });
+
+    it('should render SizePerPageOption correctly', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('a.dropdown-item').length).toBe(1);
+      expect(wrapper.find(`[data-page=${page}]`).length).toBe(1);
+      expect(wrapper.text()).toEqual(text);
+    });
+
+    describe('when MouseDown event happen', () => {
+      const preventDefault = sinon.stub();
+      beforeEach(() => {
+        wrapper.find('a').simulate('mousedown', { preventDefault });
+      });
+
+      it('should calling props.onSizePerPageChange correctly', () => {
+        expect(preventDefault.calledOnce).toBeTruthy();
+        expect(onSizePerPageChange.calledOnce).toBeTruthy();
+        expect(onSizePerPageChange.calledWith(page)).toBeTruthy();
+      });
     });
   });
 });

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

@@ -1,586 +0,0 @@
-import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-
-
-import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
-import remoteResolver from 'react-bootstrap-table-next/src/props-resolver/remote-resolver';
-import Store from 'react-bootstrap-table-next/src/store';
-import paginator from '..';
-import wrapperFactory from '../src/wrapper';
-import Pagination from '../src/pagination';
-import Const from '../src/const';
-
-const data = [];
-for (let i = 0; i < 100; i += 1) {
-  data.push({
-    id: i,
-    name: `itme name ${i}`
-  });
-}
-
-describe('Wrapper', () => {
-  let wrapper;
-  let instance;
-  const onTableChangeCB = sinon.stub();
-
-  afterEach(() => {
-    onTableChangeCB.reset();
-  });
-
-  const createTableProps = (props = {}) => {
-    const tableProps = {
-      keyField: 'id',
-      columns: [{
-        dataField: 'id',
-        text: 'ID'
-      }, {
-        dataField: 'name',
-        text: 'Name'
-      }],
-      data,
-      pagination: paginator(props.options),
-      store: new Store('id'),
-      onTableChange: onTableChangeCB
-    };
-    tableProps.store.data = data;
-    return tableProps;
-  };
-
-  const PaginationWrapper = wrapperFactory(BootstrapTable, {
-    remoteResolver
-  });
-
-  const createPaginationWrapper = (props, renderFragment = true) => {
-    wrapper = shallow(<PaginationWrapper { ...props } />);
-    instance = wrapper.instance();
-    if (renderFragment) {
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
-    }
-  };
-
-  describe('default pagination', () => {
-    const props = createTableProps();
-
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering correctly', () => {
-      expect(wrapper.length).toBe(1);
-    });
-
-    it('should initializing state correctly', () => {
-      expect(instance.state.currPage).toBeDefined();
-      expect(instance.state.currPage).toEqual(Const.PAGE_START_INDEX);
-      expect(instance.state.currSizePerPage).toBeDefined();
-      expect(instance.state.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
-    });
-
-    it('should saving page and sizePerPage to store correctly', () => {
-      expect(props.store.page).toBe(instance.state.currPage);
-      expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
-    });
-
-    it('should rendering BootstraTable correctly', () => {
-      const table = wrapper.find(BootstrapTable);
-      expect(table.length).toBe(1);
-      expect(table.prop('data').length).toEqual(instance.state.currSizePerPage);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('dataSize')).toEqual(props.store.data.length);
-      expect(pagination.prop('currPage')).toEqual(instance.state.currPage);
-      expect(pagination.prop('currSizePerPage')).toEqual(instance.state.currSizePerPage);
-      expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
-      expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
-      expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
-      expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
-      expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
-      expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
-      expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
-      expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
-      expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
-      expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
-      expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
-      expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
-      expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
-      expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
-      expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
-      expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
-      expect(pagination.prop('showTotal')).toEqual(undefined);
-    });
-
-    describe('componentWillReceiveProps', () => {
-      let nextProps;
-      beforeEach(() => {
-        nextProps = createTableProps();
-      });
-
-      describe('when options.page is existing', () => {
-        beforeEach(() => {
-          nextProps.pagination.options.page = 2;
-          instance.componentWillReceiveProps(nextProps);
-        });
-
-        it('should setting currPage state correctly', () => {
-          expect(instance.state.currPage).toEqual(nextProps.pagination.options.page);
-        });
-
-        it('should saving store.page correctly', () => {
-          expect(props.store.page).toEqual(instance.state.currPage);
-        });
-      });
-
-      it('should not setting currPage state if options.page not existing', () => {
-        const { currPage } = instance.state;
-        instance.componentWillReceiveProps(nextProps);
-        expect(instance.state.currPage).toBe(currPage);
-      });
-
-      describe('when options.sizePerPage is existing', () => {
-        beforeEach(() => {
-          nextProps.pagination.options.sizePerPage = 20;
-          instance.componentWillReceiveProps(nextProps);
-        });
-
-        it('should setting currSizePerPage state correctly', () => {
-          expect(instance.state.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
-        });
-
-        it('should saving store.sizePerPage correctly', () => {
-          expect(props.store.sizePerPage).toEqual(instance.state.currSizePerPage);
-        });
-      });
-
-      it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
-        const { currSizePerPage } = instance.state;
-        instance.componentWillReceiveProps(nextProps);
-        expect(instance.state.currSizePerPage).toBe(currSizePerPage);
-      });
-
-      describe('when nextProps.isDataChanged is true', () => {
-        beforeEach(() => {
-          nextProps.isDataChanged = true;
-          instance.componentWillReceiveProps(nextProps);
-        });
-
-        it('should setting currPage state correctly', () => {
-          expect(instance.state.currPage).toBe(Const.PAGE_START_INDEX);
-        });
-
-        it('should saving store.page correctly', () => {
-          expect(props.store.page).toEqual(instance.state.currPage);
-        });
-      });
-
-      describe('when nextProps.isDataChanged is true and options.pageStartIndex is existing', () => {
-        beforeEach(() => {
-          nextProps.isDataChanged = true;
-          nextProps.pagination.options.pageStartIndex = 0;
-          instance.componentWillReceiveProps(nextProps);
-        });
-
-        it('should setting currPage state correctly', () => {
-          expect(instance.state.currPage).toBe(nextProps.pagination.options.pageStartIndex);
-        });
-
-        it('should saving store.page correctly', () => {
-          expect(props.store.page).toEqual(instance.state.currPage);
-        });
-      });
-    });
-  });
-
-  describe('when options.page is defined', () => {
-    const page = 3;
-    const props = createTableProps({ options: { page } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should setting correct state.currPage', () => {
-      expect(instance.state.currPage).toEqual(page);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('currPage')).toEqual(page);
-    });
-  });
-
-  describe('when options.sizePerPage is defined', () => {
-    const sizePerPage = 30;
-    const props = createTableProps({ options: { sizePerPage } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should setting correct state.currPage', () => {
-      expect(instance.state.currSizePerPage).toEqual(sizePerPage);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
-    });
-  });
-
-  describe('when options.totalSize is defined', () => {
-    const totalSize = 100;
-    const props = createTableProps({ options: { totalSize } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('dataSize')).toEqual(totalSize);
-    });
-  });
-
-  describe('when options.showTotal is defined', () => {
-    const props = createTableProps({ options: { showTotal: true } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('showTotal')).toBeTruthy();
-    });
-  });
-
-  describe('when options.pageStartIndex is defined', () => {
-    const pageStartIndex = -1;
-    const props = createTableProps({ options: { pageStartIndex } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should setting correct state.currPage', () => {
-      expect(instance.state.currPage).toEqual(pageStartIndex);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
-    });
-  });
-
-  describe('when options.sizePerPageList is defined', () => {
-    const sizePerPageList = [10, 40];
-    const props = createTableProps({ options: { sizePerPageList } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
-    });
-  });
-
-  describe('when options.paginationSize is defined', () => {
-    const paginationSize = 10;
-    const props = createTableProps({ options: { paginationSize } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('paginationSize')).toEqual(paginationSize);
-    });
-  });
-
-  describe('when options.withFirstAndLast is defined', () => {
-    const withFirstAndLast = false;
-    const props = createTableProps({ options: { withFirstAndLast } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
-    });
-  });
-
-  describe('when options.alwaysShowAllBtns is defined', () => {
-    const alwaysShowAllBtns = true;
-    const props = createTableProps({ options: { alwaysShowAllBtns } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
-    });
-  });
-
-  describe('when options.firstPageText is defined', () => {
-    const firstPageText = '1st';
-    const props = createTableProps({ options: { firstPageText } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('firstPageText')).toEqual(firstPageText);
-    });
-  });
-
-  describe('when options.prePageText is defined', () => {
-    const prePageText = 'PRE';
-    const props = createTableProps({ options: { prePageText } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('prePageText')).toEqual(prePageText);
-    });
-  });
-
-  describe('when options.nextPageText is defined', () => {
-    const nextPageText = 'NEXT';
-    const props = createTableProps({ options: { nextPageText } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('nextPageText')).toEqual(nextPageText);
-    });
-  });
-
-  describe('when options.lastPageText is defined', () => {
-    const lastPageText = 'nth';
-    const props = createTableProps({ options: { lastPageText } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('lastPageText')).toEqual(lastPageText);
-    });
-  });
-
-  describe('when options.firstPageTitle is defined', () => {
-    const firstPageTitle = '1st';
-    const props = createTableProps({ options: { firstPageTitle } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
-    });
-  });
-
-  describe('when options.prePageTitle is defined', () => {
-    const prePageTitle = 'PRE';
-    const props = createTableProps({ options: { prePageTitle } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
-    });
-  });
-
-  describe('when options.nextPageTitle is defined', () => {
-    const nextPageTitle = 'NEXT';
-    const props = createTableProps({ options: { nextPageTitle } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
-    });
-  });
-
-  describe('when options.lastPageTitle is defined', () => {
-    const lastPageTitle = 'nth';
-    const props = createTableProps({ options: { lastPageTitle } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
-    });
-  });
-
-  describe('when options.hideSizePerPage is defined', () => {
-    const hideSizePerPage = true;
-    const props = createTableProps({ options: { hideSizePerPage } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
-    });
-  });
-
-  describe('when options.hidePageListOnlyOnePage is defined', () => {
-    const hidePageListOnlyOnePage = true;
-    const props = createTableProps({ options: { hidePageListOnlyOnePage } });
-    beforeEach(() => {
-      createPaginationWrapper(props);
-    });
-
-    it('should rendering Pagination correctly', () => {
-      const pagination = wrapper.find(Pagination);
-      expect(wrapper.length).toBe(1);
-      expect(pagination.length).toBe(1);
-      expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
-    });
-  });
-
-  describe('handleChangePage', () => {
-    const newPage = 3;
-    const props = createTableProps({ options: { onPageChange: sinon.stub() } });
-    beforeEach(() => {
-      createPaginationWrapper(props, false);
-      instance.handleChangePage(newPage);
-    });
-
-    afterEach(() => {
-      props.pagination.options.onPageChange.reset();
-    });
-
-    it('should setting state.currPage correctly', () => {
-      expect(instance.state.currPage).toEqual(newPage);
-    });
-
-    it('should calling options.onPageChange correctly when it is defined', () => {
-      const { onPageChange } = props.pagination.options;
-      expect(onPageChange.calledOnce).toBeTruthy();
-      expect(onPageChange.calledWith(newPage, instance.state.currSizePerPage)).toBeTruthy();
-    });
-
-    it('should saving page and sizePerPage to store correctly', () => {
-      expect(props.store.page).toBe(newPage);
-      expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
-    });
-
-    describe('when pagination remote is enable', () => {
-      beforeEach(() => {
-        props.remote = true;
-        createPaginationWrapper(props, false);
-        onTableChangeCB.reset();
-        instance.handleChangePage(newPage);
-      });
-
-      it('should not setting state.currPage', () => {
-        expect(instance.state.currPage).not.toEqual(newPage);
-      });
-
-      it('should calling props.onRemotePageChange correctly', () => {
-        expect(onTableChangeCB.calledOnce).toBeTruthy();
-      });
-    });
-  });
-
-  describe('handleChangeSizePerPage', () => {
-    const newPage = 2;
-    const newSizePerPage = 30;
-    const props = createTableProps({ options: { onSizePerPageChange: sinon.stub() } });
-    beforeEach(() => {
-      createPaginationWrapper(props, false);
-      instance.handleChangeSizePerPage(newSizePerPage, newPage);
-    });
-
-    afterEach(() => {
-      props.pagination.options.onSizePerPageChange.reset();
-    });
-
-    it('should setting state.currPage and state.currSizePerPage correctly', () => {
-      expect(instance.state.currPage).toEqual(newPage);
-      expect(instance.state.currSizePerPage).toEqual(newSizePerPage);
-    });
-
-    it('should calling options.onSizePerPageChange correctly when it is defined', () => {
-      const { onSizePerPageChange } = props.pagination.options;
-      expect(onSizePerPageChange.calledOnce).toBeTruthy();
-      expect(onSizePerPageChange.calledWith(newSizePerPage, newPage)).toBeTruthy();
-    });
-
-    it('should saving page and sizePerPage to store correctly', () => {
-      expect(props.store.page).toBe(newPage);
-      expect(props.store.sizePerPage).toBe(newSizePerPage);
-    });
-
-    describe('when pagination remote is enable', () => {
-      beforeEach(() => {
-        props.remote = true;
-        createPaginationWrapper(props, false);
-        onTableChangeCB.reset();
-        instance.handleChangeSizePerPage(newSizePerPage, newPage);
-      });
-
-      it('should not setting state.currPage', () => {
-        expect(instance.state.currPage).not.toEqual(newPage);
-        expect(instance.state.currSizePerPage).not.toEqual(newSizePerPage);
-      });
-
-      it('should calling props.onRemotePageChange correctly', () => {
-        expect(onTableChangeCB.calledOnce).toBeTruthy();
-      });
-    });
-  });
-});

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

@@ -0,0 +1,123 @@
+# react-bootstrap-table2-toolkit
+
+`react-bootstrap-table2` support some additional features in [`react-bootstrap-table2-toolkit`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-toolkit).
+
+In the future, this toolkit will support other feature like row delete, insert etc. Right now we only support Table Search and CSV export.   
+
+**[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
+
+**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)**
+
+-----
+
+## Install
+
+```sh
+$ npm install react-bootstrap-table2-toolkit --save
+```
+
+## Add CSS
+
+```js
+// es5 
+require('react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css');
+
+// es6
+import 'react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css';
+```
+
+## Table Search
+
+```js
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+//...
+
+  <ToolkitProvider
+    keyField="id"
+    data={ products }
+    columns={ columns }
+    search
+  >
+    {
+      props => (
+        <div>
+          <h3>Input something at below input field:</h3>
+          <SearchBar { ...props.searchProps } />
+          <hr />
+          <BootstrapTable
+            { ...props.baseProps }
+          />
+        </div>
+      )
+    }
+  </ToolkitProvider>
+```
+
+1. You have to enable the search functionality via `search` prop on `ToolkitProvider`.
+
+2. `ToolkitProvider` is a wrapper of react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitProvider`
+
+3. You should render `SearchBar` with `searchProps` as well. The position of `SearchBar` is depends on you.
+
+### Search Options
+
+#### searchFormatted - [bool]
+If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
+
+```js
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ {
+    searchFormatted: true
+  } }
+>
+  // ...
+</ToolkitProvider>
+```
+
+## Export CSV
+There are two step to enable the export CSV functionality:
+
+1. Give `exportCSV` prop as `true` on `ToolkitProvider`.
+2. Render `ExportCSVButton` with `csvProps`. The position of `ExportCSVButton` is depends on you.
+
+```js
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable { ...props.baseProps } />
+      </div>
+    )
+  }
+</ToolkitProvider>
+```
+
+### Export CSV Options
+
+#### fileName - [String]
+Custom the csv file name.
+
+#### separator - [String]
+Custom the csv file separator.
+
+#### ignoreHeader - [bool]
+Default is `false`. Give true to avoid to attach the csv header.
+
+#### noAutoBOM - [bool]
+Default is `true`.

packages/react-bootstrap-table2-toolkit/context.js

@@ -0,0 +1,100 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import statelessDrcorator from './statelessOp';
+
+import createContext from './src/search/context';
+
+const ToolkitContext = React.createContext();
+
+class ToolkitProvider extends statelessDrcorator(React.Component) {
+  static propTypes = {
+    keyField: PropTypes.string.isRequired,
+    data: PropTypes.array.isRequired,
+    columns: PropTypes.array.isRequired,
+    children: PropTypes.node.isRequired,
+    bootstrap4: PropTypes.bool,
+    search: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.shape({
+        searchFormatted: PropTypes.bool
+      })
+    ]),
+    exportCSV: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.shape({
+        fileName: PropTypes.string,
+        separator: PropTypes.string,
+        ignoreHeader: PropTypes.bool,
+        noAutoBOM: PropTypes.bool
+      })
+    ])
+  }
+
+  static defaultProps = {
+    search: false,
+    exportCSV: false,
+    bootstrap4: false
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchText: ''
+    };
+    this._ = null;
+    this.onSearch = this.onSearch.bind(this);
+    this.setDependencyModules = this.setDependencyModules.bind(this);
+  }
+
+  onSearch(searchText) {
+    this.setState({ searchText });
+  }
+
+  /**
+   * 
+   * @param {*} _ 
+   * this function will be called only one time when table render
+   * react-bootstrap-table-next/src/context/index.js will call this cb for passing the _ module
+   * Please consider to extract a common module to handle _ module.
+   * this is just a quick fix
+   */
+  setDependencyModules(_) {
+    this._ = _;
+  }
+
+  render() {
+    const baseProps = {
+      keyField: this.props.keyField,
+      columns: this.props.columns,
+      data: this.props.data,
+      bootstrap4: this.props.bootstrap4,
+      setDependencyModules: this.setDependencyModules
+    };
+    if (this.props.search) {
+      baseProps.search = {
+        searchContext: createContext(this.props.search),
+        searchText: this.state.searchText
+      };
+    }
+    return (
+      <ToolkitContext.Provider value={ {
+        searchProps: {
+          onSearch: this.onSearch
+        },
+        csvProps: {
+          onExport: this.handleExportCSV
+        },
+        baseProps
+      } }
+      >
+        { this.props.children }
+      </ToolkitContext.Provider>
+    );
+  }
+}
+
+export default {
+  Provider: ToolkitProvider,
+  Consumer: ToolkitContext.Consumer
+};