Merge pull request #333 from react-bootstrap-table/refactor/context-api

Migrate to React@16.3 for Context API

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)
@@ -21,6 +22,7 @@
 * [headerClasses](#headerClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
+* [expandRow](#expandRow)
 * [rowStyle](#rowStyle)
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
@@ -66,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.
@@ -122,6 +127,9 @@ Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for
 ### <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:
 

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:
 
@@ -685,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.
 
@@ -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
+};
+```

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,7 +11,7 @@
     "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",
@@ -50,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",
@@ -81,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

@@ -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/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

@@ -15,6 +15,7 @@ const columns = [{
 }, {
   dataField: 'inStockDate',
   text: 'InStock Date',
+  formatter: cell => cell.toString(),
   filter: dateFilter({
     delay: 400,
     placeholder: 'custom placeholder',

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/date-filter-default-value.js

@@ -15,6 +15,7 @@ const columns = [{
 }, {
   dataField: 'inStockDate',
   text: 'InStock Date',
+  formatter: cell => cell.toString(),
   filter: dateFilter({
     defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT }
   })

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

@@ -15,6 +15,7 @@ const columns = [{
 }, {
   dataField: 'inStockDate',
   text: 'InStock Date',
+  formatter: cell => cell.toString(),
   filter: dateFilter()
 }];
 

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

@@ -17,6 +17,7 @@ const columns = [{
 }, {
   dataField: 'inStockDate',
   text: 'InStock Date',
+  formatter: cell => cell.toString(),
   filter: dateFilter({
     getFilter: (filter) => {
       // inStockDateFilter was assigned once the component has been mounted.

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/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/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

@@ -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

@@ -62,6 +62,7 @@ import ProgrammaticallyDateFilter from 'examples/column-filter/programmatically-
 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';
@@ -112,11 +113,35 @@ 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';
@@ -125,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';
 
@@ -200,7 +226,8 @@ storiesOf('Column Filter', module)
   .add('Programmatically Date Filter', () => <ProgrammaticallyDateFilter />)
   .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
   .add('Custom Filter', () => <CustomFilter />)
-  .add('Advance Custom Filter', () => <AdvanceCustomFilter />);
+  .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
+  .add('Clear All Filters', () => <ClearAllFilters />);
 
 storiesOf('Work on Rows', module)
   .add('Customize Row Style', () => <RowStyleTable />)
@@ -251,11 +278,35 @@ storiesOf('Row Selection', module)
   .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 />);
@@ -264,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/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

@@ -214,7 +214,7 @@ const columns = [..., {
 <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
 ```
 
-> **Notes:** date filter accept a Javascript Date object in your raw data.
+> **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:
 

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

@@ -3,12 +3,12 @@ import SelectFilter from './src/components/select';
 import MultiSelectFilter from './src/components/multiselect';
 import NumberFilter from './src/components/number';
 import DateFilter from './src/components/date';
-import wrapperFactory from './src/wrapper';
+import createContext from './src/context';
 import * as Comparison from './src/comparison';
 import { FILTER_TYPE } from './src/const';
 
 export default (options = {}) => ({
-  wrapperFactory,
+  createContext,
   options
 });
 

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

@@ -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

@@ -36,7 +36,7 @@ class DateFilter extends Component {
     const comparator = this.dateFilterComparator.value;
     const date = this.inputDate.value;
     if (comparator && date) {
-      this.applyFilter(date, comparator);
+      this.applyFilter(date, comparator, true);
     }
 
     // export onFilter function to allow users to access
@@ -92,7 +92,7 @@ class DateFilter extends Component {
     return defaultDate;
   }
 
-  applyFilter(value, comparator) {
+  applyFilter(value, comparator, isInitial) {
     // if (!comparator || !value) {
     //  return;
     // }
@@ -103,7 +103,7 @@ class DateFilter extends Component {
       // 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)({ date, comparator });
+      onFilter(column, FILTER_TYPE.DATE, isInitial)({ date, comparator });
     };
     if (delay) {
       this.timeout = setTimeout(() => { execute(); }, delay);

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

@@ -36,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

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

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/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

@@ -229,9 +229,9 @@ export const filterFactory = _ => (filterType) => {
   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,107 +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);
-      this.onExternalFilter = this.onExternalFilter.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 (Object.keys(this.state.currFilters).length > 0) {
-          store.filteredData = filters(store, columns, _)(this.state.currFilters);
-        }
-        this.setState(() => ({ isDataChanged }));
-      }
-    }
-
-    /**
-     * 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;
-        // watch out here if migration to context API, #334
-        const currFilters = Object.assign({}, store.filters);
-        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) || (
-                filterType === FILTER_TYPE.MULTISELECT) ? 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 }));
-      };
-    }
-
-    onExternalFilter(column, filterType) {
-      return (value) => {
-        this.onFilter(column, filterType)(value);
-      };
-    }
-
-    render() {
-      return (
-        <Base
-          { ...this.props }
-          data={ this.props.store.data }
-          onFilter={ this.onFilter }
-          onExternalFilter={ this.onExternalFilter }
-          isDataChanged={ this.state.isDataChanged }
-        />
-      );
-    }
-  };

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

@@ -124,7 +124,7 @@ describe('Date Filter', () => {
 
     it('should do onFilter correctly when exported function was executed', () => {
       expect(onFilter).toHaveBeenCalledTimes(1);
-      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE);
+      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE, undefined);
       expect(onFilterFirstReturn).toHaveBeenCalledTimes(1);
       expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date });
     });
@@ -148,7 +148,7 @@ describe('Date Filter', () => {
 
     it('should calling onFilter on componentDidMount', () => {
       expect(onFilter).toHaveBeenCalledTimes(1);
-      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE);
+      expect(onFilter).toHaveBeenCalledWith(column, FILTER_TYPE.DATE, true);
       expect(onFilterFirstReturn).toHaveBeenCalledTimes(1);
       // expect(onFilterFirstReturn).toHaveBeenCalledWith({ comparator, date });
     });

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,5 +1,4 @@
 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';
@@ -16,14 +15,10 @@ for (let i = 0; i < 20; i += 1) {
 }
 
 describe('filter', () => {
-  let store;
-  let filterFn;
   let currFilters;
   let columns;
 
   beforeEach(() => {
-    store = new Store('id');
-    store.data = data;
     currFilters = {};
     columns = [{
       dataField: 'id',
@@ -41,10 +36,6 @@ describe('filter', () => {
   });
 
   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 = {
@@ -52,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);
       });
@@ -65,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);
       });
@@ -79,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);
       });
@@ -93,7 +84,7 @@ describe('filter', () => {
           comparator: EQ
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
         expect(result).toHaveLength(1);
       });
@@ -102,7 +93,6 @@ describe('filter', () => {
     describe('column.filterValue is defined', () => {
       beforeEach(() => {
         columns[1].filterValue = jest.fn();
-        filterFn = filters(store, columns, _);
       });
 
       it('should calling custom filterValue callback correctly', () => {
@@ -111,7 +101,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.TEXT
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
         expect(columns[1].filterValue).toHaveBeenCalledTimes(data.length);
         // const calls = columns[1].filterValue.mock.calls;
@@ -124,10 +114,6 @@ describe('filter', () => {
   });
 
   describe('filterByArray', () => {
-    beforeEach(() => {
-      filterFn = filters(store, columns, _);
-    });
-
     describe('when filter value is empty array', () => {
       it('should return original data', () => {
         currFilters.name = {
@@ -135,9 +121,9 @@ describe('filter', () => {
           filterType: FILTER_TYPE.MULTISELECT
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toBeDefined();
-        expect(result).toHaveLength(store.data.length);
+        expect(result).toHaveLength(data.length);
       });
     });
 
@@ -150,7 +136,7 @@ describe('filter', () => {
             comparator: EQ
           };
 
-          const result = filterFn(currFilters);
+          const result = filters(data, columns, _)(currFilters);
           expect(result).toBeDefined();
           expect(result).toHaveLength(2);
         });
@@ -164,7 +150,7 @@ describe('filter', () => {
             comparator: LIKE
           };
 
-          const result = filterFn(currFilters);
+          const result = filters(data, columns, _)(currFilters);
           expect(result).toBeDefined();
           expect(result).toHaveLength(3);
         });
@@ -173,10 +159,6 @@ describe('filter', () => {
   });
 
   describe('filterByNumber', () => {
-    beforeEach(() => {
-      filterFn = filters(store, columns, _);
-    });
-
     describe('when currFilters.filterVal.comparator is empty', () => {
       it('should returning correct result', () => {
         currFilters.price = {
@@ -184,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);
       });
     });
@@ -200,7 +182,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(data.length);
       });
     });
@@ -212,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);
       });
     });
@@ -228,7 +210,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(16);
       });
     });
@@ -240,7 +222,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(17);
       });
     });
@@ -252,7 +234,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(3);
       });
     });
@@ -264,7 +246,7 @@ describe('filter', () => {
           filterType: FILTER_TYPE.NUMBER
         };
 
-        const result = filterFn(currFilters);
+        const result = filters(data, columns, _)(currFilters);
         expect(result).toHaveLength(4);
       });
     });
@@ -276,15 +258,16 @@ 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(store, columns, _);
+      filterFn = filters(data, columns, _);
     });
 
     describe('when currFilters.filterVal.comparator is empty', () => {

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/package.json

@@ -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-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

@@ -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/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,5 +1,3 @@
-/* eslint no-param-reassign: 0 */
-
 const getNormalizedPage = (
   page,
   pageStartIndex
@@ -19,25 +17,36 @@ const startIndex = (
   sizePerPage,
 ) => end - (sizePerPage - 1);
 
-export const alignPage = (store, pageStartIndex, sizePerPage) => {
-  const end = endIndex(store.page, sizePerPage, pageStartIndex);
-  const dataSize = store.data.length;
+export const alignPage = (
+  data,
+  page,
+  sizePerPage,
+  pageStartIndex
+) => {
+  const end = endIndex(page, sizePerPage, pageStartIndex);
+  const dataSize = data.length;
 
   if (end - 1 > dataSize) {
     return pageStartIndex;
   }
-  return store.page;
+  return page;
 };
 
-export const getByCurrPage = (store, pageStartIndex) => {
-  const dataSize = store.data.length;
+export const getByCurrPage = (
+  data,
+  page,
+  sizePerPage,
+  pageStartIndex
+) => {
+  const dataSize = data.length;
   if (!dataSize) return [];
-  const end = endIndex(store.page, store.sizePerPage, pageStartIndex);
-  const start = startIndex(end, store.sizePerPage);
+
+  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/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,168 +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, alignPage } 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, 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 if (nextProps.isDataChanged) {
-        currPage = alignPage(this.props.store, pageStartIndex, currSizePerPage);
-        needNewState = true;
-      }
-
-      if (typeof currPage === 'undefined') {
-        currPage = pageStartIndex;
-      }
-
-      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 }
-          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 }
-        />
-      ];
-    }
-  };

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, alignPage } from '../src/page';
 
 describe('Page Functions', () => {
   let data;
-  let store;
   const params = [
     // [page, sizePerPage, pageStartIndex]
     [1, 10, 1],
@@ -23,27 +22,21 @@ 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);
       });
     });
