Publish

- react-bootstrap-table2-example@1.0.32
 - react-bootstrap-table-next@3.2.1

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/ISSUE_TEMPLATE/feature_request.md

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

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

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

README.md

@@ -1,7 +1,7 @@
 # react-bootstrap-table2
 
 [![Build Status](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2.svg?branch=master)](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)  
-Rebuilt of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
+Rebuild of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
 
 > Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
 

docs/README.md

@@ -33,6 +33,7 @@
 * [pagination](#pagination)
 * [filter](#filter)
 * [onTableChange](#onTableChange)
+* [onDataSizeChange](#onDataSizeChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
 Tells `react-bootstrap-table2` which column is unique.
@@ -97,7 +98,14 @@ import overlayFactory from 'react-bootstrap-table2-overlay';
 Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
 
 ```js
-overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+overlay={
+  overlayFactory({
+    spinner: true,
+    styles: {
+      overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'})
+    }
+  })
+}
 ```
 
 ### <a name='caption'>caption - [String | Node]</a>
@@ -200,6 +208,8 @@ const defaultSorted = [{
 }];
 ```
 
+**Note**: Only the first column is sorted currently, see #1083.
+
 ### <a name='defaultSortDirection'>defaultSortDirection - [String]</a>
 Default sort direction when user click on header column at first time, available value is `asc` and `desc`. Default is `desc`.
 
@@ -317,4 +327,20 @@ Following is a shape of `newState`
     newValue
   }
 }
-```
+```
+
+### <a name='onDataSizeChange'>onDataSizeChange - [Function]</a>
+This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
+
+* `dataSize`: The new data size
+
+```js
+handleDataChange = ({ dataSize }) => {
+  this.setState({ rowCount: dataSize });
+}
+
+<BootstrapTable
+  onDataSizeChange={ handleDataChange }
+  ....
+/>
+```

docs/cell-edit.md

@@ -69,7 +69,7 @@ const cellEdit: {
   // omit...
   beforeSaveCell(oldValue, newValue, row, column, done) {
     setTimeout(() => {
-      if (confirm('Do you want to accep this change?')) {
+      if (confirm('Do you want to accept this change?')) {
         done(); // contine to save the changes
       } else {
         done(false); // reject the changes

docs/columns.md

@@ -11,7 +11,9 @@ Available properties in a column object:
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
+* [type](#type)
 * [sort](#sort)
+* [sortValue](#sortValue)
 * [sortFunc](#sortFunc)
 * [sortCaret](#sortCaret)
 * [onSort](#onSort)
@@ -48,6 +50,7 @@ Available properties in a column object:
 * [editorRenderer](#editorRenderer)
 * [filter](#filter)
 * [filterValue](#filterValue)
+* [searchable](#searchable)
 * [csvType](#csvType)
 * [csvFormatter](#csvFormatter)
 * [csvText](#csvText)
@@ -132,11 +135,49 @@ The third argument: `components` have following specified properties:
 ## <a name='formatExtraData'>column.formatExtraData - [Any]</a>
 It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
 
+## <a name='type'>column.type - [String]</a>
+Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`.   
+`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type.
+
 ## <a name='sort'>column.sort - [Bool]</a>
 Enable the column sort via a `true` value given.
 
+## <a name='sortValue'>column.sortValue - [Function]</a>
+`column.sortValue` only work when `column.sort` enabled. This prop allow you to replace the value when table sorting.
+
+For example, consider following data:
+
+```js
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+const data = [{id: 1, type: 2}, {id: 2, type: 1}, {id: 3, type:0}];
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'type',
+  text: 'Job Type'
+  sort: true,
+  formatter: (cell, row) => types[cell]
+}]
+```
+
+In above case, when user try to sort Job Type column which will sort the original value: 0, 1, 2 but we display the type name via [`column.formatter`](#formatter), which will lead confuse because we are sorting by type value instead of type name. So `sortValue` is a way for you to decide what kind of value should be adopted when sorting on a specify column:
+
+```js
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'type',
+  text: 'Job Type'
+  sort: true,
+  formatter: (cell, row) => types[cell],
+  sortValue: (cell, row) => types[cell] // we use type name to sort.
+}]
+```
+
 ## <a name='sortFunc'>column.sortFunc - [Function]</a>
-`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
+`column.sortFunc` only work when `column.sort` enabled. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
 
 ```js
 {
@@ -164,7 +205,7 @@ Enable the column sort via a `true` value given.
 ```
 
 ## <a name='sortCaret'>column.sortCaret - [Function]</a>
-Use`column.sortCaret` to custom the sort caret. This callback function accept two arguments: `order` and `column`
+Use`column.sortCaret` to customize the sort caret. This callback function accept two arguments: `order` and `column`
 
 ```js
 {
@@ -415,7 +456,7 @@ If the events is not listed above, the callback function will only pass the `eve
 {
   // omit...
   headerEvents: {
-    onClick: e => { ... }
+    onClick: (e, column, columnIndex) => { ... }
   }
 }
 ```
@@ -625,7 +666,7 @@ It's also available to custom via a callback function:
 {
   // omit...
   footerEvents: {
-    onClick: e => { ... }
+    onClick: (e, column, columnIndex) => { ... }
   }
 }
 ```
@@ -912,6 +953,9 @@ A final `String` value you want to be filtered.
 }
 ```
 
+## <a name='searchable'>column.searchable - [Boolean]</a>
+Default the column is searchable. Give `false` to disable search functionality on specified column.
+
 ## <a name='csvType'>column.csvType - [Object]</a>
 Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
 

docs/migration.md

@@ -23,7 +23,7 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
 * [`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.
+  * Table Toolkits, like search, csv, column toggle etc.
 
 This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
 

docs/row-expand.md

@@ -2,7 +2,7 @@
 # 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!