@@ -52,19 +45,17 @@ describe('Page Functions', () => {
   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}` });
         }
-        store = new Store('id');
-        store.data = data;
-        store.page = 2;
       });
 
       it('should return pageStartIndex argument', () => {
-        expect(alignPage(store, pageStartIndex, sizePerPage)).toEqual(pageStartIndex);
+        expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
       });
     });
 
@@ -74,13 +65,10 @@ describe('Page Functions', () => {
         for (let i = 0; i < 30; i += 1) {
           data.push({ id: i, name: `test_name${i}` });
         }
-        store = new Store('id');
-        store.data = data;
-        store.page = 2;
       });
 
       it('should return current page', () => {
-        expect(alignPage(store, pageStartIndex, sizePerPage)).toEqual(store.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,570 +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: `item 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 render correctly', () => {
-      expect(wrapper.length).toBe(1);
-    });
-
-    it('should initialize 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 save page and sizePerPage to the store correctly', () => {
-      expect(props.store.page).toBe(instance.state.currPage);
-      expect(props.store.sizePerPage).toBe(instance.state.currSizePerPage);
-    });
-
-    it('should render BootstrapTable correctly', () => {
-      const table = wrapper.find(BootstrapTable);
-      expect(table.length).toBe(1);
-      expect(table.prop('data').length).toEqual(instance.state.currSizePerPage);
-    });
-
-    it('should render 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')).toBeFalsy();
-    });
-
-    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 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 render 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
+};

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

@@ -0,0 +1,7 @@
+import Context from './context';
+import ToolkitProvider from './provider';
+
+export default ToolkitProvider;
+export const ToolkitContext = Context;
+export { default as Search } from './src/search';
+export { default as CSVExport } from './src/csv';

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ToolkitContext from './context';
+
+const Toolkitprovider = props => (
+  <ToolkitContext.Provider { ...props }>
+    <ToolkitContext.Consumer>
+      {
+        tookKitProps => props.children(tookKitProps)
+      }
+    </ToolkitContext.Consumer>
+  </ToolkitContext.Provider>
+);
+
+Toolkitprovider.propTypes = {
+  children: PropTypes.func.isRequired
+};
+
+export default Toolkitprovider;

packages/react-bootstrap-table2-toolkit/src/csv/button.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ExportCSVButton = (props) => {
+  const {
+    onExport,
+    children,
+    ...rest
+  } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={ onExport }
+      { ...rest }
+    >
+      { children }
+    </button>
+  );
+};
+
+ExportCSVButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  onExport: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.object
+};
+ExportCSVButton.defaultProps = {
+  className: 'react-bs-table-csv-btn btn btn-default',
+  style: {}
+};
+
+export default ExportCSVButton;

packages/react-bootstrap-table2-toolkit/src/csv/exporter.js