+> Default is click to expand/collapse a row. In addition, we don't support any way to change this mechanism!
 
 ## Required
 * [renderer (**required**)](#renderer)
@@ -18,6 +18,8 @@
 * [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [className](#className)
+* [parentClassName](#parentClassName)
 
 ### <a name="renderer">expandRow.renderer - [Function]</a>
 
@@ -25,12 +27,13 @@ Specify the content of expand row, `react-bootstrap-table2` will pass a row obje
 
 #### values
 * **row**
+* **rowIndex**
 
 #### examples
 
 ```js
 const expandRow = {
-  renderer: row => (
+  renderer: (row, rowIndex) => (
     <div>
       <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
       <p>You can render anything here, also you can add additional data on every row object</p>
@@ -165,3 +168,45 @@ const expandRow = {
   expandColumnPosition: 'right'
 };
 ```
+
+### <a name='className'>expandRow.className - [String | Function]</a>
+Apply the custom class name on the expanding row. For example: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  className: 'foo'
+};
+```
+following usage is more flexible way for customing the class name: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'foo';
+    return 'bar';
+  }
+};
+```
+
+### <a name='parentClassName'>expandRow.parentClassName - [String | Function]</a>
+Apply the custom class name on parent row of expanded row. For example: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  parentClassName: 'foo'
+};
+```
+Below case is more flexible way to custom the class name: 
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'foo';
+    return 'bar';
+  }
+};
+```

docs/row-selection.md

@@ -1,6 +1,6 @@
 
 # Row selection
-`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first. 
+`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column. 
 
 ## Required
 * [mode (**required**)](#mode)
@@ -16,10 +16,13 @@
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
+* [selectColumnPosition](#selectColumnPosition)
 * [hideSelectColumn](#hideSelectColumn)
 * [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
+* [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
 
 ### <a name="mode">selectRow.mode - [String]</a>
 
@@ -176,7 +179,7 @@ Provide a callback function which allow you to custom the checkbox/radio box. Th
 ```js
 const selectRow = {
   mode: 'checkbox',
-  selectionRenderer: ({ mode, checked, disabled }) => (
+  selectionRenderer: ({ mode, checked, disabled, rowIndex }) => (
     // ....
   )
 };
@@ -198,6 +201,67 @@ const selectRow = {
 
 > By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
 
+
+### <a name='headerColumnStyle'>selectRow.headerColumnStyle - [Object | Function]</a>
+A way to custome the selection header cell. `headerColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  headerColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  headerColumnStyle:  (status) => (
+    // status available value is checked, indeterminate and unchecked
+    return { backgroundColor: 'blue' };
+  )
+};
+```
+
+### <a name='selectColumnStyle'>selectRow.selectColumnStyle - [Object | Function]</a>
+A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+If a callback function present, you can get below information to custom the selection cell:
+
+* `checked`: Whether current row is seleccted or not
+* `disabled`: Whether current row is disabled or not
+* `rowIndex`: Current row index
+* `rowKey`: Current row key
+
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnStyle:  ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => (
+    // ....
+    return { backgroundColor: 'blue' };
+  )
+};
+```
+
 ### <a name='onSelect'>selectRow.onSelect - [Function]</a>
 This callback function will be called when a row is select/unselect and pass following three arguments:
 `row`, `isSelect`, `rowIndex` and `e`.
@@ -249,6 +313,16 @@ const selectRow = {
 };
 ```
 
+### <a name='selectColumnPosition'>selectRow.selectColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+  mode: 'checkbox',
+  selectColumnPosition: 'right'
+};
+```
+
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 

package.json

@@ -89,7 +89,8 @@
   "jest": {
     "collectCoverageFrom": [
       "packages/*/src/**/*.js",
-      "packages/*/index.js"
+      "packages/*/index.js",
+      "!packages/react-bootstrap-table2-example/**/*.js"
     ],
     "roots": [
       "<rootDir>/packages"

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

@@ -89,7 +89,10 @@ const columns = [
 In the following, we go though all the predefined editors:
 
 ### Dropdown Editor
-Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor.
+Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop.
+
+#### editor.options
+This is most simple case for assign the dropdown options data directly.   
 
 ```js
 import { Type } from 'react-bootstrap-table2-editor';
@@ -119,6 +122,46 @@ const columns = [
 }];
 ```
 
+#### editor.getOptions
+It is much flexible which accept a function and you can assign the dropdown options dynamically.
+
+There are two case for `getOptions`:
+
+* *Synchronous*: Just return the options array in `getOptions` callback function
+* *Asynchronous*: Call `setOptions` function argument when you get the options from remote. 
+
+
+```js
+// Synchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => [.....]
+  }
+}];
+
+// Asynchronous
+
+const columns = [
+  ..., {
+  dataField: 'type',
+  text: 'Job Type',
+  editor: {
+    type: Type.SELECT,
+    getOptions: (setOptions, { row, column }) => {
+      setTimeout(() => setOptions([...]), 1500);
+    }
+  }
+}];
+
+```
+
+[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example.
+
 ### Date Editor
 Date editor is use `<input type="date">`, the configuration is very simple:
 
@@ -132,7 +175,7 @@ const columns = [
     if (typeof cell !== 'object') {
       dateObj = new Date(cell);
     }
-    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+    return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
   },
   editor: {
     type: Type.DATE
@@ -173,16 +216,16 @@ If you feel above predefined editors are not satisfied to your requirement, you
 
 * `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
 * `value`: Current cell value
-* `row`: Current row data 
+* `row`: Current row data
-* `column`: Current column definition 
+* `column`: Current column definition
-* `rowIndex`: Current row index 
+* `rowIndex`: Current row index
 * `columnIndex`: Current column index
 
 > Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
 
 > Note when you want to save value, you can call **editorProps.onUpdate** function
 
-Following is a short example: 
+Following is a short example:
 
 ```js
 class QualityRanger extends React.Component {

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-editor",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "description": "it's the editor addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "scripts": {

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

@@ -1,5 +1,8 @@
+/* eslint disable-next-line: 0 */
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
+/* eslint camelcase: 0 */
+/* eslint react/no-unused-prop-types: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
@@ -43,7 +46,7 @@ export default (
       };
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.cellEdit && isRemoteCellEdit()) {
         if (nextProps.cellEdit.options.errorMessage) {
           this.setState(() => ({
@@ -56,12 +59,13 @@ export default (
     }
 
     handleCellUpdate(row, column, newValue) {
+      const newValueWithType = dataOperator.typeConvert(column.type, newValue);
       const { cellEdit } = this.props;
       const { beforeSaveCell } = cellEdit.options;
       const oldValue = _.get(row, column.dataField);
       const beforeSaveCellDone = (result = true) => {
         if (result) {
-          this.doUpdate(row, column, newValue);
+          this.doUpdate(row, column, newValueWithType);
         } else {
           this.escapeEditing();
         }
@@ -69,7 +73,7 @@ export default (
       if (_.isFunction(beforeSaveCell)) {
         const result = beforeSaveCell(
           oldValue,
-          newValue,
+          newValueWithType,
           row,
           column,
           beforeSaveCellDone
@@ -78,7 +82,7 @@ export default (
           return;
         }
       }
-      this.doUpdate(row, column, newValue);
+      this.doUpdate(row, column, newValueWithType);
     }
 
     doUpdate(row, column, newValue) {

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

@@ -4,6 +4,21 @@ import cs from 'classnames';
 import PropTypes from 'prop-types';
 
 class DropDownEditor extends Component {
+  constructor(props) {
+    super(props);
+    let options = props.options;
+    if (props.getOptions) {
+      options = props.getOptions(
+        this.setOptions.bind(this),
+        {
+          row: props.row,
+          column: props.column
+        }
+      ) || [];
+    }
+    this.state = { options };
+  }
+
   componentDidMount() {
     const { defaultValue, didMount } = this.props;
     this.select.value = defaultValue;
@@ -11,12 +26,16 @@ class DropDownEditor extends Component {
     if (didMount) didMount();
   }
 
+  setOptions(options) {
+    this.setState({ options });
+  }
+
   getValue() {
     return this.select.value;
   }
 
   render() {
-    const { defaultValue, didMount, className, options, ...rest } = this.props;
+    const { defaultValue, didMount, getOptions, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-select', className);
 
     const attr = {
@@ -31,7 +50,7 @@ class DropDownEditor extends Component {
         defaultValue={ defaultValue }
       >
         {
-          options.map(({ label, value }) => (
+          this.state.options.map(({ label, value }) => (
             <option key={ value } value={ value }>{ label }</option>
           ))
         }
@@ -41,6 +60,8 @@ class DropDownEditor extends Component {
 }
 
 DropDownEditor.propTypes = {
+  row: PropTypes.object.isRequired,
+  column: PropTypes.object.isRequired,
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
@@ -52,13 +73,16 @@ DropDownEditor.propTypes = {
       label: PropTypes.string,
       value: PropTypes.any
     }))
-  ]).isRequired,
+  ]),
-  didMount: PropTypes.func
+  didMount: PropTypes.func,
+  getOptions: PropTypes.func
 };
 DropDownEditor.defaultProps = {
   className: '',
   defaultValue: '',
   style: {},
-  didMount: undefined
+  options: [],
+  didMount: undefined,
+  getOptions: undefined
 };
 export default DropDownEditor;

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

@@ -2,6 +2,7 @@
 /* eslint no-return-assign: 0 */
 /* eslint class-methods-use-this: 0 */
 /* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 import cs from 'classnames';
 import PropTypes from 'prop-types';
@@ -51,7 +52,11 @@ export default (_, onStartEdit) =>
       };
     }
 
-    componentWillReceiveProps({ message }) {
+    componentWillUnmount() {
+      this.clearTimer();
+    }
+
+    UNSAFE_componentWillReceiveProps({ message }) {
       if (_.isDefined(message)) {
         this.createTimer();
         this.setState(() => ({
@@ -60,10 +65,6 @@ export default (_, onStartEdit) =>
       }
     }
 
-    componentWillUnmount() {
-      this.clearTimer();
-    }
-
     clearTimer() {
       if (this.indicatorTimer) {
         clearTimeout(this.indicatorTimer);
@@ -201,7 +202,7 @@ export default (_, onStartEdit) =>
       if (_.isFunction(column.editorRenderer)) {
         editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex);
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
-        editor = <DropdownEditor { ...editorProps } />;
+        editor = <DropdownEditor { ...editorProps } row={ row } column={ column } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
         editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {

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

@@ -117,7 +117,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().componentWillReceiveProps({});
+        wrapper.instance().UNSAFE_componentWillReceiveProps({});
       });
 
       it('should not set state.message', () => {
@@ -138,7 +138,7 @@ describe('CellEditContext', () => {
         wrapper = shallow(shallowContext());
         wrapper.setState(initialState);
         wrapper.render();
-        wrapper.instance().componentWillReceiveProps({
+        wrapper.instance().UNSAFE_componentWillReceiveProps({
           cellEdit: cellEditFactory(defaultCellEdit)
         });
       });
@@ -164,7 +164,7 @@ describe('CellEditContext', () => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
           wrapper.render();
-          wrapper.instance().componentWillReceiveProps({
+          wrapper.instance().UNSAFE_componentWillReceiveProps({
             cellEdit: cellEditFactory({
               ...defaultCellEdit,
               errorMessage: message
@@ -190,7 +190,7 @@ describe('CellEditContext', () => {
         beforeEach(() => {
           wrapper = shallow(shallowContext(defaultCellEdit, true));
           wrapper.setState(initialState);
-          wrapper.instance().componentWillReceiveProps({
+          wrapper.instance().UNSAFE_componentWillReceiveProps({
             cellEdit: cellEditFactory({ ...defaultCellEdit })
           });
           wrapper.update();

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

@@ -9,6 +9,7 @@ const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
 const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const toolkitStylePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -43,7 +44,13 @@ const loaders = [{
 }, {
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
+  include: [
+    storyPath,
+    sourceStylePath,
+    paginationStylePath,
+    filterStylePath,
+    toolkitStylePath
+  ],
 }, {
   test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader?limit=100000',

packages/react-bootstrap-table2-example/examples/basic/exposed-function.js

@@ -45,8 +45,12 @@ class ExposedFunctionTable extends React.Component {
     console.log(this.node.table.props.data);
   }
 
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
   handleGetSelectedData = () => {
-    console.log(this.node.selectionContext.state.selected);
+    console.log(this.node.selectionContext.selected);
   }
 
   handleGetExpandedData = () => {
@@ -117,7 +121,7 @@ export default class ExposedFunctionTable extends React.Component {
   }
 
   handleGetSelectedData = () => {
-    console.log(this.node.selectionContext.state.selected);
+    console.log(this.node.selectionContext.selected);
   }
 
   handleGetExpandedData = () => {

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

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

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

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

packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js

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

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

@@ -18,6 +18,11 @@ class QualityRanger extends React.Component {
   static defaultProps = {
     value: 0
   }
+
+  componentDidMount() {
+    this.range.focus();
+  }
+
   getValue() {
     return parseInt(this.range.value, 10);
   }

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

@@ -23,7 +23,7 @@ const columns = [{
     if (typeof cell !== 'object') {
       dateObj = new Date(cell);
     }
-    return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+    return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
   },
   editor: {
     type: Type.DATE
@@ -48,7 +48,7 @@ const columns = [{
     if (typeof cell !== 'object') {
       dateObj = new Date(cell);
     }
-    return \`$\{('0' + dateObj.getDate()).slice(-2)}/$\{('0' + (dateObj.getMonth() + 1)).slice(-2)}/$\{dateObj.getFullYear()}\`;
+    return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
   },
   editor: {
     type: Type.DATE

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

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

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

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

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const selectOptionsArr = [{
+  value: 0,
+  label: 'good'
+}, {
+  value: 1,
+  label: 'Bad'
+}, {
+  value: 2,
+  label: 'unknown'
+}];
+
+const columns1 = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+const columns2 = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: selectOptionsArr
+  })
+}];
+
+const columns3 = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: () => selectOptionsArr
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+// Object map options
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+// Array options
+const selectOptionsArr = [{
+  value: 0,
+  label: 'good'
+}, {
+  value: 1,
+  label: 'Bad'
+}, {
+  value: 2,
+  label: 'unknown'
+}];
+
+const columns1 = [..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+<BootstrapTable keyField='id' data={ products } columns={ columns1 } filter={ filterFactory() } />
+
+const columns2 = [..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: selectOptionsArr
+  })
+}];
+<BootstrapTable keyField='id' data={ products } columns={ columns2 } filter={ filterFactory() } />
+
+const columns3 = [..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+  filter: selectFilter({
+    options: () => selectOptionsArr
+  })
+}];
+<BootstrapTable keyField='id' data={ products } columns={ columns3 } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h2>Options as an object</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns1 }
+      filter={ filterFactory() }
+    />
+    <h2>Options as an array</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns2 }
+      filter={ filterFactory() }
+    />
+    <h2>Options as a function which return an array</h2>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns3 }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

@@ -0,0 +1,135 @@
+/* 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 columnsdt = [{
+  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 CustomToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles
+}) => (
+  <div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
+    {
+      columns
+        .map(column => ({
+          ...column,
+          toggle: toggles[column.dataField]
+        }))
+        .map(column => (
+          <button
+            type="button"
+            key={ column.dataField }
+            className={ \`btn btn-warning \${column.toggle ? 'active' : ''}\` }
+            data-toggle="button"
+            aria-pressed={ column.toggle ? 'true' : 'false' }
+            onClick={ () => onColumnToggle(column.dataField) }
+          >
+            { column.text }
+          </button>
+        ))
+    }
+  </div>
+);
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columnsdt }
+  columnToggle
+>
+  {
+    props => (
+      <div>
+        <CustomToggleList { ...props.columnToggleProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const CustomToggleList = ({
+  columns,
+  onColumnToggle,
+  toggles
+}) => (
+  <div className="btn-group btn-group-toggle btn-group-vertical" data-toggle="buttons">
+    {
+      columns
+        .map(column => ({
+          ...column,
+          toggle: toggles[column.dataField]
+        }))
+        .map(column => (
+          <button
+            type="button"
+            key={ column.dataField }
+            className={ `btn btn-warning ${column.toggle ? 'active' : ''}` }
+            data-toggle="button"
+            aria-pressed={ column.toggle ? 'true' : 'false' }
+            onClick={ () => onColumnToggle(column.dataField) }
+          >
+            { column.text }
+          </button>
+        ))
+    }
+  </div>
+);
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columnsdt }
+      columnToggle
+    >
+      {
+        props => (
+          <div>
+            <CustomToggleList { ...props.columnToggleProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

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

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

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

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

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

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

@@ -11,141 +11,13 @@ const products = [
   { id: 14, name: 'Item 14', price: 14.5, inStock: true }
 ];
 
-const columns = [
-  {
-    dataField: 'id',
-    text: 'Product ID'
-  },
-  {
-    dataField: 'name',
-    text: 'Product Name'
-  },
-  {
-    dataField: 'price',
-    text: 'Product Price'
-  },
-  {
-    dataField: 'inStock',
-    text: 'In Stock',
-    formatter: (cellContent, row) => (
-      <div className="checkbox disabled">
-        <label>
-          <input type="checkbox" checked={ row.inStock } disabled />
-        </label>
-      </div>
-    )
-  },
-  {
-    dataField: 'df1',
-    isDummyField: true,
-    text: 'Action 1',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  },
-  {
-    dataField: 'df2',
-    isDummyField: true,
-    text: 'Action 2',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  }
-];
-
 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'
-  },
-  {
-    dataField: 'inStock',
-    text: 'In Stock',
-    formatter: (cellContent, row) => (
-      <div className="checkbox disabled">
-        <label>
-          <input type="checkbox" checked={ row.inStock } disabled />
-        </label>
-      </div>
-    )
-  },
-  {
-    dataField: 'df1',
-    isDummyField: true,
-    text: 'Action 1',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  },
-  {
-    dataField: 'df2',
-    isDummyField: true,
-    text: 'Action 2',
-    formatter: (cellContent, row) => {
-      if (row.inStock) {
-        return (
-          <h5>
-            <span className="label label-success"> Available</span>
-          </h5>
-        );
-      }
-      return (
-        <h5>
-          <span className="label label-danger"> Backordered</span>
-        </h5>
-      );
-    }
-  }
-];
-
 class ProductList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { products };
+    this.state = { products, count: 0 };
   }
 
   toggleInStock = () => {
@@ -163,17 +35,96 @@ class ProductList extends React.Component {
   };
 
   render() {
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        formatter: (cell, row, rowIndex, extraData) => (
+          <div>
+            <span>ID: {row.id}</span>
+            <br />
+            <span>state: {extraData}</span>
+          </div>
+        ),
+        formatExtraData: this.state.count
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      },
+      {
+        dataField: 'price',
+        text: 'Product Price'
+      },
+      {
+        dataField: 'inStock',
+        text: 'In Stock',
+        formatter: (cellContent, row) => (
+          <div className="checkbox disabled">
+            <label>
+              <input type="checkbox" checked={ row.inStock } disabled />
+            </label>
+          </div>
+        )
+      },
+      {
+        dataField: 'df1',
+        isDummyField: true,
+        text: 'Action 1',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      },
+      {
+        dataField: 'df2',
+        isDummyField: true,
+        text: 'Action 2',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      }
+    ];
+
     return (
       <div>
-        <h1 className="h2">Products</h1>
+        <h3>Action 1 and Action 2 are dummy column</h3>
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+        <button
+          className="btn btn-success"
+          onClick={ () => this.setState(() => ({ count: this.state.count + 1 })) }
+        >
+          Click me to Increase counter
+        </button>
         <BootstrapTable
           keyField="id"
           data={ this.state.products }
           columns={ columns }
         />
-        <button onClick={ this.toggleInStock } className="btn btn-primary">
+        <Code>{ sourceCode }</Code>
-          Toggle item 13 stock status
-        </button>
       </div>
     );
   }
@@ -183,7 +134,7 @@ class ProductList extends React.Component {
 class ProductList extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { products };
+    this.state = { products, count: 0 };
   }
 
   toggleInStock = () => {
@@ -200,13 +151,95 @@ class ProductList extends React.Component {
     this.setState(curr => ({ ...curr, products: newProducts }));
   };
 
+  counter = () => {
+    this.setState(curr => ({ ...curr, count: this.state.count + 1 }));
+  }
+
   render() {
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        formatter: (cell, row, rowIndex, extraData) => (
+          <div>
+            <span>ID: {row.id}</span>
+            <br />
+            <span>Counter: {extraData}</span>
+          </div>
+        ),
+        formatExtraData: this.state.count
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      },
+      {
+        dataField: 'price',
+        text: 'Product Price'
+      },
+      {
+        dataField: 'inStock',
+        text: 'In Stock',
+        formatter: (cellContent, row) => (
+          <div className="checkbox disabled">
+            <label>
+              <input type="checkbox" checked={ row.inStock } disabled />
+            </label>
+          </div>
+        )
+      },
+      {
+        dataField: 'df1',
+        isDummyField: true,
+        text: 'Action 1',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      },
+      {
+        dataField: 'df2',
+        isDummyField: true,
+        text: 'Action 2',
+        formatter: (cellContent, row) => {
+          if (row.inStock) {
+            return (
+              <h5>
+                <span className="label label-success"> Available</span>
+              </h5>
+            );
+          }
+          return (
+            <h5>
+              <span className="label label-danger"> Backordered</span>
+            </h5>
+          );
+        }
+      }
+    ];
+
     return (
       <div>
         <h3>Action 1 and Action 2 are dummy column</h3>
         <button onClick={ this.toggleInStock } className="btn btn-primary">
           Toggle item 13 stock status
         </button>
+        <button
+          className="btn btn-success"
+          onClick={ this.counter }
+        >
+          Click me to Increase counter
+        </button>
         <BootstrapTable
           keyField="id"
           data={ this.state.products }

packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js

@@ -0,0 +1,188 @@
+/* eslint no-param-reassign: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class DummyColumnWithRowExpand extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hoverIdx: null
+    };
+  }
+
+  expandRow = {
+    renderer: () => (
+      <div style={ { width: '100%', height: '20px' } }>Content</div>
+    ),
+    showExpandColumn: true,
+    expandByColumnOnly: true
+  };
+
+  actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+    if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+      return (
+        <div
+          style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
+        />
+      );
+    }
+    return (
+      <div
+        style={ { width: '20px', height: '20px' } }
+      />
+    );
+  }
+
+  rowEvents = {
+    onMouseEnter: (e, row, rowIndex) => {
+      this.setState({ hoverIdx: rowIndex });
+    },
+    onMouseLeave: () => {
+      this.setState({ hoverIdx: null });
+    }
+  }
+
+  rowStyle = (row, rowIndex) => {
+    row.index = rowIndex;
+    const style = {};
+    if (rowIndex % 2 === 0) {
+      style.backgroundColor = 'transparent';
+    } else {
+      style.backgroundColor = 'rgba(54, 163, 173, .10)';
+    }
+    style.borderTop = 'none';
+
+    return style;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }, {
+      text: '',
+      isDummyField: true,
+      formatter: this.actionFormater,
+      formatExtraData: { hoverIdx: this.state.hoverIdx },
+      headerStyle: { width: '50px' },
+      style: { height: '30px' }
+    }];
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          noDataIndication="There is no data"
+          classes="table"
+          rowStyle={ this.rowStyle }
+          rowEvents={ this.rowEvents }
+          expandRow={ this.expandRow }
+        />
+      </div>
+    );
+  }
+}
+`;
+
+export default class DummyColumnWithRowExpand extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      hoverIdx: null
+    };
+  }
+
+  expandRow = {
+    renderer: () => (
+      <div style={ { width: '100%', height: '20px' } }>Content</div>
+    ),
+    showExpandColumn: true,
+    expandByColumnOnly: true
+  };
+
+  actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+    if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+      return (
+        <div
+          style={ { width: '20px', height: '20px', backgroundColor: 'orange' } }
+        />
+      );
+    }
+    return (
+      <div
+        style={ { width: '20px', height: '20px' } }
+      />
+    );
+  }
+
+  rowEvents = {
+    onMouseEnter: (e, row, rowIndex) => {
+      this.setState({ hoverIdx: rowIndex });
+    },
+    onMouseLeave: () => {
+      this.setState({ hoverIdx: null });
+    }
+  }
+
+  rowStyle = (row, rowIndex) => {
+    row.index = rowIndex;
+    const style = {};
+    if (rowIndex % 2 === 0) {
+      style.backgroundColor = 'transparent';
+    } else {
+      style.backgroundColor = 'rgba(54, 163, 173, .10)';
+    }
+    style.borderTop = 'none';
+
+    return style;
+  }
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name'
+    }, {
+      dataField: 'price',
+      text: 'Product Price'
+    }, {
+      isDummyField: true,
+      text: '',
+      formatter: this.actionFormater,
+      formatExtraData: { hoverIdx: this.state.hoverIdx },
+      headerStyle: { width: '50px' },
+      style: { height: '30px' }
+    }];
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          rowStyle={ this.rowStyle }
+          rowEvents={ this.rowEvents }
+          expandRow={ this.expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -36,11 +36,12 @@ const columns = [{
 
 const MyExportCSV = (props) => {
   const handleClick = () => {
-    props.onExport();
+    // passing my custom data
+    props.onExport(products.filter(r => r.id > 2));
   };
   return (
     <div>
-      <button className="btn btn-success" onClick={ handleClick }>Export to CSV</button>
+      <button className="btn btn-success" onClick={ handleClick }>Only export Product ID bigger than 2</button>
     </div>
   );
 };

packages/react-bootstrap-table2-example/examples/csv/export-only-filtered.js

@@ -0,0 +1,102 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator(150);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const { SearchBar } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  exportCSV={ { onlyExportFiltered: true, exportAll: false } }
+  search
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <SearchBar { ...props.searchProps } />
+        <BootstrapTable
+          { ...props.baseProps }
+          pagination={ paginationFactory() }
+          filter={ filterFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+export default () => (
+  <div>
+    <h3>Export all the filtered/searched rows</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      exportCSV={ { onlyExportFiltered: true, exportAll: false } }
+      search
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <SearchBar { ...props.searchProps } />
+            <BootstrapTable
+              { ...props.baseProps }
+              pagination={ paginationFactory() }
+              filter={ filterFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/data/data-change-listener.js

@@ -0,0 +1,151 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter()
+}];
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Case1 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+class Case2 extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+`;
+
+const products1 = productsGenerator(8);
+class WithoutPaginationCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products1.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Without Pagination Case</h3>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products1 }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode2 }</Code>
+      </div>
+    );
+  }
+}
+
+const products2 = productsGenerator(88);
+class WithPaginationCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { rowCount: products2.length };
+  }
+
+  handleDataChange = ({ dataSize }) => {
+    this.setState({ rowCount: dataSize });
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>Without Pagination Case</h3>
+        <h5>Row Count:<span className="badge">{ this.state.rowCount }</span></h5>
+        <BootstrapTable
+          onDataSizeChange={ this.handleDataChange }
+          keyField="id"
+          data={ products2 }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+        />
+        <Code>{ sourceCode1 }</Code>
+      </div>
+    );
+  }
+}
+
+export default () => (
+  <div>
+    <WithoutPaginationCase />
+    <WithPaginationCase />
+  </div>
+);
+

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-filter.js

@@ -0,0 +1,70 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import { productsGenerator } from 'utils/common';
+
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter({
+        defaultValue: '1'
+      })
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter()
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <BootstrapTable
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        filter={ filterFactory() }
+      />
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: productsGenerator(3)
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator(14)
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-search.js

@@ -0,0 +1,80 @@
+/* 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 { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name'
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price'
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <ToolkitProvider
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        search={ { defaultSearch: '2101' } }
+      >
+        {
+          toolkitprops => (
+            <div>
+              <SearchBar { ...toolkitprops.searchProps } />
+              <BootstrapTable
+                striped
+                hover
+                { ...toolkitprops.baseProps }
+              />
+            </div>
+          )
+        }
+      </ToolkitProvider>
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: productsGenerator(3)
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator(14)
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-filter.js

@@ -0,0 +1,68 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import { productsGenerator } from 'utils/common';
+
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter()
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <BootstrapTable
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        filter={ filterFactory() }
+      />
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: []
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator()
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-pagination-and-filter.js

@@ -0,0 +1,72 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import { productsGenerator } from 'utils/common';
+
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter({
+        defaultValue: '6'
+      })
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter()
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <BootstrapTable
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        filter={ filterFactory() }
+        pagination={ paginationFactory() }
+      />
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: productsGenerator(60)
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator(14)
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-search.js

@@ -0,0 +1,80 @@
+/* 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 { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const ProductList = (props) => {
+  const columns = [
+    {
+      dataField: 'id',
+      text: 'Product ID'
+    },
+    {
+      dataField: 'name',
+      text: 'Product Name'
+    },
+    {
+      dataField: 'price',
+      text: 'Product Price'
+    }
+  ];
+
+  return (
+    <div style={ { paddingTop: '20px' } }>
+      <h1 className="h2">Products</h1>
+      <ToolkitProvider
+        keyField="id"
+        data={ props.products }
+        columns={ columns }
+        search
+      >
+        {
+          toolkitprops => (
+            <div>
+              <SearchBar { ...toolkitprops.searchProps } />
+              <BootstrapTable
+                striped
+                hover
+                { ...toolkitprops.baseProps }
+              />
+            </div>
+          )
+        }
+      </ToolkitProvider>
+    </div>
+  );
+};
+
+export default class DataContainer extends React.Component {
+  state = {
+    products: []
+  };
+
+  loadData = () => {
+    this.setState({
+      products: productsGenerator()
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button
+          onClick={ this.loadData }
+          style={ {
+            fontSize: '20px',
+            position: 'absolute',
+            left: '200px',
+            top: '40px'
+          } }
+        >
+          Load Data
+        </button>
+        <ProductList products={ this.state.products } />
+      </div>
+    );
+  }
+}

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

@@ -12,7 +12,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   footerEvents: {
-    onClick: () => alert('Click on Product ID footer column')
+    onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
   },
   footer: 'Footer 1'
 }, {
@@ -32,7 +32,7 @@ const columns = [{
     dataField: 'id',
     text: 'Product ID',
     footerEvents: {
-      onClick: () => alert('Click on Product ID footer column')
+      onClick: (e, column, columnIndex) => alert('Click on Product ID footer column')
     },
     footer: 'Footer 1'
   }, {

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

@@ -12,7 +12,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   headerEvents: {
-    onClick: () => alert('Click on Product ID header column')
+    onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
   }
 }, {
   dataField: 'name',
@@ -29,7 +29,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   headerEvents: {
-    onClick: () => alert('Click on Product ID header column')
+    onClick: (e, column, columnIndex) => alert('Click on Product ID header column')
   }
 }, {
   dataField: 'name',

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

@@ -36,7 +36,7 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot
       columns={ columns }
       pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
       onTableChange={ onTableChange }
-      overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+      overlay={ overlayFactory({ spinner: true, styles: { overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'}) } }) }
     />
     <Code>{ sourceCode }</Code>
   </div>
@@ -101,7 +101,12 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot
       columns={ columns }
       pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
       onTableChange={ onTableChange }
-      overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+      overlay={
+        overlayFactory({
+          spinner: true,
+          styles: { overlay: base => ({ ...base, background: 'rgba(255, 0, 0, 0.5)' }) }
+        })
+      }
     />
     <Code>{ sourceCode }</Code>
   </div>

packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js

@@ -0,0 +1,159 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(40);
+const { SearchBar } = Search;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsGenerator(17) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <ToolkitProvider
+          keyField="id"
+          columns={ columns }
+          data={ this.state.products }
+          search
+        >
+          {
+            toolkitprops => (
+              <div>
+                <SearchBar { ...toolkitprops.searchProps } />
+                <BootstrapTable
+                  striped
+                  hover
+                  { ...toolkitprops.baseProps }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </ToolkitProvider>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsGenerator(17) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <ToolkitProvider
+          keyField="id"
+          columns={ columns }
+          data={ this.state.products }
+          search
+        >
+          {
+            toolkitprops => (
+              <div>
+                <SearchBar { ...toolkitprops.searchProps } />
+                <BootstrapTable
+                  striped
+                  hover
+                  { ...toolkitprops.baseProps }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </ToolkitProvider>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}

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

@@ -74,7 +74,7 @@ const options = {
   // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
   firstPageText: 'First',
   prePageText: 'Back',
-  nextPageText: 'Next',
+  nextPageText: <span>Next</span>,
   lastPageText: 'Last',
   nextPageTitle: 'First page',
   prePageTitle: 'Pre page',

packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js

@@ -0,0 +1,181 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(21);
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 0
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+  0: 'good',
+  1: 'Bad',
+  2: 'unknown'
+};
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions[cell],
+  filter: selectFilter({
+    options: selectOptions,
+    defaultValue: 0
+  })
+}];
+
+class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsQualityGenerator(40, 7) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ this.state.products }
+              columns={ columns }
+              filter={ filterFactory() }
+              { ...paginationTableProps }
+            />
+          </div>
+        </div>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+      </div >
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  state = { products }
+
+  loadData = () => {
+    this.setState({ products: productsQualityGenerator(40, 7) });
+  }
+
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: this.state.products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ this.state.products }
+              columns={ columns }
+              filter={ filterFactory() }
+              { ...paginationTableProps }
+            />
+          </div>
+        </div>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/pagination/pagination-with-dynamic-data.js

@@ -0,0 +1,150 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+class BookList extends React.Component {
+  state = {
+    books: [
+      { id: '1', name: 'Book 1' },
+      { id: '2', name: 'Book 2' },
+      { id: '3', name: 'Book 3' },
+      { id: '4', name: 'Book 4' },
+      { id: '5', name: 'Book 5' },
+      { id: '6', name: 'Book 6' }
+    ]
+  };
+
+  deleteBookWithId = () => {
+    const lastOneId = this.state.books.length;
+    const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
+    this.setState({ books: updatedBooks });
+  };
+
+  addBook = () => {
+    const lastOneId = this.state.books.length + 1;
+    this.setState({ books: [...this.state.books, {
+      id: \`$\{lastOneId}\`, name: \`Book $\{lastOneId}\`
+    }] });
+  }
+
+  render() {
+    const options = {
+      // pageStartIndex: 0,
+      sizePerPage: 5,
+      hideSizePerPage: true,
+      hidePageListOnlyOnePage: true
+    };
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        Cell: row => (
+          <div>
+            <span title={ row.value }>{ row.value }</span>
+          </div>
+        )
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      }
+    ];
+
+    return (
+      <React.Fragment>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.books }
+          columns={ columns }
+          pagination={ paginationFactory(options) }
+        />
+        <button className="btn btn-default" onClick={ () => this.deleteBookWithId() }>
+          delete last one book
+        </button>
+        <button className="btn btn-default" onClick={ () => this.addBook() }>
+          Add a book to the end
+        </button>
+        <Code>{ sourceCode }</Code>
+      </React.Fragment>
+    );
+  }
+`;
+
+export default class BookList extends React.Component {
+  state = {
+    books: [
+      { id: '1', name: 'Book 1' },
+      { id: '2', name: 'Book 2' },
+      { id: '3', name: 'Book 3' },
+      { id: '4', name: 'Book 4' },
+      { id: '5', name: 'Book 5' },
+      { id: '6', name: 'Book 6' },
+      { id: '7', name: 'Book 6' },
+      { id: '8', name: 'Book 6' },
+      { id: '9', name: 'Book 6' },
+      { id: '10', name: 'Book 6' },
+      { id: '11', name: 'Book 6' }
+    ]
+  };
+
+  deleteBookWithId = () => {
+    const lastOneId = this.state.books.length;
+    const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
+    this.setState({ books: updatedBooks });
+  };
+
+  addBook = () => {
+    const lastOneId = this.state.books.length + 1;
+    this.setState({ books: [...this.state.books, {
+      id: `${lastOneId}`, name: `Book ${lastOneId}`
+    }] });
+  }
+
+  render() {
+    const options = {
+      // pageStartIndex: 0,
+      sizePerPage: 5,
+      hideSizePerPage: true,
+      hidePageListOnlyOnePage: true
+    };
+    const columns = [
+      {
+        dataField: 'id',
+        text: 'Product ID',
+        Cell: row => (
+          <div>
+            <span title={ row.value }>{ row.value }</span>
+          </div>
+        )
+      },
+      {
+        dataField: 'name',
+        text: 'Product Name'
+      }
+    ];
+
+    return (
+      <React.Fragment>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.books }
+          columns={ columns }
+          pagination={ paginationFactory(options) }
+        />
+        <button className="btn btn-default" onClick={ () => this.deleteBookWithId() }>
+          delete last one book
+        </button>
+        <button className="btn btn-default" onClick={ () => this.addBook() }>
+          Add a book to the end
+        </button>
+        <Code>{ sourceCode }</Code>
+      </React.Fragment>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js

@@ -0,0 +1,107 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+<PaginationProvider
+  pagination={ paginationFactory(options) }
+>
+  {
+    ({
+      paginationProps,
+      paginationTableProps
+    }) => (
+      <div>
+        <PaginationTotalStandalone
+          { ...paginationProps }
+        />
+        <PaginationListStandalone
+          { ...paginationProps }
+        />
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          { ...paginationTableProps }
+        />
+      </div>
+    )
+  }
+</PaginationProvider>
+`;
+
+const options = {
+  custom: true,
+  totalSize: products.length
+};
+
+export default class StandalonePaginationList extends React.Component {
+  render() {
+    return (
+      <div>
+        <PaginationProvider
+          pagination={ paginationFactory(options) }
+        >
+          {
+            ({
+              paginationProps,
+              paginationTableProps
+            }) => (
+              <div>
+                <PaginationTotalStandalone
+                  { ...paginationProps }
+                />
+                <PaginationListStandalone
+                  { ...paginationProps }
+                />
+                <BootstrapTable
+                  keyField="id"
+                  data={ products }
+                  columns={ columns }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js

@@ -84,6 +84,7 @@ export default class StandaloneSizePerPage extends React.Component {
               <div>
                 <SizePerPageDropdownStandalone
                   { ...paginationProps }
+                  btnContextual="btn btn-primary"
                 />
                 <BootstrapTable
                   keyField="id"

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

@@ -43,6 +43,7 @@ const columns = [{
 }];
 
 const expandRow = {
+  onlyOneExpanding: true,
   renderer: row => (
     <div>
       <p>{ \`This Expand row is belong to rowKey $\{row.id}\` }</p>

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

@@ -0,0 +1,106 @@
+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 expandRow1 = {
+  className: 'expanding-foo',
+  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 expandRow2 = {
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'expanding-foo';
+    return 'expanding-bar';
+  },
+  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 sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  className: 'expanding-foo',
+  renderer: row => (
+    <div>.....</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  className: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'expanding-foo';
+    return 'expanding-bar';
+  },
+  renderer: row => (
+    <div>...</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow1 }
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow2 }
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

@@ -18,9 +18,9 @@ const columns = [{
 }];
 
 const expandRow = {
-  renderer: row => (
+  renderer: (row, rowIndex) => (
     <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+      <p>{ `This Expand row is belong to rowKey ${row.id} and index: ${rowIndex}` }</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>

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

@@ -0,0 +1,106 @@
+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 expandRow1 = {
+  parentClassName: 'parent-expand-foo',
+  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 expandRow2 = {
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'parent-expand-foo';
+    return 'parent-expand-bar';
+  },
+  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 sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  parentClassName: 'parent-expand-foo',
+  renderer: row => (
+    <div>.....</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = // omit...
+
+const expandRow = {
+  parentClassName: (isExpanded, row, rowIndex) => {
+    if (rowIndex > 2) return 'parent-expand-foo';
+    return 'parent-expand-bar';
+  },
+  renderer: row => (
+    <div>...</div>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  expandRow={ expandRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow1 }
+    />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      expandRow={ expandRow2 }
+    />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

@@ -0,0 +1,111 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(2);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: {
+    backgroundColor: 'blue'
+  }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: {
+    backgroundColor: 'blue'
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: (status) => {
+    if (status === 'checked') {
+      return {
+        backgroundColor: 'yellow'
+      };
+    } else if (status === 'indeterminate') {
+      return {
+        backgroundColor: 'pink'
+      };
+    } else if (status === 'unchecked') {
+      return {
+        backgroundColor: 'grey'
+      };
+    }
+    return {};
+  }
+};
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  headerColumnStyle: (status) => {
+    if (status === 'checked') {
+      return {
+        backgroundColor: 'yellow'
+      };
+    } else if (status === 'indeterminate') {
+      return {
+        backgroundColor: 'pink'
+      };
+    } else if (status === 'unchecked') {
+      return {
+        backgroundColor: 'grey'
+      };
+    }
+    return {};
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

@@ -0,0 +1,110 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(2);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow1 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: {
+    backgroundColor: 'grey'
+  }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: {
+    backgroundColor: 'grey'
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+const selectRow2 = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => {
+    if (checked) {
+      return {
+        backgroundColor: 'yellow'
+      };
+    }
+    return {
+      backgroundColor: 'pink'
+    };
+  }
+};
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  selectColumnStyle: ({
+    checked,
+    disabled,
+    rowIndex,
+    rowKey
+  }) => {
+    if (checked) {
+      return {
+        backgroundColor: 'yellow'
+      };
+    }
+    return {
+      backgroundColor: 'pink'
+    };
+  }
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow1 } />
+    <Code>{ sourceCode1 }</Code>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow2 } />
+    <Code>{ sourceCode2 }</Code>
+  </div>
+);

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

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

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

@@ -0,0 +1,116 @@
+/* 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 { 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'
+}];
+
+// Implement startWith instead of contain 
+function customMatchFunc({
+  searchText,
+  value,
+  column,
+  row
+}) {
+  if (typeof value !== 'undefined') {
+    return value.startsWith(searchText);
+  }
+  return false;
+}
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search={ { customMatchFunc } }
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+`;
+
+// Implement startWith instead of contain 
+function customMatchFunc({
+  searchText,
+  value,
+  column,
+  row
+}) {
+  if (typeof value !== 'undefined') {
+    return `${value}`.toLowerCase().startsWith(searchText.toLowerCase());
+  }
+  return false;
+}
+
+export default () => (
+  <div>
+    <h1>Custom a search match function by startWith instead of contain</h1>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search={ { onColumnMatch: customMatchFunc } }
+    >
+      {
+        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/searchable-column.js

@@ -0,0 +1,87 @@
+/* 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',
+  searchable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  searchable: false
+}];
+
+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',
+  searchable: false
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  searchable: false
+}];
+
+<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>Column name and price is  unsearchable</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,78 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { jobsGenerator1 } from 'utils/common';
+
+const jobs = jobsGenerator1(8);
+
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  sort: true,
+  formatter: (cell, row) => types[cell],
+  sortValue: (cell, row) => types[cell]
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name'
+}, {
+  dataField: 'owner',
+  text: 'Job Owner'
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  sort: true,
+  formatter: (cell, row) => types[cell],
+  sortValue: (cell, row) => types[cell]
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default class Test extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { data: jobs };
+  }
+
+  handleClick = () => {
+    this.setState(() => {
+      const newProducts = jobsGenerator1(21);
+      return {
+        data: newProducts
+      };
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleClick }>Change Data</button>
+        <BootstrapTable keyField="id" data={ this.state.data } columns={ columns } />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.15",
+  "version": "1.0.32",
   "description": "",
   "main": "index.js",
   "private": true,

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

@@ -29,10 +29,15 @@ export const withOnSale = rows => rows.map((row) => {
   return row;
 });
 
-export const productsQualityGenerator = (quantity = 5) =>
+export const withRandomPrice = rows => rows.map((row) => {
+  row.price = Math.floor((Math.random() * 10) + 2000);
+  return row;
+});
+
+export const productsQualityGenerator = (quantity = 5, factor = 0) =>
   Array.from({ length: quantity }, (value, index) => ({
-    id: index,
+    id: index + factor,
-    name: `Item name ${index}`,
+    name: `Item name ${index + factor}`,
     quality: index % 3
   }));
 
@@ -69,8 +74,9 @@ const endDate = new Date();
 export const stockGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,
-    name: `Todo item ${index}`,
+    name: `Stock Name ${index}`,
     price: Math.floor((Math.random() * 2) + 1),
+    visible: Math.random() > 0.5,
     inStockDate:
       new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
   }));

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

@@ -20,6 +20,8 @@ import TabIndexCellTable from 'examples/basic/tabindex-column';
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
 import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
 import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
+import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
+import ToolkitsTable from 'examples/bootstrap4/toolkits';
 
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
@@ -33,6 +35,7 @@ import ColumnEventTable from 'examples/columns/column-event-table';
 import ColumnHiddenTable from 'examples/columns/column-hidden-table';
 import ColumnAttrsTable from 'examples/columns/column-attrs-table';
 import DummyColumnTable from 'examples/columns/dummy-column-table';
+import RowExpandWithFormattedDummyColumn from 'examples/columns/row-expand-with-formatted-dummy-column.js';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -65,6 +68,7 @@ import TextFilterCaseSensitive from 'examples/column-filter/text-filter-caseSens
 import CustomTextFilter from 'examples/column-filter/custom-text-filter';
 import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
+import ConfigureSelectFilterOptions from 'examples/column-filter/select-filter-option-type';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
 import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
@@ -87,6 +91,7 @@ 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';
 import FilterHooks from 'examples/column-filter/filter-hooks';
+import CustomFilterLogic from 'examples/column-filter/custom-filter-logic';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -99,6 +104,7 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
 import DefaultSortTable from 'examples/sort/default-sort-table';
 import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
 import SortEvents from 'examples/sort/sort-events';
+import CustomSortValue from 'examples/sort/custom-sort-value';
 import CustomSortTable from 'examples/sort/custom-sort-table';
 import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
 import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
@@ -122,10 +128,12 @@ import EditorStyleTable from 'examples/cell-edit/editor-style-table';
 import EditorClassTable from 'examples/cell-edit/editor-class-table';
 import DBClickEditWithSelection from 'examples/cell-edit/dbclick-to-edit-with-selection-table';
 import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
+import DropdownEditorWithDynamicOptionsTable from 'examples/cell-edit/dropdown-editor-with-dynamic-options-table';
 import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
 import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
 import DateEditorTable from 'examples/cell-edit/date-editor-table';
 import CustomEditorTable from 'examples/cell-edit/custom-editor-table';
+import CellEditorWithDataType from 'examples/cell-edit/cell-edit-with-data-type';
 
 // work on row selection
 import SingleSelectionTable from 'examples/row-selection/single-selection';
@@ -139,12 +147,15 @@ import SelectionWithExpansionTable from 'examples/row-selection/selection-with-e
 import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
 import SelectionStyleTable from 'examples/row-selection/selection-style';
 import SelectionClassTable from 'examples/row-selection/selection-class';
+import HeaderStyleTable from 'examples/row-selection/header-style';
 import HideSelectAllTable from 'examples/row-selection/hide-select-all';
 import CustomSelectionTable from 'examples/row-selection/custom-selection';
 import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
 import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
 import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
+import SelectionColumnStyleTable from 'examples/row-selection/select-column-style';
+import SelectionColumnPositionTable from 'examples/row-selection/selection-column-position';
 
 // work on row expand
 import BasicRowExpand from 'examples/row-expand';
@@ -156,10 +167,13 @@ import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
 import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
 import ExpandColumnPosition from 'examples/row-expand/expand-column-position';
 import ExpandHooks from 'examples/row-expand/expand-hooks';
+import ParentRowClassName from 'examples/row-expand/parent-row-classname';
+import ExpandingRowClassName from 'examples/row-expand/expanding-row-classname';
 
 // pagination
 import PaginationTable from 'examples/pagination';
 import PaginationHooksTable from 'examples/pagination/pagination-hooks';
+import PaginationWithDynamicData from 'examples/pagination/pagination-with-dynamic-data';
 import CustomPaginationTable from 'examples/pagination/custom-pagination';
 import CustomPageButtonTable from 'examples/pagination/custom-page-button';
 import CustomSizePerPageOptionTable from 'examples/pagination/custom-size-per-page-option';
@@ -167,8 +181,11 @@ import CustomSizePerPageTable from 'examples/pagination/custom-size-per-page';
 import CustomPageListTable from 'examples/pagination/custom-page-list';
 import StandalonePaginationList from 'examples/pagination/standalone-pagination-list';
 import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page';
+import StandalonePaginationTotal from 'examples/pagination/standalone-pagination-total';
 import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination';
 import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination';
+import CustomePaginationWithFilter from 'examples/pagination/custome-page-list-with-filter';
+import CustomePaginationWithSearch from 'examples/pagination/custom-page-list-with-search';
 
 // search
 import SearchTable from 'examples/search';
@@ -178,6 +195,8 @@ 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';
+import SearchableColumn from 'examples/search/searchable-column';
+import CustomMatchFunction from 'examples/search/custom-match-function';
 
 // CSV
 import ExportCSV from 'examples/csv';
@@ -185,11 +204,19 @@ import CSVFormatter from 'examples/csv/csv-column-formatter';
 import CustomCSVHeader from 'examples/csv/custom-csv-header';
 import HideCSVColumn from 'examples/csv/hide-column';
 import ExportOnlySelected from 'examples/csv/export-only-selected';
+import ExportOnlyFiltered from 'examples/csv/export-only-filtered';
 import CSVColumnType from 'examples/csv/csv-column-type';
 import CustomCSVButton from 'examples/csv/custom-csv-button';
 import ExportCustomData from 'examples/csv/export-custom-data';
 import CustomCSV from 'examples/csv/custom-csv';
 
+// Column toggle
+import BasicColumnToggle from 'examples/column-toggle';
+import DefaultVisibility from 'examples/column-toggle/default-visibility';
+import StylingColumnToggle from 'examples/column-toggle/styling-toggle-list';
+import CustomToggleList from 'examples/column-toggle/custom-toggle-list';
+import ColumnToggleWithFilter from 'examples/column-toggle/column-toggle-with-filter';
+
 // loading overlay
 import EmptyTableOverlay from 'examples/loading-overlay/empty-table-overlay';
 import TableOverlay from 'examples/loading-overlay/table-overlay';
@@ -202,12 +229,21 @@ import RemoteSearch from 'examples/remote/remote-search';
 import RemoteCellEdit from 'examples/remote/remote-celledit';
 import RemoteAll from 'examples/remote/remote-all';
 
+// data
+import DataChangeListener from 'examples/data/data-change-listener';
+import LoadDataWithFilter from 'examples/data/load-data-on-the-fly-with-filter';
+import LoadDataWithDefaultFilter from 'examples/data/load-data-on-the-fly-with-default-filter';
+import LoadDataWithSearch from 'examples/data/load-data-on-the-fly-with-search';
+import LoadDataWithDefaultSearch from 'examples/data/load-data-on-the-fly-with-default-search';
+import LoadDataWithPaginationAndFilter from 'examples/data/load-data-on-the-fly-with-pagination-and-filter';
+
 // css style
 import 'stories/stylesheet/tomorrow.min.css';
 import 'stories/stylesheet/storybook.scss';
 import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
 import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
 import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
+import '../../react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss';
 
 // import bootstrap style by given version
 import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
@@ -230,7 +266,9 @@ storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
   .add('Sort table with bootstrap 4', () => <Bootstrap4DefaultSortTable />)
   .add('Row selection table with bootstrap 4', () => <Bootstrap4RowSelectionTable />)
-  .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />);
+  .add('Pagination table with bootstrap 4', () => <Bootstrap4PaginationTable />)
+  .add('Column Toggle with bootstrap 4', () => <Bootstrap4ColumnToggleTable />)
+  .add('toolkits Table bootstrap 4', () => <ToolkitsTable />);
 
 storiesOf('Work on Columns', module)
   .addDecorator(bootstrapStyle())
@@ -244,7 +282,8 @@ storiesOf('Work on Columns', module)
   .add('Customize Column Class', () => <ColumnClassTable />)
   .add('Customize Column Style', () => <ColumnStyleTable />)
   .add('Customize Column HTML attribute', () => <ColumnAttrsTable />)
-  .add('Dummy Column', () => <DummyColumnTable />);
+  .add('Dummy Column', () => <DummyColumnTable />)
+  .add('Row Expand with Dummy Column Formatter', () => <RowExpandWithFormattedDummyColumn />);
 
 storiesOf('Work on Header Columns', module)
   .addDecorator(bootstrapStyle())
@@ -266,6 +305,7 @@ storiesOf('Column Filter', module)
   .add('Text Filter with Case Sensitive', () => <TextFilterCaseSensitive />)
   // add another filter type example right here.
   .add('Select Filter', () => <SelectFilter />)
+  .add('Configure Select Filter Options', () => <ConfigureSelectFilterOptions />)
   .add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)
   .add('Select Filter with Comparator', () => <SelectFilterComparator />)
   .add('MultiSelect Filter', () => <MultiSelectFilter />)
@@ -289,7 +329,8 @@ storiesOf('Column Filter', module)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
   .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
   .add('Clear All Filters', () => <ClearAllFilters />)
-  .add('Filter Hooks', () => <FilterHooks />);
+  .add('Filter Hooks', () => <FilterHooks />)
+  .add('Implement custom filter logic', () => <CustomFilterLogic />);
 
 storiesOf('Work on Rows', module)
   .addDecorator(bootstrapStyle())
@@ -317,6 +358,7 @@ storiesOf('Sort Table', module)
   .add('Default Sort Table', () => <DefaultSortTable />)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
+  .add('Custom Sort Value', () => <CustomSortValue />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
   .add('Custom Sort Caret', () => <CustomSortCaretTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
@@ -341,10 +383,12 @@ storiesOf('Cell Editing', module)
   .add('Custom Editor Style', () => <EditorStyleTable />)
   .add('DoubleClick to Edit with Selection', () => <DBClickEditWithSelection />)
   .add('Dropdown Editor', () => <DropdownEditorTable />)
+  .add('Dropdown Editor with Dynamic Options', () => <DropdownEditorWithDynamicOptionsTable />)
   .add('Textarea Editor', () => <TextareaEditorTable />)
   .add('Checkbox Editor', () => <CheckboxEditorTable />)
   .add('Date Editor', () => <DateEditorTable />)
-  .add('Custom Editor', () => <CustomEditorTable />);
+  .add('Custom Editor', () => <CustomEditorTable />)
+  .add('Cell Editor with Data Type', () => <CellEditorWithDataType />);
 
 storiesOf('Row Selection', module)
   .addDecorator(bootstrapStyle())
@@ -359,12 +403,15 @@ storiesOf('Row Selection', module)
   .add('Selection without Data', () => <SelectionNoDataTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
+  .add('Custom Selection Column Header Style', () => <HeaderStyleTable />)
   .add('Hide Select All', () => <HideSelectAllTable />)
   .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
-  .add('Hide Selection Column', () => <HideSelectionColumnTable />);
+  .add('Hide Selection Column', () => <HideSelectionColumnTable />)
+  .add('Custom Selection Column Style', () => <SelectionColumnStyleTable />)
+  .add('Selection Column Position', () => <SelectionColumnPositionTable />);
 
 storiesOf('Row Expand', module)
   .addDecorator(bootstrapStyle())
@@ -376,12 +423,15 @@ storiesOf('Row Expand', module)
   .add('Expand Only One Row at The Same Time', () => <ExpandOnlyOne />)
   .add('Custom Expand Indicator', () => <CustomExpandColumn />)
   .add('Expand Column Position', () => <ExpandColumnPosition />)
-  .add('Expand Hooks', () => <ExpandHooks />);
+  .add('Expand Hooks', () => <ExpandHooks />)
+  .add('Custom Parent Row ClassName', () => <ParentRowClassName />)
+  .add('Custom Expanding Row ClassName', () => <ExpandingRowClassName />);
 
 storiesOf('Pagination', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Pagination Table', () => <PaginationTable />)
   .add('Pagination Hooks', () => <PaginationHooksTable />)
+  .add('Pagination with Dynamic Data', () => <PaginationWithDynamicData />)
   .add('Custom Pagination', () => <CustomPaginationTable />)
   .add('Custom Page Button', () => <CustomPageButtonTable />)
   .add('Custom Page List', () => <CustomPageListTable />)
@@ -389,8 +439,11 @@ storiesOf('Pagination', module)
   .add('Custom SizePerPage', () => <CustomSizePerPageTable />)
   .add('Standalone Pagination List', () => <StandalonePaginationList />)
   .add('Standalone SizePerPage Dropdown', () => <StandaloneSizePerPage />)
+  .add('Standalone Pagination Total', () => <StandalonePaginationTotal />)
   .add('Fully Custom Pagination', () => <FullyCustomPaginationTable />)
-  .add('Remote Fully Custom Pagination', () => <RemoteStandalonePaginationTable />);
+  .add('Remote Fully Custom Pagination', () => <RemoteStandalonePaginationTable />)
+  .add('Custom Pagination with Filter', () => <CustomePaginationWithFilter />)
+  .add('Custom Pagination with Search', () => <CustomePaginationWithSearch />);
 
 storiesOf('Table Search', module)
   .addDecorator(bootstrapStyle())
@@ -398,9 +451,19 @@ storiesOf('Table Search', module)
   .add('Clear Search Button', () => <ClearSearchButton />)
   .add('Default Search Table', () => <DefaultSearch />)
   .add('Default Custom Search', () => <DefaultCustomSearch />)
+  .add('Searchable Column', () => <SearchableColumn />)
   .add('Fully Custom Search', () => <FullyCustomSearch />)
-  .add('Search Fromatted Value', () => <SearchFormattedData />)
+  .add('Search Formatted Value', () => <SearchFormattedData />)
-  .add('Custom Search Value', () => <CustomSearchValue />);
+  .add('Custom Search Value', () => <CustomSearchValue />)
+  .add('Custom match function', () => <CustomMatchFunction />);
+
+storiesOf('Column Toggle', module)
+  .addDecorator(bootstrapStyle())
+  .add('Basic Column Toggle', () => <BasicColumnToggle />)
+  .add('Default Visibility', () => <DefaultVisibility />)
+  .add('Styling Column Toggle', () => <StylingColumnToggle />)
+  .add('Custom Column Toggle', () => <CustomToggleList />)
+  .add('Column Toggle with Filter', () => <ColumnToggleWithFilter />);
 
 storiesOf('Export CSV', module)
   .addDecorator(bootstrapStyle())
@@ -409,6 +472,7 @@ storiesOf('Export CSV', module)
   .add('Custom CSV Header', () => <CustomCSVHeader />)
   .add('Hide CSV Column', () => <HideCSVColumn />)
   .add('Only Export Selected Rows', () => <ExportOnlySelected />)
+  .add('Only Export Filtered/Searched Rows', () => <ExportOnlyFiltered />)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
   .add('Export Custom Data', () => <ExportCustomData />)
@@ -427,3 +491,12 @@ storiesOf('Remote', module)
   .add('Remote Search', () => <RemoteSearch />)
   .add('Remote Cell Editing', () => <RemoteCellEdit />)
   .add('Remote All', () => <RemoteAll />);
+
+storiesOf('Data', module)
+  .addDecorator(bootstrapStyle())
+  .add('Data Change Listener', () => <DataChangeListener />)
+  .add('Load data with Filter', () => <LoadDataWithFilter />)
+  .add('Load data with Default Filter', () => <LoadDataWithDefaultFilter />)
+  .add('Load data with Search', () => <LoadDataWithSearch />)
+  .add('Load data with Default Search', () => <LoadDataWithDefaultSearch />)
+  .add('Load data with Filter and Pagination', () => <LoadDataWithPaginationAndFilter />);

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

@@ -0,0 +1,7 @@
+.expanding-foo, .parent-expand-foo {
+  background-color: coral;
+}
+
+.expanding-bar, .parent-expand-bar {
+  background-color: aqua;
+}

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

@@ -12,3 +12,4 @@
 @import "sort/index";
 @import "search/index";
 @import "loading-overlay/index";
+@import "row-expand/index";

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

@@ -115,7 +115,9 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
-> Note, the selectOptions can be an array also: 
+> Note, the selectOptions can be an array or a function which return an array: 
+
+### Array as options
 
 ```js
 const selectOptions = [
@@ -133,6 +135,24 @@ const columns = [
   })
 }];
 ```
+### Function as options
+
+```js
+const selectOptions = [
+  { value: 0, label: 'good' },
+  { value: 1, label: 'Bad' },
+  { value: 2, label: 'unknown' }
+];
+const columns = [
+  ..., {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+  filter: selectFilter({
+    options: () => selectOptions
+  })
+}];
+```
 
 The benifit is `react-bootstrap-table2` will render the select options by the order of array.
 

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-filter",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "it's a column filter addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

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

@@ -18,7 +18,7 @@ const legalComparators = [
 ];
 
 function dateParser(d) {
-  return `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`;
+  return `${d.getUTCFullYear()}-${('0' + (d.getUTCMonth() + 1)).slice(-2)}-${('0' + d.getUTCDate()).slice(-2)}`;
 }
 
 class DateFilter extends Component {
@@ -83,14 +83,27 @@ class DateFilter extends Component {
     return optionTags;
   }
 
-  getDefaultDate() {
+  getDefaultComparator() {
-    let defaultDate = '';
+    const { defaultValue, filterState } = this.props;
-    const { defaultValue } = this.props;
+    if (filterState && filterState.filterVal) {
-    if (defaultValue && defaultValue.date) {
+      return filterState.filterVal.comparator;
-      // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
-      defaultDate = dateParser(new Date(defaultValue.date));
     }
-    return defaultDate;
+    if (defaultValue && defaultValue.comparator) {
+      return defaultValue.comparator;
+    }
+    return '';
+  }
+
+  getDefaultDate() {
+    // Set the appropriate format for the input type=date, i.e. "YYYY-MM-DD"
+    const { defaultValue, filterState } = this.props;
+    if (filterState && filterState.filterVal && filterState.filterVal.date) {
+      return dateParser(filterState.filterVal.date);
+    }
+    if (defaultValue && defaultValue.date) {
+      return dateParser(new Date(defaultValue.date));
+    }
+    return '';
   }
 
   applyFilter(value, comparator, isInitial) {
@@ -122,8 +135,7 @@ class DateFilter extends Component {
       dateStyle,
       className,
       comparatorClassName,
-      dateClassName,
+      dateClassName
-      defaultValue
     } = this.props;
 
     return (
@@ -132,24 +144,35 @@ class DateFilter extends Component {
         className={ `filter date-filter ${className}` }
         style={ style }
       >
-        <select
+        <label
-          ref={ n => this.dateFilterComparator = n }
+          className="filter-label"
-          style={ comparatorStyle }
+          htmlFor={ `date-filter-comparator-${text}` }
-          className={ `date-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
         >
-          { this.getComparatorOptions() }
+          <span className="sr-only">Filter comparator</span>
-        </select>
+          <select
-        <input
+            ref={ n => this.dateFilterComparator = n }
-          ref={ n => this.inputDate = n }
+            id={ `date-filter-comparator-${text}` }
-          className={ `filter date-filter-input form-control ${dateClassName}` }
+            style={ comparatorStyle }
-          style={ dateStyle }
+            className={ `date-filter-comparator form-control ${comparatorClassName}` }
-          type="date"
+            onChange={ this.onChangeComparator }
-          onChange={ this.onChangeDate }
+            defaultValue={ this.getDefaultComparator() }
-          placeholder={ placeholder || `Enter ${text}...` }
+          >
-          defaultValue={ this.getDefaultDate() }
+            { this.getComparatorOptions() }
-        />
+          </select>
+        </label>
+        <label htmlFor={ `date-filter-column-${text}` }>
+          <span className="sr-only">Enter ${ text }</span>
+          <input
+            ref={ n => this.inputDate = n }
+            id={ `date-filter-column-${text}` }
+            className={ `filter date-filter-input form-control ${dateClassName}` }
+            style={ dateStyle }
+            type="date"
+            onChange={ this.onChangeDate }
+            placeholder={ placeholder || `Enter ${text}...` }
+            defaultValue={ this.getDefaultDate() }
+          />
+        </label>
       </div>
     );
   }
@@ -158,6 +181,7 @@ class DateFilter extends Component {
 DateFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   delay: PropTypes.number,
   defaultValue: PropTypes.shape({
     date: PropTypes.oneOfType([PropTypes.object]),
@@ -199,6 +223,7 @@ DateFilter.defaultProps = {
     date: undefined,
     comparator: ''
   },
+  filterState: {},
   withoutEmptyComparatorOption: false,
   comparators: legalComparators,
   placeholder: undefined,

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

@@ -18,8 +18,18 @@ function optionsEquals(currOpts, prevOpts) {
   return Object.keys(currOpts).length === Object.keys(prevOpts).length;
 }
 
-const getSelections = container =>
+const getSelections = (container) => {
-  Array.from(container.selectedOptions).map(item => item.value);
+  if (container.selectedOptions) {
+    return Array.from(container.selectedOptions).map(item => item.value);
+  }
+  const selections = [];
+  const totalLen = container.options.length;
+  for (let i = 0; i < totalLen; i += 1) {
+    const option = container.options.item(i);
+    if (option.selected) selections.push(option.value);
+  }
+  return selections;
+};
 
 class MultiSelectFilter extends Component {
   constructor(props) {
@@ -55,10 +65,18 @@ class MultiSelectFilter extends Component {
       needFilter = true;
     }
     if (needFilter) {
-      this.applyFilter(this.selectInput.value);
+      this.applyFilter(getSelections(this.selectInput));
     }
   }
 
+  getDefaultValue() {
+    const { filterState, defaultValue } = this.props;
+    if (filterState && typeof filterState.filterVal !== 'undefined') {
+      return filterState.filterVal;
+    }
+    return defaultValue;
+  }
+
   getOptions() {
     const optionTags = [];
     const { options, placeholder, column, withoutEmptyOption } = this.props;
@@ -96,6 +114,7 @@ class MultiSelectFilter extends Component {
     const {
       style,
       className,
+      filterState,
       defaultValue,
       onFilter,
       column,
@@ -111,18 +130,25 @@ class MultiSelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
+      <label
-        { ...rest }
+        className="filter-label"
-        ref={ n => this.selectInput = n }
+        htmlFor={ `multiselect-filter-column-${column.text}` }
-        style={ style }
-        multiple
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
       >
-        { this.getOptions() }
+        <span className="sr-only">Filter by {column.text}</span>
-      </select>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={ `multiselect-filter-column-${column.text}` }
+          style={ style }
+          multiple
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ this.getDefaultValue() }
+        >
+          { this.getOptions() }
+        </select>
+      </label>
     );
   }
 }
@@ -131,6 +157,7 @@ MultiSelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
   options: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
   style: PropTypes.object,
@@ -143,6 +170,7 @@ MultiSelectFilter.propTypes = {
 
 MultiSelectFilter.defaultProps = {
   defaultValue: [],
+  filterState: {},
   className: '',
   withoutEmptyOption: false,
   comparator: EQ,

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

@@ -94,6 +94,28 @@ class NumberFilter extends Component {
     onFilter(column, FILTER_TYPE.NUMBER)({ number: value, comparator });
   }
 
+  getDefaultComparator() {
+    const { defaultValue, filterState } = this.props;
+    if (filterState && filterState.filterVal) {
+      return filterState.filterVal.comparator;
+    }
+    if (defaultValue && defaultValue.comparator) {
+      return defaultValue.comparator;
+    }
+    return '';
+  }
+
+  getDefaultValue() {
+    const { defaultValue, filterState } = this.props;
+    if (filterState && filterState.filterVal) {
+      return filterState.filterVal.number;
+    }
+    if (defaultValue && defaultValue.number) {
+      return defaultValue.number;
+    }
+    return '';
+  }
+
   getComparatorOptions() {
     const optionTags = [];
     const { withoutEmptyComparatorOption } = this.props;
@@ -148,7 +170,6 @@ class NumberFilter extends Component {
   render() {
     const { isSelected } = this.state;
     const {
-      defaultValue,
       column,
       options,
       style,
@@ -173,35 +194,53 @@ class NumberFilter extends Component {
         className={ `filter number-filter ${className}` }
         style={ style }
       >
-        <select
+        <label
-          ref={ n => this.numberFilterComparator = n }
+          className="filter-label"
-          style={ comparatorStyle }
+          htmlFor={ `number-filter-comparator-${column.text}` }
-          className={ `number-filter-comparator form-control ${comparatorClassName}` }
-          onChange={ this.onChangeComparator }
-          defaultValue={ defaultValue ? defaultValue.comparator : '' }
         >
-          { this.getComparatorOptions() }
+          <span className="sr-only">Filter comparator</span>
-        </select>
+          <select
+            ref={ n => this.numberFilterComparator = n }
+            style={ comparatorStyle }
+            id={ `number-filter-comparator-${column.text}` }
+            className={ `number-filter-comparator form-control ${comparatorClassName}` }
+            onChange={ this.onChangeComparator }
+            defaultValue={ this.getDefaultComparator() }
+          >
+            { this.getComparatorOptions() }
+          </select>
+        </label>
         {
           options ?
-            <select
+            <label
-              ref={ n => this.numberFilter = n }
+              className="filter-label"
-              style={ numberStyle }
+              htmlFor={ `number-filter-column-${column.text}` }
-              className={ selectClass }
-              onChange={ this.onChangeNumberSet }
-              defaultValue={ defaultValue ? defaultValue.number : '' }
             >
-              { this.getNumberOptions() }
+              <span className="sr-only">{`Select ${column.text}`}</span>
-            </select> :
+              <select
-            <input
+                ref={ n => this.numberFilter = n }
-              ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
-              type="number"
+                style={ numberStyle }
-              style={ numberStyle }
+                className={ selectClass }
-              className={ `number-filter-input form-control ${numberClassName}` }
+                onChange={ this.onChangeNumberSet }
-              placeholder={ placeholder || `Enter ${column.text}...` }
+                defaultValue={ this.getDefaultValue() }
-              onChange={ this.onChangeNumber }
+              >
-              defaultValue={ defaultValue ? defaultValue.number : '' }
+                { this.getNumberOptions() }
-            />
+              </select>
+            </label> :
+            <label htmlFor={ `number-filter-column-${column.text}` }>
+              <span className="sr-only">{`Enter ${column.text}`}</span>
+              <input
+                ref={ n => this.numberFilter = n }
+                id={ `number-filter-column-${column.text}` }
+                type="number"
+                style={ numberStyle }
+                className={ `number-filter-input form-control ${numberClassName}` }
+                placeholder={ placeholder || `Enter ${column.text}...` }
+                onChange={ this.onChangeNumber }
+                defaultValue={ this.getDefaultValue() }
+              />
+            </label>
         }
       </div>
     );
@@ -211,6 +250,7 @@ class NumberFilter extends Component {
 NumberFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   options: PropTypes.arrayOf(PropTypes.number),
   defaultValue: PropTypes.shape({
     number: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -255,6 +295,7 @@ NumberFilter.defaultProps = {
     number: undefined,
     comparator: ''
   },
+  filterState: {},
   withoutEmptyComparatorOption: false,
   withoutEmptyNumberOption: false,
   comparators: legalComparators,

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

@@ -1,6 +1,7 @@
 /* eslint react/require-default-props: 0 */
 /* eslint no-return-assign: 0 */
 /* eslint react/no-unused-prop-types: 0 */
+/* eslint class-methods-use-this: 0 */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { LIKE, EQ } from '../comparison';
@@ -8,15 +9,18 @@ import { FILTER_TYPE } from '../const';
 
 function optionsEquals(currOpts, prevOpts) {
   if (Array.isArray(currOpts)) {
-    for (let i = 0; i < currOpts.length; i += 1) {
+    if (currOpts.length === prevOpts.length) {
-      if (
+      for (let i = 0; i < currOpts.length; i += 1) {
-        currOpts[i].value !== prevOpts[i].value ||
+        if (
-        currOpts[i].label !== prevOpts[i].label
+          currOpts[i].value !== prevOpts[i].value ||
-      ) {
+          currOpts[i].label !== prevOpts[i].label
-        return false;
+        ) {
+          return false;
+        }
       }
+      return true;
     }
-    return currOpts.length === prevOpts.length;
+    return false;
   }
   const keys = Object.keys(currOpts);
   for (let i = 0; i < keys.length; i += 1) {
@@ -41,7 +45,8 @@ class SelectFilter extends Component {
   constructor(props) {
     super(props);
     this.filter = this.filter.bind(this);
-    const isSelected = getOptionValue(props.options, props.defaultValue) !== undefined;
+    this.options = this.getOptions(props);
+    const isSelected = getOptionValue(this.options, this.getDefaultValue()) !== undefined;
     this.state = { isSelected };
   }
 
@@ -66,36 +71,36 @@ class SelectFilter extends Component {
 
   componentDidUpdate(prevProps) {
     let needFilter = false;
-    if (this.props.defaultValue !== prevProps.defaultValue) {
+    const {
+      column,
+      onFilter,
+      defaultValue
+    } = this.props;
+    const nextOptions = this.getOptions(this.props);
+    if (defaultValue !== prevProps.defaultValue) {
       needFilter = true;
-    } else if (!optionsEquals(this.props.options, prevProps.options)) {
+    } else if (!optionsEquals(nextOptions, this.options)) {
+      this.options = nextOptions;
       needFilter = true;
     }
     if (needFilter) {
       const value = this.selectInput.value;
       if (value) {
-        this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
+        onFilter(column, FILTER_TYPE.SELECT)(value);
       }
     }
   }
 
-  getOptions() {
+  getOptions(props) {
-    const optionTags = [];
+    return typeof props.options === 'function' ? props.options(props.column) : props.options;
-    const { options, placeholder, column, withoutEmptyOption } = this.props;
+  }
-    if (!withoutEmptyOption) {
+
-      optionTags.push((
+  getDefaultValue() {
-        <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
+    const { filterState, defaultValue } = this.props;
-      ));
+    if (filterState && typeof filterState.filterVal !== 'undefined') {
+      return filterState.filterVal;
     }
-    if (Array.isArray(options)) {
+    return defaultValue;
-      options.forEach(({ value, label }) =>
-        optionTags.push(<option key={ value } value={ value }>{ label }</option>));
-    } else {
-      Object.keys(options).forEach(key =>
-        optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
-      );
-    }
-    return optionTags;
   }
 
   cleanFiltered() {
@@ -117,6 +122,26 @@ class SelectFilter extends Component {
     this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
   }
 
+  renderOptions() {
+    const optionTags = [];
+    const { options } = this;
+    const { placeholder, column, withoutEmptyOption } = this.props;
+    if (!withoutEmptyOption) {
+      optionTags.push((
+        <option key="-1" value="">{ placeholder || `Select ${column.text}...` }</option>
+      ));
+    }
+    if (Array.isArray(options)) {
+      options.forEach(({ value, label }) =>
+        optionTags.push(<option key={ value } value={ value }>{ label }</option>));
+    } else {
+      Object.keys(options).forEach(key =>
+        optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
+      );
+    }
+    return optionTags;
+  }
+
   render() {
     const {
       style,
@@ -129,6 +154,7 @@ class SelectFilter extends Component {
       withoutEmptyOption,
       caseSensitive,
       getFilter,
+      filterState,
       ...rest
     } = this.props;
 
@@ -136,17 +162,24 @@ class SelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <select
+      <label
-        { ...rest }
+        className="filter-label"
-        ref={ n => this.selectInput = n }
+        htmlFor={ `select-filter-column-${column.text}` }
-        style={ style }
-        className={ selectClass }
-        onChange={ this.filter }
-        onClick={ e => e.stopPropagation() }
-        defaultValue={ defaultValue !== undefined ? defaultValue : '' }
       >
-        { this.getOptions() }
+        <span className="sr-only">Filter by { column.text }</span>
-      </select>
+        <select
+          { ...rest }
+          ref={ n => this.selectInput = n }
+          id={ `select-filter-column-${column.text}` }
+          style={ style }
+          className={ selectClass }
+          onChange={ this.filter }
+          onClick={ e => e.stopPropagation() }
+          defaultValue={ this.getDefaultValue() || '' }
+        >
+          { this.renderOptions() }
+        </select>
+      </label>
     );
   }
 }
@@ -154,6 +187,7 @@ class SelectFilter extends Component {
 SelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
@@ -167,6 +201,7 @@ SelectFilter.propTypes = {
 
 SelectFilter.defaultProps = {
   defaultValue: '',
+  filterState: {},
   className: '',
   withoutEmptyOption: false,
   comparator: EQ,

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

@@ -1,6 +1,7 @@
 /* eslint react/require-default-props: 0 */
 /* eslint react/prop-types: 0 */
 /* eslint no-return-assign: 0 */
+/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 import { PropTypes } from 'prop-types';
 
@@ -13,8 +14,14 @@ class TextFilter extends Component {
     this.filter = this.filter.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.timeout = null;
+    function getDefaultValue() {
+      if (props.filterState && typeof props.filterState.filterVal !== 'undefined') {
+        return props.filterState.filterVal;
+      }
+      return props.defaultValue;
+    }
     this.state = {
-      value: props.defaultValue
+      value: getDefaultValue()
     };
   }
 
@@ -35,16 +42,16 @@ class TextFilter extends Component {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillUnmount() {
+    this.cleanTimer();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.defaultValue !== this.props.defaultValue) {
       this.applyFilter(nextProps.defaultValue);
     }
   }
 
-  componentWillUnmount() {
-    this.cleanTimer();
-  }
-
   filter(e) {
     e.stopPropagation();
     this.cleanTimer();
@@ -89,22 +96,30 @@ class TextFilter extends Component {
       caseSensitive,
       defaultValue,
       getFilter,
+      filterState,
       ...rest
     } = this.props;
 
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
-      <input
+      <label
-        { ...rest }
+        className="filter-label"
-        ref={ n => this.input = n }
+        htmlFor={ `text-filter-column-${text}` }
-        type="text"
+      >
-        className={ `filter text-filter form-control ${className}` }
+        <span className="sr-only">Filter by {text}</span>
-        style={ style }
+        <input
-        onChange={ this.filter }
+          { ...rest }
-        onClick={ this.handleClick }
+          ref={ n => this.input = n }
-        placeholder={ placeholder || `Enter ${text}...` }
+          type="text"
-        value={ this.state.value }
+          id={ `text-filter-column-${text}` }
-      />
+          className={ `filter text-filter form-control ${className}` }
+          style={ style }
+          onChange={ this.filter }
+          onClick={ this.handleClick }
+          placeholder={ placeholder || `Enter ${text}...` }
+          value={ this.state.value }
+        />
+      </label>
     );
   }
 }
@@ -112,6 +127,7 @@ class TextFilter extends Component {
 TextFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
+  filterState: PropTypes.object,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   defaultValue: PropTypes.string,
   delay: PropTypes.number,
@@ -124,6 +140,7 @@ TextFilter.propTypes = {
 
 TextFilter.defaultProps = {
   delay: FILTER_DELAY,
+  filterState: {},
   defaultValue: '',
   caseSensitive: false
 };

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

@@ -1,5 +1,6 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
+/* eslint camelcase: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -17,14 +18,18 @@ export default (
   class FilterProvider extends React.Component {
     static propTypes = {
       data: PropTypes.array.isRequired,
-      columns: PropTypes.array.isRequired
+      columns: PropTypes.array.isRequired,
+      dataChangeListener: PropTypes.object
     }
 
     constructor(props) {
       super(props);
       this.currFilters = {};
       this.onFilter = this.onFilter.bind(this);
+      this.doFilter = this.doFilter.bind(this);
       this.onExternalFilter = this.onExternalFilter.bind(this);
+      this.data = props.data;
+      this.isEmitDataChange = false;
     }
 
     componentDidMount() {
@@ -63,12 +68,7 @@ export default (
           }
           return;
         }
-
+        this.doFilter(this.props);
-        if (filter.props.onFilter) {
-          filter.props.onFilter(filterVal);
-        }
-
-        this.forceUpdate();
       };
     }
 
@@ -78,16 +78,39 @@ export default (
       };
     }
 
-    render() {
+    getFiltered() {
-      let { data } = this.props;
+      return this.data;
-      if (!isRemoteFiltering()) {
+    }
-        data = filters(data, this.props.columns, _)(this.currFilters);
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      // let nextData = nextProps.data;
+      if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
+        this.doFilter(nextProps, this.isEmitDataChange);
+      } else {
+        this.data = nextProps.data;
       }
+    }
+
+    doFilter(props, ignoreEmitDataChange = false) {
+      const { dataChangeListener, data, columns } = props;
+      const result = filters(data, columns, _)(this.currFilters);
+      this.data = result;
+      if (dataChangeListener && !ignoreEmitDataChange) {
+        this.isEmitDataChange = true;
+        dataChangeListener.emit('filterChanged', result.length);
+      } else {
+        this.isEmitDataChange = false;
+        this.forceUpdate();
+      }
+    }
+
+    render() {
       return (
         <FilterContext.Provider value={ {
-          data,
+          data: this.data,
           onFilter: this.onFilter,
-          onExternalFilter: this.onExternalFilter
+          onExternalFilter: this.onExternalFilter,
+          currFilters: this.currFilters
         } }
         >
           { this.props.children }

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

@@ -98,9 +98,9 @@ export const filterByDate = _ => (
   customFilterValue
 ) => {
   if (!date || !comparator) return data;
-  const filterDate = date.getDate();
+  const filterDate = date.getUTCDate();
-  const filterMonth = date.getMonth();
+  const filterMonth = date.getUTCMonth();
-  const filterYear = date.getFullYear();
+  const filterYear = date.getUTCFullYear();
 
   return data.filter((row) => {
     let valid = true;
@@ -114,9 +114,9 @@ export const filterByDate = _ => (
       cell = new Date(cell);
     }
 
-    const targetDate = cell.getDate();
+    const targetDate = cell.getUTCDate();
-    const targetMonth = cell.getMonth();
+    const targetMonth = cell.getUTCMonth();
-    const targetYear = cell.getFullYear();
+    const targetYear = cell.getUTCFullYear();
 
 
     switch (comparator) {
@@ -234,16 +234,28 @@ export const filters = (data, columns, _) => (currFilters) => {
   let result = data;
   let filterFn;
   Object.keys(currFilters).forEach((dataField) => {
+    let currentResult;
     const filterObj = currFilters[dataField];
     filterFn = factory(filterObj.filterType);
     let filterValue;
+    let customFilter;
     for (let i = 0; i < columns.length; i += 1) {
       if (columns[i].dataField === dataField) {
         filterValue = columns[i].filterValue;
+        if (columns[i].filter) {
+          customFilter = columns[i].filter.props.onFilter;
+        }
         break;
       }
     }
-    result = filterFn(result, dataField, filterObj, filterValue);
+    if (customFilter) {
+      currentResult = customFilter(filterObj.filterVal, result);
+    }
+    if (typeof currentResult === 'undefined') {
+      result = filterFn(result, dataField, filterObj, filterValue);
+    } else {
+      result = currentResult;
+    }
   });
   return result;
 };

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

@@ -1,3 +1,7 @@
+.react-bootstrap-table > table > thead > tr > th .filter-label {
+  display: block !important;
+}
+
 .react-bootstrap-table > table > thead > tr > th .filter {
   font-weight: normal;
 }

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

@@ -25,7 +25,7 @@ describe('Select Filter', () => {
     2: 'Unknown'
   };
 
-  afterEach(() => {
+  beforeEach(() => {
     onFilter.reset();
     onFilterFirstReturn.reset();
 

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

@@ -144,7 +144,7 @@ describe('Text Filter', () => {
         <TextFilter onFilter={ onFilter } column={ column } />
       );
       instance = wrapper.instance();
-      instance.componentWillReceiveProps(nextProps);
+      instance.UNSAFE_componentWillReceiveProps(nextProps);
     });
 
     it('should setting state correctly when props.defaultValue is changed', () => {

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

@@ -45,7 +45,8 @@ describe('FilterContext', () => {
 
   function shallowContext(
     enableRemote = false,
-    tableColumns = columns
+    tableColumns = columns,
+    dataChangeListener,
   ) {
     mockBase.mockReset();
     handleFilterChange.mockReset();
@@ -59,6 +60,7 @@ describe('FilterContext', () => {
       <FilterContext.Provider
         columns={ tableColumns }
         data={ data }
+        dataChangeListener={ dataChangeListener }
       >
         <FilterContext.Consumer>
           {
@@ -92,7 +94,8 @@ describe('FilterContext', () => {
       expect(mockBase).toHaveBeenCalledWith({
         data,
         onFilter: wrapper.instance().onFilter,
-        onExternalFilter: wrapper.instance().onExternalFilter
+        onExternalFilter: wrapper.instance().onExternalFilter,
+        currFilters: wrapper.instance().currFilters
       });
     });
   });
@@ -101,7 +104,6 @@ describe('FilterContext', () => {
     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', () => {
@@ -109,7 +111,8 @@ describe('FilterContext', () => {
       expect(mockBase).toHaveBeenCalledWith({
         data,
         onFilter: wrapper.instance().onFilter,
-        onExternalFilter: wrapper.instance().onExternalFilter
+        onExternalFilter: wrapper.instance().onExternalFilter,
+        currFilters: wrapper.instance().currFilters
       });
     });
   });
@@ -226,9 +229,13 @@ describe('FilterContext', () => {
       });
     });
 
-    describe('if filter.props.onFilter is defined', () => {
+    describe('if filter.props.onFilter is defined and return data', () => {
-      const filterVal = '3';
+      const mockReturn = [{
-      const onFilter = jest.fn();
+        id: 1,
+        name: 'A'
+      }];
+      const filterVal = 'A';
+      const onFilter = jest.fn().mockReturnValue(mockReturn);
       const customColumns = columns.map((column, i) => {
         if (i === 1) {
           return {
@@ -248,7 +255,29 @@ describe('FilterContext', () => {
       it('should call filter.props.onFilter correctly', () => {
         instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
         expect(onFilter).toHaveBeenCalledTimes(1);
-        expect(onFilter).toHaveBeenCalledWith(filterVal);
+        expect(onFilter).toHaveBeenCalledWith(filterVal, data);
+      });
+
+      it('should set data correctly', () => {
+        instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(instance.data).toEqual(mockReturn);
+      });
+    });
+
+    describe('when props.dataChangeListener is defined', () => {
+      const filterVal = '3';
+      const newDataLength = 0;
+      const dataChangeListener = { emit: jest.fn() };
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(false, columns, dataChangeListener));
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should call dataChangeListener.emit correctly', () => {
+        instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(dataChangeListener.emit).toHaveBeenCalledWith('filterChanged', newDataLength);
       });
     });
 

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

@@ -11,10 +11,10 @@ export default options => loading =>
     componentDidMount() {
       if (loading) {
         const { wrapper } = this.overlay;
-        const masker = wrapper.firstChild;
+        const masker = wrapper.current.firstChild;
-        const headerDOM = wrapper.parentElement.querySelector('thead');
+        const headerDOM = wrapper.current.parentElement.querySelector('thead');
-        const bodyDOM = wrapper.parentElement.querySelector('tbody');
+        const bodyDOM = wrapper.current.parentElement.querySelector('tbody');
-        const captionDOM = wrapper.parentElement.querySelector('caption');
+        const captionDOM = wrapper.current.parentElement.querySelector('caption');
 
         let marginTop = window.getComputedStyle(headerDOM).height;
         if (captionDOM) {

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-overlay",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "it's a loading overlay addons for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {
@@ -37,7 +37,7 @@
     }
   ],
   "dependencies": {
-    "react-loading-overlay": "0.2.8"
+    "react-loading-overlay": "1.0.1"
   },
   "peerDependencies": {
     "prop-types": "^15.0.0",

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

@@ -2,199 +2,351 @@
 # yarn lockfile v1
 
 
-asap@~2.0.3:
+"@babel/helper-module-imports@^7.0.0":
-  version "2.0.6"
+  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
-
+  integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
-base64-js@^1.0.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
-
-buffer@^5.0.3:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
   dependencies:
-    base64-js "^1.0.2"
+    "@babel/types" "^7.0.0"
-    ieee754 "^1.1.4"
 
-chain-function@^1.0.0:
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2":
-  version "1.0.0"
+  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
-
+  integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
-
-css-to-react-native@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
   dependencies:
-    css-color-keywords "^1.0.0"
+    regenerator-runtime "^0.13.2"
-    fbjs "^0.8.5"
-    postcss-value-parser "^3.3.0"
 
-dom-helpers@^3.2.0:
+"@babel/types@^7.0.0":
-  version "3.2.1"
+  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
-
+  integrity sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
   dependencies:
-    iconv-lite "~0.4.13"
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
 
-fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
+"@emotion/cache@^10.0.9":
-  version "0.8.16"
+  version "10.0.9"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f"
+  integrity sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw==
   dependencies:
-    core-js "^1.0.0"
+    "@emotion/sheet" "0.9.2"
-    isomorphic-fetch "^2.1.1"
+    "@emotion/stylis" "0.8.3"
-    loose-envify "^1.0.0"
+    "@emotion/utils" "0.11.1"
-    object-assign "^4.1.0"
+    "@emotion/weak-memoize" "0.2.2"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
 
-has-flag@^1.0.0:
+"@emotion/hash@0.7.1":
-  version "1.0.0"
+  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
+  integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
 
-hoist-non-react-statics@^1.2.0:
+"@emotion/memoize@0.7.1":
-  version "1.2.0"
+  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
+  integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
 
-iconv-lite@~0.4.13:
+"@emotion/serialize@^0.11.6":
-  version "0.4.19"
+  version "0.11.6"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.6.tgz#78be8b9ee9ff49e0196233ba6ec1c1768ba1e1fc"
-
+  integrity sha512-n4zVv2qGLmspF99jaEUwnMV0fnEGsyUMsC/8KZKUSUTZMYljHE+j+B6rSD8PIFtaUIhHaxCG2JawN6L+OgLN0Q==
-ieee754@^1.1.4:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
-
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
-
-is-plain-object@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
   dependencies:
-    isobject "^3.0.1"
+    "@emotion/hash" "0.7.1"
+    "@emotion/memoize" "0.7.1"
+    "@emotion/unitless" "0.7.3"
+    "@emotion/utils" "0.11.1"
+    csstype "^2.5.7"
 
-is-stream@^1.0.1:
+"@emotion/sheet@0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.2.tgz#74e5c6b5e489a1ba30ab246ab5eedd96916487c4"
+  integrity sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A==
+
+"@emotion/stylis@0.8.3":
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.3.tgz#3ca7e9bcb31b3cb4afbaeb66156d86ee85e23246"
+  integrity sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q==
+
+"@emotion/unitless@0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
+  integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
+
+"@emotion/utils@0.11.1":
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.1.tgz#8529b7412a6eb4b48bdf6e720cc1b8e6e1e17628"
+  integrity sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg==
+
+"@emotion/weak-memoize@0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
+  integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+babel-plugin-emotion@^10.0.9:
+  version "10.0.9"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.9.tgz#04a0404d5a4084d5296357a393d344c0f8303ae4"
+  integrity sha512-IfWP12e9/wHtWHxVTzD692Nbcmrmcz2tip7acp6YUqtrP7slAyr5B+69hyZ8jd55GsyNSZwryNnmuDEVe0j+7w==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.7.1"
+    "@emotion/memoize" "0.7.1"
+    "@emotion/serialize" "^0.11.6"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
+babel-plugin-macros@^2.0.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.1.tgz#4a119ac2c2e19b458c259b9accd7ee34fd57ec6f"
+  integrity sha512-xN3KhAxPzsJ6OQTktCanNpIFnnMsCV+t8OloKxIL72D6+SUZYFn9qfklPgef5HyyDtzYZqqb+fs1S12+gQY82Q==
+  dependencies:
+    "@babel/runtime" "^7.4.2"
+    cosmiconfig "^5.2.0"
+    resolve "^1.10.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
+
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
+callsites@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
+
+convert-source-map@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+  integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+cosmiconfig@^5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
+  dependencies:
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.13.1"
+    parse-json "^4.0.0"
+
+create-emotion@^10.0.9:
+  version "10.0.9"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.9.tgz#290c2036126171c9566fa24f49c9241d54625138"
+  integrity sha512-sLKD4bIiTs8PpEqr5vlCoV5lsYE4QOBYEUWaD0R+VGRMCvBKHmYlvLJXsL99Kdc4YEFAFwipi2bbncnvv6UxRg==
+  dependencies:
+    "@emotion/cache" "^10.0.9"
+    "@emotion/serialize" "^0.11.6"
+    "@emotion/sheet" "0.9.2"
+    "@emotion/utils" "0.11.1"
+
+csstype@^2.5.7:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
+  integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
+
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
+emotion@^10.0.1:
+  version "10.0.9"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.9.tgz#2c37598af13df31dcd35a1957eaa8830f368c066"
+  integrity sha512-IMFwwWlU2TDt7eh4v6dm58E8VHAYOitqRbVoazQdxIu9/0CAH4a3UrTMnZSlWQAo09MrRRlKfgQFHswnj40meQ==
+  dependencies:
+    babel-plugin-emotion "^10.0.9"
+    create-emotion "^10.0.9"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esutils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
+
+find-root@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
-isobject@^3.0.1:
+import-fresh@^2.0.0:
-  version "3.0.1"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
   dependencies:
-    node-fetch "^1.0.1"
+    caller-path "^2.0.0"
-    whatwg-fetch ">=0.10.0"
+    resolve-from "^3.0.0"
 
-js-tokens@^3.0.0:
+is-arrayish@^0.2.1:
-  version "3.0.2"
+  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-loose-envify@^1.0.0, loose-envify@^1.3.1:
+is-directory@^0.3.1:
-  version "1.3.1"
+  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
   dependencies:
-    js-tokens "^3.0.0"
+    argparse "^1.0.7"
+    esprima "^4.0.0"
 
-node-fetch@^1.0.1:
+json-parse-better-errors@^1.0.1:
-  version "1.7.3"
+  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+lodash@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
-    encoding "^0.1.11"
+    js-tokens "^3.0.0 || ^4.0.0"
-    is-stream "^1.0.1"
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
-postcss-value-parser@^3.3.0:
+parse-json@^4.0.0:
-  version "3.3.0"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
   dependencies:
-    asap "~2.0.3"
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6:
+path-parse@^1.0.6:
-  version "15.6.0"
+  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+prop-types@^15.6.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
-    fbjs "^0.8.16"
+    loose-envify "^1.4.0"
-    loose-envify "^1.3.1"
     object-assign "^4.1.1"
+    react-is "^16.8.1"
 
-react-loading-overlay@0.2.8:
+react-is@^16.8.1:
-  version "0.2.8"
+  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-0.2.8.tgz#c1c5531c9cfa4be6caca6b9aa0c1eb19e22b03fe"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+  integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-loading-overlay@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-1.0.1.tgz#ee3b1ad56c45bb2f1ba46d4820ba0d06cd319a91"
+  integrity sha512-aUjtZ8tNXBSx+MbD2SQs0boPbeTAGTh+I5U9nWjDzMasKlYr58RJpr57c8W7uApeLpOkAGbInExRi6GamNC2bA==
   dependencies:
-    prop-types "^15.5.10"
+    emotion "^10.0.1"
-    react-transition-group "^1.2.1"
+    prop-types "^15.6.2"
-    styled-components "^2.1.2"
+    react-transition-group "^2.5.0"
 
-react-transition-group@^1.2.1:
+react-transition-group@^2.5.0:
-  version "1.2.1"
+  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
   dependencies:
-    chain-function "^1.0.0"
+    dom-helpers "^3.4.0"
-    dom-helpers "^3.2.0"
+    loose-envify "^1.4.0"
-    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
-    prop-types "^15.5.6"
+    react-lifecycles-compat "^3.0.4"
-    warning "^3.0.0"
 
-setimmediate@^1.0.5:
+regenerator-runtime@^0.13.2:
-  version "1.0.5"
+  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+  integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
 
-styled-components@^2.1.2:
+resolve-from@^3.0.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.4.tgz#dd87fd3dafd359e7a0d570aec1bd07d691c0b5a2"
-  dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.9"
-    hoist-non-react-statics "^1.2.0"
-    is-function "^1.0.1"
-    is-plain-object "^2.0.1"
-    prop-types "^15.5.4"
-    stylis "^3.4.0"
-    supports-color "^3.2.3"
-
-stylis@^3.4.0:
-  version "3.4.5"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
-
-supports-color@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  dependencies:
-    has-flag "^1.0.0"
-
-ua-parser-js@^0.7.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
-
-warning@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  dependencies:
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-    loose-envify "^1.0.0"
 
-whatwg-fetch@>=0.10.0:
+resolve@^1.10.0:
-  version "2.0.3"
+  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
+  integrity sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==
+  dependencies:
+    path-parse "^1.0.6"
+
+safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=

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

@@ -69,23 +69,23 @@ Sometime, you may feel above props is not satisfied with your requirement, don't
 * [sizePerPageOptionRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpageoptionrenderer-function)
 * [paginationTotalRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationtotalrenderer-function)
 
-### Professional
+### Fully Customization
 
-If you want to customize the pagination component completely, you may get interesting on following solution:
+If you want to customize the pagination component completely, you may get interesting on following solutions:
 
 * Standalone
 * Non-standalone
 
-`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
+`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and that will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
 
-#### Import PaginationProvider
+#### 1. Import PaginationProvider
 
 ```js
 import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
 
 ```
 
-#### Declare custom and totalSize in pagination option:
+#### 2. Declare custom and totalSize in pagination option:
 
 ```js
 const paginationOption = {
@@ -94,7 +94,7 @@ const paginationOption = {
 };
 ```
 
-#### Render PaginationProvider
+#### 3. Render PaginationProvider
 
 ```js
 <PaginationProvider
@@ -139,18 +139,24 @@ So far, your customization pagination is supposed to look like it:
 </PaginationProvider>
 ```
 
-Now, you have to choose, your built-in standalne components or you customize all of them by yourself:
+Now, you have to choose which solution you like: standalone or non-standalone ?
 
-#### Use Standalone Component
+#### 4.1 Use Standalone Component
-`react-bootstrap-table2-paginator` provider two standalone components:
+`react-bootstrap-table2-paginator` provider three standalone components:
 
 * Size Per Page Dropdwn Standalone
 * Pagination List Standalone
+* Pagination Total Standalone
 
 When render each standalone, you just need to pass the `paginationProps` props to standalone component:
 
 ```js
-import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
+import paginationFactory, {
+  PaginationProvider,
+  PaginationListStandalone,
+  SizePerPageDropdownStandalone,
+  PaginationTotalStandalone
+} from 'react-bootstrap-table2-paginator';
 
 <PaginationProvider
   pagination={ paginationFactory(options) }
@@ -164,6 +170,9 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
         <SizePerPageDropdownStandalone
           { ...paginationProps }
         />
+        <PaginationTotalStandalone
+          { ...paginationProps }
+        />
         <BootstrapTable
           keyField="id"
           data={ products }
@@ -181,7 +190,20 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePe
 
 That's it!!  The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
 
-#### Customization Everything
+##### Customizable props for `PaginationListStandalone`
+* N/A
+
+##### Customizable props for `SizePerPageDropdownStandalone`
+* `open`: `true` to make dropdown show.
+* `hidden`: `true` to hide the size per page dropdown.
+* `btnContextual`: Set the button contextual
+* `variation`: Variation for dropdown, available value is `dropdown` and `dropup`.
+* `className`: Custom the class on size per page dropdown
+
+##### Customizable props for `SizePerPageDropdownStandalone`
+* N/A
+
+#### 4.2 Customization Everything
 
 If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in `paginationProps` object:
 

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

@@ -4,6 +4,7 @@ import createBaseContext from './src/state-context';
 import createDataContext from './src/data-context';
 import PaginationListStandalone from './src/pagination-list-standalone';
 import SizePerPageDropdownStandalone from './src/size-per-page-dropdown-standalone';
+import PaginationTotalStandalone from './src/pagination-total-standalone';
 
 export default (options = {}) => ({
   createContext: createDataContext,
@@ -23,4 +24,4 @@ CustomizableProvider.propTypes = {
 };
 
 export const PaginationProvider = CustomizableProvider;
-export { PaginationListStandalone, SizePerPageDropdownStandalone };
+export { PaginationListStandalone, SizePerPageDropdownStandalone, PaginationTotalStandalone };

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "it's the pagination addon for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

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

@@ -21,8 +21,9 @@ class PaginationDataProvider extends Provider {
     isRemotePagination: PropTypes.func.isRequired
   }
 
-  componentWillReceiveProps(nextProps) {
+  // eslint-disable-next-line camelcase, react/sort-comp
-    super.componentWillReceiveProps(nextProps);
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    super.UNSAFE_componentWillReceiveProps(nextProps);
     const { currSizePerPage } = this;
     const { custom, onPageChange } = nextProps.pagination.options;
 
@@ -32,7 +33,12 @@ class PaginationDataProvider extends Provider {
     // user should align the page when the page is not fit to the data size when remote enable
     if (!this.isRemotePagination() && !custom) {
       const newPage = alignPage(
-        nextProps.data.length, this.currPage, currSizePerPage, pageStartIndex);
+        nextProps.data.length,
+        this.props.data.length,
+        this.currPage,
+        currSizePerPage,
+        pageStartIndex
+      );
 
       if (this.currPage !== newPage) {
         if (onPageChange) {
@@ -41,6 +47,9 @@ class PaginationDataProvider extends Provider {
         this.currPage = newPage;
       }
     }
+    if (nextProps.onDataSizeChange && nextProps.data.length !== this.props.data.length) {
+      nextProps.onDataSizeChange({ dataSize: nextProps.data.length });
+    }
   }
 
   isRemotePagination = () => this.props.isRemotePagination();

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

@@ -39,7 +39,11 @@ class PageButton extends Component {
 
 PageButton.propTypes = {
   onPageChange: PropTypes.func.isRequired,
-  page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  page: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.number,
+    PropTypes.string
+  ]).isRequired,
   active: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
   className: PropTypes.string,

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

@@ -56,7 +56,7 @@ export default ExtendBase =>
         alwaysShowAllBtns
       } = this.props;
 
-      let pages;
+      let pages = [];
       let endPage = totalPages;
       if (endPage <= 0) return [];
 
@@ -68,24 +68,42 @@ export default ExtendBase =>
         startPage = endPage - paginationSize + 1;
       }
 
-      if (startPage !== pageStartIndex && totalPages > paginationSize && withFirstAndLast) {
+      if (alwaysShowAllBtns) {
+        if (withFirstAndLast) {
+          pages = [firstPageText, prePageText];
+        } else {
+          pages = [prePageText];
+        }
+      }
+
+      if (startPage !== pageStartIndex &&
+        totalPages > paginationSize &&
+        withFirstAndLast &&
+        pages.length === 0
+      ) {
         pages = [firstPageText, prePageText];
-      } else if (totalPages > 1 || alwaysShowAllBtns) {
+      } else if (totalPages > 1 && pages.length === 0) {
         pages = [prePageText];
-      } else {
-        pages = [];
       }
 
       for (let i = startPage; i <= endPage; i += 1) {
         if (i >= pageStartIndex) pages.push(i);
       }
 
-      if (endPage <= lastPage && pages.length > 1) {
+      if (alwaysShowAllBtns || (endPage <= lastPage && pages.length > 1)) {
         pages.push(nextPageText);
       }
-      if (endPage !== lastPage && withFirstAndLast) {
+      if ((endPage !== lastPage && withFirstAndLast) || (withFirstAndLast && alwaysShowAllBtns)) {
         pages.push(lastPageText);
       }
+
+      // if ((endPage <= lastPage && pages.length > 1) || alwaysShowAllBtns) {
+      //   pages.push(nextPageText);
+      // }
+      // if (endPage !== lastPage && withFirstAndLast) {
+      //   pages.push(lastPageText);
+      // }
+
       return pages;
     }
 

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

@@ -1,3 +1,5 @@
+import Const from './const';
+
 const getNormalizedPage = (
   page,
   pageStartIndex
@@ -19,12 +21,20 @@ const startIndex = (
 
 export const alignPage = (
   dataSize,
+  prevDataSize,
   page,
   sizePerPage,
   pageStartIndex
 ) => {
-  if (page < pageStartIndex || page > (Math.floor(dataSize / sizePerPage) + pageStartIndex)) {
+  if (prevDataSize < dataSize) return page;
-    return pageStartIndex;
+  if (page < pageStartIndex) return pageStartIndex;
+  if (dataSize <= 0) return pageStartIndex;
+  if ((page >= (Math.floor(dataSize / sizePerPage) + pageStartIndex)) && pageStartIndex === 1) {
+    return Math.ceil(dataSize / sizePerPage);
+  }
+  if (page >= Math.floor(dataSize / sizePerPage) && pageStartIndex === 0) {
+    const newPage = Math.ceil(dataSize / sizePerPage);
+    return newPage - Math.abs((Const.PAGE_START_INDEX - pageStartIndex));
   }
   return page;
 };

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

@@ -1,4 +1,5 @@
 /* eslint react/prop-types: 0 */
+/* eslint camelcase: 0 */
 import React, { Component } from 'react';
 
 import pageResolver from './page-resolver';
@@ -12,7 +13,7 @@ export default WrappedComponent =>
       this.state = this.initialState();
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const { dataSize, currSizePerPage } = nextProps;
       if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
         const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);

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

@@ -27,7 +27,11 @@ const PaginatonList = props => (
 
 PaginatonList.propTypes = {
   pages: PropTypes.arrayOf(PropTypes.shape({
-    page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    page: PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.number,
+      PropTypes.string
+    ]),
     active: PropTypes.bool,
     disable: PropTypes.bool,
     title: PropTypes.string

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

@@ -0,0 +1,24 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+import PaginationTotal from './pagination-total';
+
+const paginationTotalAdapter = WrappedComponent =>
+  class PaginationTotalAdapter extends pageResolver(Component) {
+    render() {
+      const [from, to] = this.calculateFromTo();
+      return (
+        <WrappedComponent
+          from={ from }
+          to={ to }
+          dataSize={ this.props.dataSize }
+          paginationTotalRenderer={ this.props.paginationTotalRenderer }
+        />
+      );
+    }
+  };
+
+
+export const PaginationTotalWithAdapter = paginationTotalAdapter(PaginationTotal);
+export default paginationTotalAdapter;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import PaginationTotal from './pagination-total';
+import standaloneAdapter from './standalone-adapter';
+import paginationTotalAdapter from './pagination-total-adapter';
+
+const PaginationTotalStandalone = props => (
+  <PaginationTotal { ...props } />
+);
+
+export default
+standaloneAdapter(paginationTotalAdapter(PaginationTotalStandalone));

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

@@ -1,16 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const PaginationTotal = props => (
+const PaginationTotal = (props) => {
-  <span className="react-bootstrap-table-pagination-total">
+  if (props.paginationTotalRenderer) {
-    &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
+    return props.paginationTotalRenderer(props.from, props.to, props.dataSize);
-  </span>
+  }
-);
+  return (
+    <span className="react-bootstrap-table-pagination-total">
+      &nbsp;Showing rows { props.from } to&nbsp;{ props.to } of&nbsp;{ props.dataSize }
+    </span>
+  );
+};
 
 PaginationTotal.propTypes = {
   from: PropTypes.number.isRequired,
   to: PropTypes.number.isRequired,
-  dataSize: PropTypes.number.isRequired
+  dataSize: PropTypes.number.isRequired,
+  paginationTotalRenderer: PropTypes.func
+};
+
+PaginationTotal.defaultProps = {
+  paginationTotalRenderer: undefined
 };
 
 export default PaginationTotal;

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

@@ -5,30 +5,16 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import pageResolver from './page-resolver';
 import paginationHandler from './pagination-handler';
-import { SizePerPageDropdownAdapter } from './size-per-page-dropdown-adapter';
+import { SizePerPageDropdownWithAdapter } from './size-per-page-dropdown-adapter';
 import { PaginationListWithAdapter } from './pagination-list-adapter';
-import PaginationTotal from './pagination-total';
+import { PaginationTotalWithAdapter } from './pagination-total-adapter';
 import Const from './const';
 
 class Pagination extends pageResolver(Component) {
-  defaultTotal = (from, to, size) => (
-    <PaginationTotal
-      from={ from }
-      to={ to }
-      dataSize={ size }
-    />
-  );
-
-  setTotal = (from, to, size, total) => {
-    if (total && (typeof total === 'function')) {
-      return total(from, to, size);
-    }
-
-    return this.defaultTotal(from, to, size);
-  };
-
   render() {
     const {
+      currPage,
+      pageStartIndex,
       showTotal,
       dataSize,
       pageListRenderer,
@@ -48,7 +34,6 @@ class Pagination extends pageResolver(Component) {
     } = this.props;
 
     const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
-    const [from, to] = this.calculateFromTo();
     const pageListClass = cs(
       'react-bootstrap-table-pagination-list',
       'col-md-6 col-xs-6 col-sm-6 col-lg-6', {
@@ -57,7 +42,7 @@ class Pagination extends pageResolver(Component) {
     return (
       <div className="row react-bootstrap-table-pagination">
         <div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
-          <SizePerPageDropdownAdapter
+          <SizePerPageDropdownWithAdapter
             sizePerPageList={ sizePerPageList }
             currSizePerPage={ currSizePerPage }
             hideSizePerPage={ hideSizePerPage }
@@ -67,12 +52,13 @@ class Pagination extends pageResolver(Component) {
           />
           {
             showTotal ?
-              this.setTotal(
+              <PaginationTotalWithAdapter
-                from,
+                currPage={ currPage }
-                to,
+                currSizePerPage={ currSizePerPage }
-                dataSize,
+                pageStartIndex={ pageStartIndex }
-                paginationTotalRenderer
+                dataSize={ dataSize }
-              ) : null
+                paginationTotalRenderer={ paginationTotalRenderer }
+              /> : null
           }
         </div>
         {
@@ -83,6 +69,9 @@ class Pagination extends pageResolver(Component) {
             <div className={ pageListClass }>
               <PaginationListWithAdapter
                 { ...rest }
+                currPage={ currPage }
+                currSizePerPage={ currSizePerPage }
+                pageStartIndex={ pageStartIndex }
                 lastPage={ lastPage }
                 totalPages={ totalPages }
                 pageButtonRenderer={ pageButtonRenderer }
@@ -111,10 +100,10 @@ Pagination.propTypes = {
   sizePerPageRenderer: PropTypes.func,
   paginationTotalRenderer: PropTypes.func,
   sizePerPageOptionRenderer: PropTypes.func,
-  firstPageText: PropTypes.string,
+  firstPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  prePageText: PropTypes.string,
+  prePageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  nextPageText: PropTypes.string,
+  nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  lastPageText: PropTypes.string,
+  lastPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   nextPageTitle: PropTypes.string,
   prePageTitle: PropTypes.string,
   firstPageTitle: PropTypes.string,

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

@@ -48,6 +48,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
         }
         return (
           <WrappedComponent
+            { ...this.props }
             currSizePerPage={ `${currSizePerPage}` }
             options={ this.calculateSizePerPageStatus() }
             optionRenderer={ sizePerPageOptionRenderer }
@@ -63,5 +64,5 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
   };
 
 
-export const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
+export const SizePerPageDropdownWithAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
 export default sizePerPageDropdownAdapter;

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

@@ -1,8 +1,11 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/require-default-props: 0 */
 /* eslint no-lonely-if: 0 */
+/* eslint camelcase: 0 */
 import React from 'react';
+import EventEmitter from 'events';
 import Const from './const';
+import { alignPage } from './page';
 
 const StateContext = React.createContext();
 
@@ -10,6 +13,7 @@ class StateProvider extends React.Component {
   constructor(props) {
     super(props);
     this.handleChangePage = this.handleChangePage.bind(this);
+    this.handleDataSizeChange = this.handleDataSizeChange.bind(this);
     this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
 
     let currPage;
@@ -36,22 +40,15 @@ class StateProvider extends React.Component {
     }
 
     this.currPage = currPage;
+    this.dataSize = options.totalSize;
     this.currSizePerPage = currSizePerPage;
-  }
+    this.dataChangeListener = new EventEmitter();
-
+    this.dataChangeListener.on('filterChanged', this.handleDataSizeChange);
-  componentWillReceiveProps(nextProps) {
-    const { custom } = nextProps.pagination.options;
-
-    // user should align the page when the page is not fit to the data size when remote enable
-    if (this.isRemotePagination() || custom) {
-      this.currPage = nextProps.pagination.options.page;
-      this.currSizePerPage = nextProps.pagination.options.sizePerPage;
-    }
   }
 
   getPaginationProps = () => {
     const { pagination: { options }, bootstrap4 } = this.props;
-    const { currPage, currSizePerPage } = this;
+    const { currPage, currSizePerPage, dataSize } = this;
     const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
       Const.With_FIRST_AND_LAST : options.withFirstAndLast;
     const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
@@ -72,7 +69,7 @@ class StateProvider extends React.Component {
       hideSizePerPage,
       alwaysShowAllBtns,
       withFirstAndLast,
-      dataSize: options.totalSize,
+      dataSize,
       sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
       paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
       showTotal: options.showTotal,
@@ -100,12 +97,44 @@ class StateProvider extends React.Component {
 
   getPaginationRemoteEmitter = () => this.remoteEmitter || this.props.remoteEmitter;
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const { custom } = nextProps.pagination.options;
+
+    // user should align the page when the page is not fit to the data size when remote enable
+    if (this.isRemotePagination() || custom) {
+      if (typeof nextProps.pagination.options.page !== 'undefined') {
+        this.currPage = nextProps.pagination.options.page;
+      }
+      if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
+        this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+      }
+      if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
+        this.dataSize = nextProps.pagination.options.totalSize;
+      }
+    }
+  }
+
   isRemotePagination = () => {
     const e = {};
     this.remoteEmitter.emit('isRemotePagination', e);
     return e.result;
   };
 
+  handleDataSizeChange(newDataSize) {
+    const { pagination: { options } } = this.props;
+    const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+      Const.PAGE_START_INDEX : options.pageStartIndex;
+    this.currPage = alignPage(
+      newDataSize,
+      this.dataSize,
+      this.currPage,
+      this.currSizePerPage,
+      pageStartIndex
+    );
+    this.dataSize = newDataSize;
+    this.forceUpdate();
+  }
+
   handleChangePage(currPage) {
     const { currSizePerPage } = this;
     const { pagination: { options } } = this.props;
@@ -153,7 +182,8 @@ class StateProvider extends React.Component {
           paginationProps,
           paginationTableProps: {
             pagination,
-            setPaginationRemoteEmitter: this.setPaginationRemoteEmitter
+            setPaginationRemoteEmitter: this.setPaginationRemoteEmitter,
+            dataChangeListener: this.dataChangeListener
           }
         } }
       >

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

@@ -1,6 +1,6 @@
 .react-bootstrap-table-page-btns-ul {
   float: right;
-  margin-top: 0px;
+  margin-top: 0px !important;
 }
 
 .react-bootstrap-table-pagination-list-hidden {

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

@@ -174,7 +174,7 @@ describe('PaginationDataContext', () => {
           data: [],
           pagination: { ...defaultPagination }
         };
-        instance.componentWillReceiveProps(nextProps);
+        instance.UNSAFE_componentWillReceiveProps(nextProps);
       });
 
       it('should reset currPage to first page', () => {
@@ -195,7 +195,7 @@ describe('PaginationDataContext', () => {
             data: [],
             pagination: { ...defaultPagination, options: { onPageChange } }
           };
-          instance.componentWillReceiveProps(nextProps);
+          instance.UNSAFE_componentWillReceiveProps(nextProps);
         });
 
         it('should call options.onPageChange correctly', () => {

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

@@ -43,18 +43,132 @@ describe('Page Functions', () => {
   });
 
   describe('alignPage', () => {
-    const pageStartIndex = 1;
+    let newDataSize;
-    const sizePerPage = 10;
+    let prevDataSize;
-    const page = 3;
+    let currPage;
-    describe('if the page does not fit the pages which calculated from the length of data', () => {
+    let pageStartIndex;
-      it('should return pageStartIndex argument', () => {
+    let sizePerPage;
-        expect(alignPage(15, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
+
+    describe('if prevDataSize < newDataSize', () => {
+      beforeEach(() => {
+        newDataSize = 10;
+        prevDataSize = 6;
+        currPage = 2;
+        pageStartIndex = 1;
+        sizePerPage = 5;
+      });
+      it('should return same page', () => {
+        expect(alignPage(
+          newDataSize,
+          prevDataSize,
+          currPage,
+          sizePerPage,
+          pageStartIndex
+        )).toEqual(currPage);
       });
     });
 
-    describe('if the length of store.data is large than the end page index', () => {
+    describe('if currPage < newDataSize', () => {
-      it('should return current page', () => {
+      beforeEach(() => {
-        expect(alignPage(30, page, sizePerPage, pageStartIndex)).toEqual(page);
+        newDataSize = 10;
+        prevDataSize = 12;
+        currPage = 0;
+        pageStartIndex = 1;
+        sizePerPage = 5;
+      });
+
+      it('should return correct page', () => {
+        expect(alignPage(
+          newDataSize,
+          prevDataSize,
+          currPage,
+          sizePerPage,
+          pageStartIndex
+        )).toEqual(pageStartIndex);
+      });
+    });
+
+    describe('if partStartIndex is default 1', () => {
+      describe('and currPage is bigger than newest last page', () => {
+        beforeEach(() => {
+          newDataSize = 9;
+          prevDataSize = 12;
+          currPage = 3;
+          pageStartIndex = 1;
+          sizePerPage = 5;
+        });
+
+        it('should return correct page', () => {
+          expect(alignPage(
+            newDataSize,
+            prevDataSize,
+            currPage,
+            sizePerPage,
+            pageStartIndex
+          )).toEqual(2);
+        });
+      });
+
+      describe('and currPage is short than newest last page', () => {
+        beforeEach(() => {
+          newDataSize = 11;
+          prevDataSize = 12;
+          currPage = 3;
+          pageStartIndex = 1;
+          sizePerPage = 5;
+        });
+
+        it('should return correct page', () => {
+          expect(alignPage(
+            newDataSize,
+            prevDataSize,
+            currPage,
+            sizePerPage,
+            pageStartIndex
+          )).toEqual(currPage);
+        });
+      });
+    });
+
+    describe('if partStartIndex is default 0', () => {
+      describe('and currPage is bigger than newest last page', () => {
+        beforeEach(() => {
+          newDataSize = 8;
+          prevDataSize = 11;
+          currPage = 2;
+          pageStartIndex = 0;
+          sizePerPage = 5;
+        });
+
+        it('should return correct page', () => {
+          expect(alignPage(
+            newDataSize,
+            prevDataSize,
+            currPage,
+            sizePerPage,
+            pageStartIndex
+          )).toEqual(1);
+        });
+      });
+
+      describe('and currPage is short than newest last page', () => {
+        beforeEach(() => {
+          newDataSize = 11;
+          prevDataSize = 12;
+          currPage = 2;
+          pageStartIndex = 0;
+          sizePerPage = 5;
+        });
+
+        it('should return correct page', () => {
+          expect(alignPage(
+            newDataSize,
+            prevDataSize,
+            currPage,
+            sizePerPage,
+            pageStartIndex
+          )).toEqual(currPage);
+        });
       });
     });
   });