@@ -0,0 +1,65 @@
+/* eslint no-unneeded-ternary: 0 */
+import FileSaver from 'file-saver';
+
+export const getMetaInfo = columns =>
+  columns
+    .map(column => ({
+      field: column.dataField,
+      type: column.csvType || String,
+      formatter: column.csvFormatter,
+      formatExtraData: column.formatExtraData,
+      header: column.csvText || column.text,
+      export: column.csvExport === false ? false : true,
+      row: Number(column.row) || 0,
+      rowSpan: Number(column.rowSpan) || 1,
+      colSpan: Number(column.colSpan) || 1
+    }))
+    .filter(_ => _.export);
+
+export const transform = (
+  data,
+  meta,
+  getValue,
+  {
+    separator,
+    ignoreHeader
+  }
+) => {
+  const visibleColumns = meta.filter(m => m.export);
+  let content = '';
+  // extract csv header
+  if (!ignoreHeader) {
+    content += visibleColumns.map(m => `"${m.header}"`).join(separator);
+    content += '\n';
+  }
+  // extract csv body
+  if (data.length === 0) return content;
+  content += data
+    .map((row, rowIndex) =>
+      visibleColumns.map((m) => {
+        let cellContent = getValue(row, m.field);
+        if (m.formatter) {
+          cellContent = m.formatter(cellContent, row, rowIndex, m.formatExtraData);
+        }
+        if (m.type === String) {
+          return `"${cellContent}"`;
+        }
+        return cellContent;
+      }).join(separator)).join('\n');
+
+  return content;
+};
+
+export const save = (
+  content,
+  {
+    noAutoBOM,
+    fileName
+  }
+) => {
+  FileSaver.saveAs(
+    new Blob(['\ufeff', content], { type: 'text/plain;charset=utf-8' }),
+    fileName,
+    noAutoBOM
+  );
+};

packages/react-bootstrap-table2-toolkit/src/csv/index.js

@@ -0,0 +1,3 @@
+import ExportCSVButton from './button';
+
+export default { ExportCSVButton };

packages/react-bootstrap-table2-toolkit/src/op/csv.js

@@ -0,0 +1,24 @@
+import { getMetaInfo, transform, save } from '../csv/exporter';
+
+const csvDefaultOptions = {
+  fileName: 'spreadsheet.csv',
+  separator: ',',
+  ignoreHeader: false,
+  noAutoBOM: true
+};
+
+export default Base =>
+  class CSVOperation extends Base {
+    handleExportCSV = () => {
+      const { columns, data, exportCSV } = this.props;
+      const meta = getMetaInfo(columns);
+      const options = exportCSV === true ?
+        csvDefaultOptions :
+        {
+          ...csvDefaultOptions,
+          ...exportCSV
+        };
+      const content = transform(data, meta, this._.get, options);
+      save(content, options);
+    }
+  };

packages/react-bootstrap-table2-toolkit/src/op/index.js

@@ -0,0 +1,5 @@
+import csvOperation from './csv';
+
+export default {
+  csvOperation
+};

packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js

@@ -0,0 +1,73 @@
+/* eslint no-return-assign: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const handleDebounce = (func, wait, immediate) => {
+  let timeout;
+
+  return () => {
+    const later = () => {
+      timeout = null;
+
+      if (!immediate) {
+        func.apply(this, arguments);
+      }
+    };
+
+    const callNow = immediate && !timeout;
+
+    clearTimeout(timeout);
+
+    timeout = setTimeout(later, wait || 0);
+
+    if (callNow) {
+      func.appy(this, arguments);
+    }
+  };
+};
+
+const SearchBar = ({
+  delay,
+  onSearch,
+  className,
+  style,
+  placeholder,
+  searchText,
+  ...rest
+}) => {
+  let input;
+  const debounceCallback = handleDebounce(() => {
+    onSearch(input.value);
+  }, delay);
+
+  return (
+    <input
+      ref={ n => input = n }
+      type="text"
+      style={ style }
+      onKeyUp={ () => debounceCallback() }
+      className={ `form-control ${className}` }
+      placeholder={ placeholder || SearchBar.defaultProps.placeholder }
+      { ...rest }
+    />
+  );
+};
+
+SearchBar.propTypes = {
+  onSearch: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  style: PropTypes.object,
+  delay: PropTypes.number,
+  searchText: PropTypes.string
+};
+
+SearchBar.defaultProps = {
+  className: '',
+  style: {},
+  placeholder: 'Search',
+  delay: 250,
+  searchText: ''
+};
+
+export default SearchBar;

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

@@ -0,0 +1,83 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+/* eslint no-continue: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default (options = {
+  searchFormatted: false
+}) => (
+  _,
+  isRemoteSearch,
+  handleRemoteSearchChange
+) => {
+  const SearchContext = React.createContext();
+
+  class SearchProvider extends React.Component {
+    static propTypes = {
+      data: PropTypes.array.isRequired,
+      columns: PropTypes.array.isRequired,
+      searchText: PropTypes.string
+    }
+
+    constructor(props) {
+      super(props);
+      this.needToSearch = true;
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.searchText !== this.props.searchText) {
+        this.needToSearch = true;
+      } else {
+        this.needToSearch = false;
+      }
+    }
+
+    search() {
+      const { data, columns } = this.props;
+      let { searchText } = this.props;
+
+      if (!this.needToSearch) return data;
+
+      if (isRemoteSearch()) {
+        handleRemoteSearchChange(searchText);
+        return data;
+      }
+
+      searchText = searchText.toLowerCase();
+      return data.filter((row, ridx) => {
+        for (let cidx = 0; cidx < columns.length; cidx += 1) {
+          const column = columns[cidx];
+          if (column.searchable === false) continue;
+          let targetValue = _.get(row, column.dataField);
+          if (column.formatter && options.searchFormatted) {
+            targetValue = column.formatter(targetValue, row, ridx, column.formatExtraData);
+          } else if (column.filterValue) {
+            targetValue = column.filterValue(targetValue, row);
+          }
+          if (targetValue !== null && typeof targetValue !== 'undefined') {
+            targetValue = targetValue.toString().toLowerCase();
+            if (targetValue.indexOf(searchText) > -1) {
+              return true;
+            }
+          }
+        }
+        return false;
+      });
+    }
+
+    render() {
+      const data = this.search();
+      return (
+        <SearchContext.Provider value={ { data } }>
+          { this.props.children }
+        </SearchContext.Provider>
+      );
+    }
+  }
+
+  return {
+    Provider: SearchProvider,
+    Consumer: SearchContext.Consumer
+  };
+};

packages/react-bootstrap-table2-toolkit/src/search/index.js

@@ -0,0 +1,3 @@
+import SearchBar from './SearchBar';
+
+export default { SearchBar };

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

@@ -0,0 +1,4 @@
+import Operation from './src/op';
+
+export default Base =>
+  class StatelessOperation extends Operation.csvOperation(Base) {};

packages/react-bootstrap-table2-toolkit/yarn.lock

@@ -0,0 +1,7 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+file-saver@1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"

packages/react-bootstrap-table2/index.js

@@ -1,5 +1,4 @@
 import BootstrapTable from './src/bootstrap-table';
-import withDataStore from './src/container';
-
-export default withDataStore(BootstrapTable);
+import withContext from './src/contexts';
 
+export default withContext(BootstrapTable);

packages/react-bootstrap-table2/package.json

@@ -41,7 +41,7 @@
   "peerDependencies": {
     "classnames": "^2.2.5",
     "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/src/body.js

@@ -7,6 +7,7 @@ import cs from 'classnames';
 
 import _ from './utils';
 import Row from './row';
+import ExpandRow from './row-expand/expand-row';
 import RowSection from './row-section';
 import Const from './const';
 
@@ -23,7 +24,8 @@ const Body = (props) => {
     selectedRowKeys,
     rowStyle,
     rowClasses,
-    rowEvents
+    rowEvents,
+    expandRow
   } = props;
 
   const {
@@ -74,8 +76,10 @@ const Body = (props) => {
       }
 
       const selectable = !nonSelectable || !nonSelectable.includes(key);
+      const expandable = expandRow && !expandRow.nonExpandable.includes(key);
+      const expanded = expandRow && expandRow.expanded.includes(key);
 
-      return (
+      const result = [
         <Row
           key={ key }
           row={ row }
@@ -85,13 +89,29 @@ const Body = (props) => {
           cellEdit={ cellEdit }
           editable={ editable }
           selectable={ selectable }
+          expandable={ expandable }
           selected={ selected }
+          expanded={ expanded }
           selectRow={ selectRow }
+          expandRow={ expandRow }
           style={ style }
           className={ classes }
           attrs={ attrs }
         />
-      );
+      ];
+
+      if (expanded) {
+        result.push((
+          <ExpandRow
+            key={ `${key}-expanding` }
+            colSpan={ visibleColumnSize }
+          >
+            { expandRow.renderer(row) }
+          </ExpandRow>
+        ));
+      }
+
+      return result;
     });
   }
 

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

@@ -9,22 +9,12 @@ import Caption from './caption';
 import Body from './body';
 import PropsBaseResolver from './props-resolver';
 import Const from './const';
-import { isSelectedAll } from './store/selection';
+import { getSelectionSummary } from './store/selection';
 
 class BootstrapTable extends PropsBaseResolver(Component) {
   constructor(props) {
     super(props);
     this.validateProps();
-
-    this.state = {
-      data: props.data
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      data: nextProps.data
-    });
   }
 
   render() {
@@ -42,7 +32,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
   renderTable() {
     const {
-      store,
+      data,
       columns,
       keyField,
       id,
@@ -56,7 +46,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       rowStyle,
       rowClasses,
       wrapperClasses,
-      rowEvents
+      rowEvents,
+      selected
     } = this.props;
 
     const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
@@ -72,13 +63,16 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       onRowSelect: this.props.onRowSelect
     });
 
+    const { allRowsSelected, allRowsNotSelected } = getSelectionSummary(data, keyField, selected);
     const headerCellSelectionInfo = this.resolveSelectRowPropsForHeader({
       onAllRowsSelect: this.props.onAllRowsSelect,
-      selected: store.selected,
-      allRowsSelected: isSelectedAll(store)
+      selected,
+      allRowsSelected,
+      allRowsNotSelected
     });
 
     const tableCaption = (caption && <Caption>{ caption }</Caption>);
+    const expandRow = this.resolveExpandRowProps();
 
     return (
       <div className={ tableWrapperClass }>
@@ -87,15 +81,16 @@ class BootstrapTable extends PropsBaseResolver(Component) {
           <Header
             columns={ columns }
             className={ this.props.headerClasses }
-            sortField={ store.sortField }
-            sortOrder={ store.sortOrder }
+            sortField={ this.props.sortField }
+            sortOrder={ this.props.sortOrder }
             onSort={ this.props.onSort }
             onFilter={ this.props.onFilter }
             onExternalFilter={ this.props.onExternalFilter }
             selectRow={ headerCellSelectionInfo }
+            expandRow={ expandRow }
           />
           <Body
-            data={ this.state.data }
+            data={ data }
             keyField={ keyField }
             columns={ columns }
             isEmpty={ this.isEmpty() }
@@ -103,7 +98,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             noDataIndication={ noDataIndication }
             cellEdit={ this.props.cellEdit || {} }
             selectRow={ cellSelectionInfo }
-            selectedRowKeys={ store.selected }
+            selectedRowKeys={ selected }
+            expandRow={ expandRow }
             rowStyle={ rowStyle }
             rowClasses={ rowClasses }
             rowEvents={ rowEvents }
@@ -118,10 +114,10 @@ BootstrapTable.propTypes = {
   keyField: PropTypes.string.isRequired,
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
+  bootstrap4: PropTypes.bool,
   remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     pagination: PropTypes.bool
   })]),
-  store: PropTypes.object,
   noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   striped: PropTypes.bool,
   bordered: PropTypes.bool,
@@ -153,6 +149,19 @@ BootstrapTable.propTypes = {
   }),
   onRowSelect: PropTypes.func,
   onAllRowsSelect: PropTypes.func,
+  expandRow: PropTypes.shape({
+    renderer: PropTypes.func.isRequired,
+    expanded: PropTypes.array,
+    onExpand: PropTypes.func,
+    onExpandAll: PropTypes.func,
+    nonExpandable: PropTypes.array,
+    showExpandColumn: PropTypes.bool,
+    expandColumnRenderer: PropTypes.func,
+    expandHeaderColumnRenderer: PropTypes.func
+  }),
+  onRowExpand: PropTypes.func,
+  onAllRowExpand: PropTypes.func,
+  isAnyExpands: PropTypes.func,
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
@@ -166,10 +175,17 @@ BootstrapTable.propTypes = {
   onTableChange: PropTypes.func,
   onSort: PropTypes.func,
   onFilter: PropTypes.func,
-  onExternalFilter: PropTypes.func
+  onExternalFilter: PropTypes.func,
+  // Inject from toolkit
+  search: PropTypes.shape({
+    searchText: PropTypes.string,
+    searchContext: PropTypes.func
+  }),
+  setDependencyModules: PropTypes.func
 };
 
 BootstrapTable.defaultProps = {
+  bootstrap4: false,
   remote: false,
   striped: false,
   bordered: true,

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

@@ -1,71 +0,0 @@
-/* eslint no-return-assign: 0 */
-/* eslint react/prop-types: 0 */
-import React, { Component } from 'react';
-import Store from './store';
-import withSort from './sort/wrapper';
-import withSelection from './row-selection/wrapper';
-
-import remoteResolver from './props-resolver/remote-resolver';
-import _ from './utils';
-
-const withDataStore = Base =>
-  class BootstrapTableContainer extends remoteResolver(Component) {
-    constructor(props) {
-      super(props);
-      this.store = new Store(props.keyField);
-      this.store.data = props.data;
-      this.wrapComponents();
-    }
-
-    componentWillReceiveProps(nextProps) {
-      this.store.setAllData(nextProps.data);
-    }
-
-    wrapComponents() {
-      this.BaseComponent = Base;
-      const { pagination, columns, filter, selectRow, cellEdit } = this.props;
-      if (pagination) {
-        const { wrapperFactory } = pagination;
-        this.BaseComponent = wrapperFactory(this.BaseComponent, {
-          remoteResolver
-        });
-      }
-
-      if (columns.filter(col => col.sort).length > 0) {
-        this.BaseComponent = withSort(this.BaseComponent);
-      }
-
-      if (filter) {
-        const { wrapperFactory } = filter;
-        this.BaseComponent = wrapperFactory(this.BaseComponent, {
-          _,
-          remoteResolver
-        });
-      }
-
-      if (cellEdit) {
-        const { wrapperFactory } = cellEdit;
-        this.BaseComponent = wrapperFactory(this.BaseComponent, {
-          _,
-          remoteResolver
-        });
-      }
-
-      if (selectRow) {
-        this.BaseComponent = withSelection(this.BaseComponent);
-      }
-    }
-
-    render() {
-      const baseProps = {
-        ...this.props,
-        store: this.store
-      };
-
-      return (
-        <this.BaseComponent { ...baseProps } />
-      );
-    }
-  };
-
-export default withDataStore;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const BootstrapContext = React.createContext({
+  bootstrap4: false
+});

packages/react-bootstrap-table2/src/contexts/data-context.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default () => {
+  const DataContext = React.createContext();
+
+  class DataProvider extends Component {
+    static propTypes = {
+      data: PropTypes.array.isRequired,
+      children: PropTypes.node.isRequired
+    }
+
+    state = { data: this.props.data };
+
+    componentWillReceiveProps(nextProps) {
+      this.setState(() => ({ data: nextProps.data }));
+    }
+
+    getData = (filterProps, searchProps, sortProps, paginationProps) => {
+      if (paginationProps) return paginationProps.data;
+      else if (sortProps) return sortProps.data;
+      else if (searchProps) return searchProps.data;
+      else if (filterProps) return filterProps.data;
+      return this.props.data;
+    }
+
+    render() {
+      return (
+        <DataContext.Provider
+          value={ {
+            data: this.state.data,
+            getData: this.getData
+          } }
+        >
+          { this.props.children }
+        </DataContext.Provider>
+      );
+    }
+  }
+  return {
+    Provider: DataProvider,
+    Consumer: DataContext.Consumer
+  };
+};

packages/react-bootstrap-table2/src/contexts/index.js

@@ -0,0 +1,322 @@
+/* eslint no-return-assign: 0 */
+/* eslint class-methods-use-this: 0 */
+import React, { Component } from 'react';
+import _ from '../utils';
+import createDataContext from './data-context';
+import createSortContext from './sort-context';
+import createSelectionContext from './selection-context';
+import createRowExpandContext from './row-expand-context';
+import remoteResolver from '../props-resolver/remote-resolver';
+import { BootstrapContext } from './bootstrap';
+import dataOperator from '../store/operators';
+
+const withContext = Base =>
+  class BootstrapTableContainer extends remoteResolver(Component) {
+    constructor(props) {
+      super(props);
+      this.DataContext = createDataContext();
+
+      if (props.columns.filter(col => col.sort).length > 0) {
+        this.SortContext = createSortContext(
+          dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
+      }
+
+      if (props.selectRow) {
+        this.SelectionContext = createSelectionContext(dataOperator);
+      }
+
+      if (props.expandRow) {
+        this.RowExpandContext = createRowExpandContext(dataOperator);
+      }
+
+      if (props.cellEdit && props.cellEdit.createContext) {
+        this.CellEditContext = props.cellEdit.createContext(
+          _, dataOperator, this.isRemoteCellEdit, this.handleRemoteCellChange);
+      }
+
+      if (props.filter) {
+        this.FilterContext = props.filter.createContext(
+          _, this.isRemoteFiltering, this.handleRemoteFilterChange);
+      }
+
+      if (props.pagination) {
+        this.PaginationContext = props.pagination.createContext(
+          this.isRemotePagination, this.handleRemotePageChange);
+      }
+
+      if (props.search && props.search.searchContext) {
+        this.SearchContext = props.search.searchContext(
+          _, this.isRemoteSearch, this.handleRemoteSearchChange);
+      }
+
+      if (props.setDependencyModules) {
+        props.setDependencyModules(_);
+      }
+    }
+
+    renderBase() {
+      return (
+        rootProps,
+        cellEditProps,
+        filterProps,
+        searchProps,
+        sortProps,
+        paginationProps,
+        expandProps,
+        selectionProps
+      ) => (
+        <Base
+          { ...this.props }
+          { ...selectionProps }
+          { ...sortProps }
+          { ...cellEditProps }
+          { ...filterProps }
+          { ...searchProps }
+          { ...paginationProps }
+          { ...expandProps }
+          data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
+        />
+      );
+    }
+
+    renderWithSelectionCtx(base, baseProps) {
+      return (
+        rootProps,
+        cellEditProps,
+        filterProps,
+        searchProps,
+        sortProps,
+        paginationProps,
+        expandProps
+      ) => (
+        <this.SelectionContext.Provider
+          { ...baseProps }
+          selectRow={ this.props.selectRow }
+          data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
+        >
+          <this.SelectionContext.Consumer>
+            {
+              selectionProps => base(
+                rootProps,
+                cellEditProps,
+                filterProps,
+                searchProps,
+                sortProps,
+                paginationProps,
+                expandProps,
+                selectionProps
+              )
+            }
+          </this.SelectionContext.Consumer>
+        </this.SelectionContext.Provider>
+      );
+    }
+
+    renderWithRowExpandCtx(base, baseProps) {
+      return (
+        rootProps,
+        cellEditProps,
+        filterProps,
+        searchProps,
+        sortProps,
+        paginationProps
+      ) => (
+        <this.RowExpandContext.Provider
+          { ...baseProps }
+          expandRow={ this.props.expandRow }
+          data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
+        >
+          <this.RowExpandContext.Consumer>
+            {
+              expandProps => base(
+                rootProps,
+                cellEditProps,
+                filterProps,
+                searchProps,
+                sortProps,
+                paginationProps,
+                expandProps
+              )
+            }
+          </this.RowExpandContext.Consumer>
+        </this.RowExpandContext.Provider>
+      );
+    }
+
+    renderWithPaginationCtx(base) {
+      return (
+        rootProps,
+        cellEditProps,
+        filterProps,
+        searchProps,
+        sortProps
+      ) => (
+        <this.PaginationContext.Provider
+          ref={ n => this.paginationContext = n }
+          pagination={ this.props.pagination }
+          data={ rootProps.getData(filterProps, searchProps, sortProps) }
+          bootstrap4={ this.props.bootstrap4 }
+        >
+          <this.PaginationContext.Consumer>
+            {
+              paginationProps => base(
+                rootProps,
+                cellEditProps,
+                filterProps,
+                searchProps,
+                sortProps,
+                paginationProps
+              )
+            }
+          </this.PaginationContext.Consumer>
+        </this.PaginationContext.Provider>
+      );
+    }
+
+    renderWithSortCtx(base, baseProps) {
+      return (
+        rootProps,
+        cellEditProps,
+        filterProps,
+        searchProps
+      ) => (
+        <this.SortContext.Provider
+          { ...baseProps }
+          ref={ n => this.sortContext = n }
+          defaultSorted={ this.props.defaultSorted }
+          defaultSortDirection={ this.props.defaultSortDirection }
+          data={ rootProps.getData(filterProps, searchProps) }
+        >
+          <this.SortContext.Consumer>
+            {
+              sortProps => base(
+                rootProps,
+                cellEditProps,
+                filterProps,
+                searchProps,
+                sortProps,
+              )
+            }
+          </this.SortContext.Consumer>
+        </this.SortContext.Provider>
+      );
+    }
+
+    renderWithSearchCtx(base, baseProps) {
+      return (
+        rootProps,
+        cellEditProps,
+        filterProps
+      ) => (
+        <this.SearchContext.Provider
+          { ...baseProps }
+          ref={ n => this.searchContext = n }
+          data={ rootProps.getData(filterProps) }
+          searchText={ this.props.search.searchText }
+        >
+          <this.SearchContext.Consumer>
+            {
+              searchProps => base(
+                rootProps,
+                cellEditProps,
+                filterProps,
+                searchProps
+              )
+            }
+          </this.SearchContext.Consumer>
+        </this.SearchContext.Provider>
+      );
+    }
+
+    renderWithFilterCtx(base, baseProps) {
+      return (
+        rootProps,
+        cellEditProps
+      ) => (
+        <this.FilterContext.Provider
+          { ...baseProps }
+          ref={ n => this.filterContext = n }
+          data={ rootProps.getData() }
+        >
+          <this.FilterContext.Consumer>
+            {
+              filterProps => base(
+                rootProps,
+                cellEditProps,
+                filterProps
+              )
+            }
+          </this.FilterContext.Consumer>
+        </this.FilterContext.Provider>
+      );
+    }
+
+    renderWithCellEditCtx(base, baseProps) {
+      return rootProps => (
+        <this.CellEditContext.Provider
+          { ...baseProps }
+          selectRow={ this.props.selectRow }
+          cellEdit={ this.props.cellEdit }
+          data={ rootProps.getData() }
+        >
+          <this.CellEditContext.Consumer>
+            {
+              cellEditProps => base(rootProps, cellEditProps)
+            }
+          </this.CellEditContext.Consumer>
+        </this.CellEditContext.Provider>
+      );
+    }
+
+    render() {
+      const { keyField, columns, bootstrap4 } = this.props;
+      const baseProps = { keyField, columns };
+
+      let base = this.renderBase();
+
+      if (this.SelectionContext) {
+        base = this.renderWithSelectionCtx(base, baseProps);
+      }
+
+      if (this.RowExpandContext) {
+        base = this.renderWithRowExpandCtx(base, baseProps);
+      }
+
+      if (this.PaginationContext) {
+        base = this.renderWithPaginationCtx(base, baseProps);
+      }
+
+      if (this.SortContext) {
+        base = this.renderWithSortCtx(base, baseProps);
+      }
+
+      if (this.SearchContext) {
+        base = this.renderWithSearchCtx(base, baseProps);
+      }
+
+      if (this.FilterContext) {
+        base = this.renderWithFilterCtx(base, baseProps);
+      }
+
+      if (this.CellEditContext) {
+        base = this.renderWithCellEditCtx(base, baseProps);
+      }
+
+      return (
+        <BootstrapContext.Provider value={ { bootstrap4 } }>
+          <this.DataContext.Provider
+            { ...baseProps }
+            data={ this.props.data }
+          >
+            <this.DataContext.Consumer>
+              {
+                base
+              }
+            </this.DataContext.Consumer>
+          </this.DataContext.Provider>
+        </BootstrapContext.Provider>
+      );
+    }
+  };
+
+export default withContext;