temp fix

README.md

@@ -1,56 +1,43 @@
 # 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)
+Rebuilt [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.
+> `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to some guys already used it   
 
-`react-bootstrap-table2` separates some functionalities from its core modules to other modules as listed in the following:
+`react-bootstrap-table2` separate some functionalities from core modules to other modules like following:
 
-- [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
-- [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
-- [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
-- [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
-- [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
-- [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
+* [`react-bootstrap-table-next`](https://www.npmjs.com/package/react-bootstrap-table-next)
+* [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter)
+* [`react-bootstrap-table2-editor`](https://www.npmjs.com/package/react-bootstrap-table2-editor)
+* [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator)
+* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
+* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
 
-Not only does this reduce the bundle size of your apps but also helps us have a cleaner design to avoid handling too much logic in the kernel module(SRP).
+This can help your application with less bundled size and also help us have clean design to avoid handling to much logic in kernal module(SRP).
 
 ## Migration
-
-If you are coming from the legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please check out the [migration guide](./docs/migration.md).
+If you are the user from legacy [`react-bootstrap-table`](https://github.com/AllenFang/react-bootstrap-table/), please have a look on [this](./docs/migration.md).
 
 ## Usage
-
 See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/getting-started.html).
 
 ## Online Demo
-
 See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
 
 ## Roadmap
-
 See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
 
 ## Development
+Please check [development guide](./docs/development.md).
 
-Please check the [development guide](./docs/development.md).
-
-## Running storybook example on your local machine
+## How should I run storybook example in my local?
 
 ```sh
-# Clone the repo
 $ git clone https://github.com/react-bootstrap-table/react-bootstrap-table2.git
-
-# change dir to the cloned repo
 $ cd react-bootstrap-table2
-
-# Install all dependencies with yarn
 $ yarn install
-
-# Start the stroybook server, then go to localhost:6006
 $ yarn storybook
-
+$ Go to localhost:6006
 ```
 
-**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**
+**Storybook examples: [`packages/react-bootstrap-table2-example/examples`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-example/examples)**

docs/README.md

@@ -17,7 +17,6 @@
 * [hover](#hover)
 * [condensed](#condensed)
 * [id](#id)
-* [tabIndexCell](#tabIndexCell)
 * [classes](#classes)
 * [wrapperClasses](#wrapperClasses)
 * [headerClasses](#headerClasses)
@@ -27,7 +26,6 @@
 * [rowStyle](#rowStyle)
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
-* [hiddenRows](#hiddenRows)
 * [defaultSorted](#defaultSorted)
 * [defaultSortDirection](#defaultSortDirection)
 * [pagination](#pagination)
@@ -114,10 +112,6 @@ Same as bootstrap `.table-condensed` class for making a table more compact by cu
 
 ### <a name='id'>id - [String]</a>
 Customize id on `table` element.
-
-### <a name='tabIndexCell'>tabIndexCell - [Bool]</a>
-Enable the `tabIndex` attribute on `<td>` element.
-
 ### <a name='classes'>classes - [String]</a>
 Customize class on `table` element.
 
@@ -182,14 +176,6 @@ const rowEvents = {
 <BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />
 ```
 
-### <a name='hiddenRows'>hiddenRows - [Array]</a>
-Hide rows, this props accept an array of row keys:
-
-```js
-const hiddenRows = [1, 4];
-<BootstrapTable data={ data } columns={ columns } hiddenRows={ hiddenRows } />
-```
-
 ### <a name='defaultSorted'>defaultSorted - [Array]</a>
 `defaultSorted` accept an object array which allow you to define the default sort columns when first render.
 

docs/cell-edit.md

@@ -10,7 +10,6 @@ $ npm install react-bootstrap-table2-editor --save
 * [blurToSave](#blurToSave)
 * [nonEditableRows](#nonEditableRows)
 * [timeToCloseMessage](#timeToCloseMessage)
-* [autoSelectText](#autoSelectText)
 * [beforeSaveCell](#beforeSaveCell)
 * [afterSaveCell](#afterSaveCell)
 * [errorMessage](#errorMessage)
@@ -44,11 +43,6 @@ Default is `false`, enable it will be able to save the cell automatically when b
 ### <a name='nonEditableRows'>cellEdit.nonEditableRows - [Function]</a>
 `cellEdit.nonEditableRows` accept a callback function and expect return an array which used to restrict all the columns of some rows as non-editable. So the each item in return array should be rowkey(`keyField`)
 
-### <a name='autoSelectText'>cellEdit.autoSelectText - [Bool]</a>
-Default is false, when enable it, `react-bootstrap-table2` will help you to select the text in the text input automatically when editing.
-
-> NOTE: This props only work for `text` and `textarea`.
-
 ### <a name='timeToCloseMessage'>cellEdit.timeToCloseMessage - [Function]</a>
 If a [`column.validator`](./columns.md#validator) defined and the new value is invalid, `react-bootstrap-table2` will popup a alert at the bottom of editor. `cellEdit.timeToCloseMessage` is a chance to let you decide how long the alert should be stay. Default is 3000 millisecond.
 
@@ -62,24 +56,6 @@ const cellEdit = {
 }
 ```
 
-If you want to perform a async `beforeSaveCell`, you can do it like that:
-
-```js
-const cellEdit: {
-  // omit...
-  beforeSaveCell(oldValue, newValue, row, column, done) {
-    setTimeout(() => {
-      if (confirm('Do you want to accep this change?')) {
-        done(); // contine to save the changes
-      } else {
-        done(false); // reject the changes
-      }
-    }, 0);
-    return { async: true };
-  }
-};
-```
-
 ### <a name='afterSaveCell'>cellEdit.afterSaveCell - [Function]</a>
 This callback function will be called after updating cell.
 

docs/columns.md

@@ -13,7 +13,6 @@ Available properties in a column object:
 * [formatExtraData](#formatExtraData)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
-* [sortCaret](#sortCaret)
 * [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
@@ -155,20 +154,6 @@ 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`
-
-```js
-{
-  // omit...
-  sort: true,
-  sortCaret: (order, column) => {
-    return //...
-  }
-}
-```
-> The possible value of `order` argument is **`asc`**, **`desc`** and **`undefined`**.
-
 ## <a name='classes'>column.classes - [String | Function]</a>
 It's available to have custom class on table column:
 
@@ -379,27 +364,17 @@ A new `String` will be the result of element headerAlign.
 
 
 ## <a name='events'>column.events - [Object]</a>
-You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via `events` property.   
-
-`react-bootstrap-table2` currently only support following events which will receive some specific information:
-
-* onClick
-* onDoubleClick
-* onMouseEnter
-* onMouseLeave
-* onContextMenu
+You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattributes.asp) on table column via event property:
 
 ```js
 {
   // omit...
   events: {
-    onClick: (e, column, columnIndex, row, rowIndex) => { ... },
+    onClick: e => { ... }
   }
 }
 ```
 
-If the events is not listed above, the callback function will only pass the `event` object.
-
 ## <a name='headerEvents'>column.headerEvents - [Object]</a>
 `headerEvents` same as [`column.events`](#events) but this is for header column.
 
@@ -553,28 +528,6 @@ The return value can be a bool or an object. If your validation is pass, return
 }
 ```
 
-If you want to perform a asycn validation, you can do it like this:
-```js
-{
-  // omit...
-  validator: (newValue, row, column, done) => {
-    settimeout(() => {
-      // async validation ok
-      return done();
-
-      // async validation not ok
-      return done({
-        valid: false,
-        message: 'SOME_REASON_HERE'
-      });
-
-    }, 2000);
-    return { async: true };
-  }
-}
-```
-
-
 ## <a name='editCellStyle'>column.editCellStyle - [Object | Function]</a>
 You can use `column.editCellStyle` to custom the style of `<td>` when cell editing. It like most of customizable functionality, it also accept a callback function with following params:
 

docs/development.md

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

docs/row-expand.md

@@ -13,8 +13,6 @@
 * [onExpand](#onExpand)
 * [onExpandAll](#onExpandAll)
 * [showExpandColumn](#showExpandColumn)
-* [onlyOneExpanding](#onlyOneExpanding)
-* [expandByColumnOnly](#expandByColumnOnly)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
 
@@ -92,16 +90,13 @@ const expandRow = {
 ```
 
 ### <a name='expandColumnRenderer'>expandRow.expandColumnRenderer - [Function]</a>
-Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
-* `expanded`: If current row is expanded or not
-* `rowKey`: Current row key
-* `expandable`: If currnet row is expandable or not 
+Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain one property  `expanded` which indicate if current row is expanded
 
 
 ```js
 const expandRow = {
   renderer: (row) => ...
-  expandColumnRenderer: ({ expanded, rowKey, expandable }) => (
+  expandColumnRenderer: ({ expanded }) => (
     // ....
   )
 };
@@ -132,24 +127,3 @@ const expandRow = {
   showExpandColumn: true
 };
 ```
-
-### <a name='onlyOneExpanding'>expandRow.onlyOneExpanding - [Bool]</a>
-Default is `false`. Enable this will only allow one row get expand at the same time.
-
-```js
-const expandRow = {
-  renderer: (row) => ...
-  onlyOneExpanding: true
-};
-```
-
-### <a name='expandByColumnOnly'>expandRow.expandByColumnOnly - [Bool]</a>
-Default is `false`. If you want to restrict user to expand/collapse row via clicking the expand column only, you can enable it. 
-
-```js
-const expandRow = {
-  renderer: (row) => ...,
-  showExpandColumn: true,
-  expandByColumnOnly: true
-};
-```

docs/row-selection.md

@@ -12,12 +12,10 @@
 * [bgColor](#bgColor)
 * [nonSelectable)](#nonSelectable)
 * [clickToSelect)](#clickToSelect)
-* [clickToExpand)](#clickToExpand)
 * [clickToEdit](#clickToEdit)
 * [onSelect](#onSelect)
 * [onSelectAll](#onSelectAll)
 * [hideSelectColumn](#hideSelectColumn)
-* [hideSelectAll](#hideSelectAll)
 * [selectionRenderer](#selectionRenderer)
 * [selectionHeaderRenderer](#selectionHeaderRenderer)
 
@@ -149,16 +147,6 @@ const selectRow = {
 > Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing   
 > If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
 
-### <a name='clickToExpand'>selectRow.clickToExpand - [Bool]</a>
-Default is false, enable it will let user able to expand and select row when user clicking on the row.
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  clickToExpand: true
-};
-```
-
 ### <a name='clickToEdit'>selectRow.clickToEdit - [Bool]</a>
 Able to click to edit cell and select row
 
@@ -211,44 +199,18 @@ const selectRow = {
 };
 ```
 
-> If you want to reject current select action, just return `false`:
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  onSelect: (row, isSelect, rowIndex, e) => {
-    if (SOME_CONDITION) {
-      return false;
-    }
-  }
-};
-```
-
 ### <a name='onSelectAll'>selectRow.onSelectAll - [Function]</a>
 This callback function will be called when select/unselect all and it only work when you configure [`selectRow.mode`](#mode) as `checkbox`.
 
 ```js
 const selectRow = {
   mode: 'checkbox',
-  onSelectAll: (isSelect, rows, e) => {
+  onSelectAll: (isSelect, results, e) => {
     // ...
   }
 };
 ```
 
-> If you want to control the final selection result, just return a row key array:
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  onSelectAll: (isSelect, rows, e) => {
-    if (isSelect && SOME_CONDITION) {
-      return [1, 3, 4];  // finally, key 1, 3, 4 will being selected 
-    }
-  }
-};
-```
-
 ### <a name='hideSelectColumn'>selectRow.hideSelectColumn - [Bool]</a>
 Default is `false`, if you don't want to have a selection column, give this prop as `true`
 
@@ -260,13 +222,3 @@ const selectRow = {
   bgColor: 'red'
 };
 ```
-
-### <a name='hideSelectAll'>selectRow.hideSelectAll - [Bool]</a>
-Default is `false`, if you don't want to render the select all checkbox on the header of selection column, give this prop as `true`!
-
-```js
-const selectRow = {
-  mode: 'checkbox',
-  hideSelectAll: true
-};
-```

package.json

@@ -82,8 +82,8 @@
   "dependencies": {
     "classnames": "2.2.5",
     "prop-types": "15.5.10",
-    "react": "16.4.0",
-    "react-dom": "16.4.0",
+    "react": "16.3.2",
+    "react-dom": "16.3.2",
     "underscore": "1.9.1"
   },
   "jest": {

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

@@ -1,6 +1,6 @@
 import createContext from './src/context';
-import withRowLevelCellEdit from './src/row-consumer';
-import createEditingCell from './src/editing-cell-consumer';
+import bindRowLevelCellEdit from './src/row-binder';
+import createEditingCell from './src/editing-cell-binder';
 import {
   EDITTYPE,
   DBCLICK_TO_CELL_EDIT,
@@ -10,7 +10,7 @@ import {
 export default (options = {}) => ({
   createContext,
   createEditingCell,
-  withRowLevelCellEdit,
+  bindRowLevelCellEdit,
   DBCLICK_TO_CELL_EDIT,
   DELAY_FOR_DBCLICK,
   options

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

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

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

@@ -31,7 +31,6 @@ export default (
 
     constructor(props) {
       super(props);
-      this.doUpdate = this.doUpdate.bind(this);
       this.startEditing = this.startEditing.bind(this);
       this.escapeEditing = this.escapeEditing.bind(this);
       this.completeEditing = this.completeEditing.bind(this);
@@ -56,36 +55,11 @@ export default (
     }
 
     handleCellUpdate(row, column, 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);
-        } else {
-          this.escapeEditing();
-        }
-      };
-      if (_.isFunction(beforeSaveCell)) {
-        const result = beforeSaveCell(
-          oldValue,
-          newValue,
-          row,
-          column,
-          beforeSaveCellDone
-        );
-        if (_.isObject(result) && result.async) {
-          return;
-        }
-      }
-      this.doUpdate(row, column, newValue);
-    }
-
-    doUpdate(row, column, newValue) {
       const { keyField, cellEdit, data } = this.props;
-      const { afterSaveCell } = cellEdit.options;
-      const rowId = _.get(row, keyField);
+      const { beforeSaveCell, afterSaveCell } = cellEdit.options;
       const oldValue = _.get(row, column.dataField);
+      const rowId = _.get(row, keyField);
+      if (_.isFunction(beforeSaveCell)) beforeSaveCell(oldValue, newValue, row, column);
       if (isRemoteCellEdit()) {
         handleCellChange(rowId, column.dataField, newValue);
       } else {

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

@@ -24,7 +24,6 @@ export default (_, onStartEdit) =>
       onUpdate: PropTypes.func.isRequired,
       onEscape: PropTypes.func.isRequired,
       timeToCloseMessage: PropTypes.number,
-      autoSelectText: PropTypes.bool,
       className: PropTypes.string,
       style: PropTypes.object
     }
@@ -32,7 +31,6 @@ export default (_, onStartEdit) =>
     static defaultProps = {
       timeToCloseMessage: TIME_TO_CLOSE_MESSAGE,
       className: null,
-      autoSelectText: false,
       style: {}
     }
 
@@ -44,8 +42,6 @@ export default (_, onStartEdit) =>
       this.handleClick = this.handleClick.bind(this);
       this.handleKeyDown = this.handleKeyDown.bind(this);
       this.beforeComplete = this.beforeComplete.bind(this);
-      this.asyncbeforeCompete = this.asyncbeforeCompete.bind(this);
-      this.displayErrorMessage = this.displayErrorMessage.bind(this);
       this.state = {
         invalidMessage: null
       };
@@ -81,41 +77,16 @@ export default (_, onStartEdit) =>
       }, timeToCloseMessage);
     }
 
-    displayErrorMessage(message) {
-      this.setState(() => ({
-        invalidMessage: message
-      }));
-      this.createTimer();
-    }
-
-    asyncbeforeCompete(newValue) {
-      return (result = { valid: true }) => {
-        const { valid, message } = result;
-        const { onUpdate, row, column } = this.props;
-        if (!valid) {
-          this.displayErrorMessage(message);
-          return;
-        }
-        onUpdate(row, column, newValue);
-      };
-    }
-
     beforeComplete(newValue) {
       const { onUpdate, row, column } = this.props;
       if (_.isFunction(column.validator)) {
-        const validateForm = column.validator(
-          newValue,
-          row,
-          column,
-          this.asyncbeforeCompete(newValue)
-        );
-        if (_.isObject(validateForm)) {
-          if (validateForm.async) {
-            return;
-          } else if (!validateForm.valid) {
-            this.displayErrorMessage(validateForm.message);
-            return;
-          }
+        const validateForm = column.validator(newValue, row, column);
+        if (_.isObject(validateForm) && !validateForm.valid) {
+          this.setState(() => ({
+            invalidMessage: validateForm.message
+          }));
+          this.createTimer();
+          return;
         }
       }
       onUpdate(row, column, newValue);
@@ -150,7 +121,7 @@ export default (_, onStartEdit) =>
 
     render() {
       let editor;
-      const { row, column, className, style, rowIndex, columnIndex, autoSelectText } = this.props;
+      const { row, column, className, style, rowIndex, columnIndex } = this.props;
       const { dataField } = column;
 
       const value = _.get(row, dataField);
@@ -203,13 +174,13 @@ export default (_, onStartEdit) =>
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
         editor = <DropdownEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.TEXTAREA) {
-        editor = <TextAreaEditor { ...editorProps } autoSelectText={ autoSelectText } />;
+        editor = <TextAreaEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.CHECKBOX) {
         editor = <CheckBoxEditor { ...editorProps } />;
       } else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.DATE) {
         editor = <DateEditor { ...editorProps } />;
       } else {
-        editor = <TextEditor { ...editorProps } autoSelectText={ autoSelectText } />;
+        editor = <TextEditor { ...editorProps } />;
       }
 
       return (

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

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

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

@@ -30,14 +30,9 @@ export default (Component, selectRowEnabled) => {
       />
     );
   };
-  function withConsumer(props) {
-    return (
-      <Consumer>
-        { cellEdit => renderWithCellEdit(props, cellEdit) }
-      </Consumer>
-    );
-  }
-
-  withConsumer.displayName = 'WithCellEditingRowConsumer';
-  return withConsumer;
+  return props => (
+    <Consumer>
+      { cellEdit => renderWithCellEdit(props, cellEdit) }
+    </Consumer>
+  );
 };

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

@@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
 
 class TextEditor extends Component {
   componentDidMount() {
-    const { defaultValue, didMount, autoSelectText } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
-    if (autoSelectText) this.text.select();
     if (didMount) didMount();
   }
 
@@ -17,7 +16,7 @@ class TextEditor extends Component {
   }
 
   render() {
-    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -39,13 +38,11 @@ TextEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  autoSelectText: PropTypes.bool,
   didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
   defaultValue: '',
-  autoSelectText: false,
   didMount: undefined
 };
 export default TextEditor;

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

@@ -10,10 +10,9 @@ class TextAreaEditor extends Component {
   }
 
   componentDidMount() {
-    const { defaultValue, didMount, autoSelectText } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
-    if (autoSelectText) this.text.select();
     if (didMount) didMount();
   }
 
@@ -29,7 +28,7 @@ class TextAreaEditor extends Component {
   }
 
   render() {
-    const { defaultValue, didMount, className, autoSelectText, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-textarea', className);
     return (
       <textarea
@@ -53,13 +52,11 @@ TextAreaEditor.propTypes = {
     PropTypes.number
   ]),
   onKeyDown: PropTypes.func,
-  autoSelectText: PropTypes.bool,
   didMount: PropTypes.func
 };
 TextAreaEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  autoSelectText: false,
   onKeyDown: undefined,
   didMount: undefined
 };

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

@@ -0,0 +1,210 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount } from 'enzyme';
+import _ from 'react-bootstrap-table-next/src/utils';
+import op from 'react-bootstrap-table-next/src/store/operators';
+
+import cellEditFactory from '../index';
+import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from '../src/const';
+import createCellEditContext from '../src/context';
+import bindCellEditing from '../src/cell-binder';
+
+describe('Cell Binder', () => {
+  let wrapper;
+  let cellEdit;
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+  let columns;
+  const rowIndex = 1;
+  const row = { id: 1, name: 'A' };
+  const keyField = 'id';
+  const columnIndex = 1;
+
+  const { Provider } = createCellEditContext(_, op, false, jest.fn());
+  const BaseComponent = () => null;
+  const WithCellEditComponent = bindCellEditing(
+    props => <BaseComponent { ...props } />,
+    keyField,
+    _
+  );
+
+  beforeEach(() => {
+    columns = [{
+      dataField: 'id',
+      text: 'ID'
+    }, {
+      dataField: 'name',
+      text: 'Name'
+    }];
+  });
+
+  describe(`if cellEdit.mode is ${CLICK_TO_CELL_EDIT}`, () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject correct props to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeTruthy();
+      expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeFalsy();
+    });
+  });
+
+  describe(`if cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject correct props to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('clickToEdit')).toBeFalsy();
+      expect(wrapper.find(BaseComponent).prop('dbclickToEdit')).toBeTruthy();
+    });
+  });
+
+  describe('if column prop is a key column', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[0] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            editable
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject negative editable prop to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+    });
+  });
+
+  describe('if editable prop is true(Row Level)', () => {
+    describe('but column.editable prop is false', () => {
+      beforeEach(() => {
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+        columns[1].editable = false;
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent
+              row={ row }
+              column={ columns[1] }
+              rowIndex={ rowIndex }
+              columnIndex={ columnIndex }
+              editable
+            />
+          </Provider>
+        );
+      });
+
+      it('should inject negative editable prop to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+      });
+    });
+
+    describe('and column.editable prop is true or not defined', () => {
+      beforeEach(() => {
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent
+              row={ row }
+              column={ columns[1] }
+              rowIndex={ rowIndex }
+              columnIndex={ columnIndex }
+              editable
+            />
+          </Provider>
+        );
+      });
+
+      it('should inject positive editable prop to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
+      });
+    });
+  });
+
+  describe('if editable prop is false(Row Level)', () => {
+    describe('even if column.editable prop is true or not defined', () => {
+      beforeEach(() => {
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+        columns[1].editable = true;
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent
+              row={ row }
+              column={ columns[1] }
+              rowIndex={ rowIndex }
+              columnIndex={ columnIndex }
+              editable={ false }
+            />
+          </Provider>
+        );
+      });
+
+      it('should inject negative editable prop to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+      });
+    });
+  });
+
+  describe('if column.editable prop is a function', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editable = jest.fn().mockReturnValue(false);
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+            editable
+          />
+        </Provider>
+      );
+    });
+
+    it('should call column.editable function correctly', () => {
+      expect(columns[1].editable).toHaveBeenCalledTimes(1);
+    });
+
+    it('should inject correct editable prop to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+    });
+  });
+});

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

@@ -235,8 +235,7 @@ describe('CellEditContext', () => {
 
       it('should call cellEdit.beforeSaveCell correctly', () => {
         expect(beforeSaveCell).toHaveBeenCalledTimes(1);
-        expect(beforeSaveCell)
-          .toHaveBeenCalledWith(oldValue, newValue, row, column, expect.anything());
+        expect(beforeSaveCell).toHaveBeenCalledWith(oldValue, newValue, row, column);
       });
     });
 

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

@@ -3,12 +3,12 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import _ from 'react-bootstrap-table-next/src/utils';
 
-import cellEditFactory from '..';
+import cellEditFactory from '../index';
 import { CLICK_TO_CELL_EDIT } from '../src/const';
 import createCellEditContext from '../src/context';
-import bindEditingCell from '../src/editing-cell-consumer';
+import bindEditingCell from '../src/editing-cell-binder';
 
-describe('Editing Cell Consumer', () => {
+describe('Cell Binder', () => {
   let wrapper;
   let cellEdit;
   const data = [{

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

@@ -4,12 +4,12 @@ import { mount } from 'enzyme';
 import _ from 'react-bootstrap-table-next/src/utils';
 import op from 'react-bootstrap-table-next/src/store/operators';
 
-import cellEditFactory from '..';
+import cellEditFactory from '../index';
 import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT, DELAY_FOR_DBCLICK } from '../src/const';
 import createCellEditContext from '../src/context';
-import withRowLevelCellEdit from '../src/row-consumer';
+import bindCellEditing from '../src/row-binder';
 
-describe('Row Consumer', () => {
+describe('Row Binder', () => {
   let wrapper;
   let cellEdit;
   const data = [{
@@ -28,7 +28,7 @@ describe('Row Consumer', () => {
 
   describe('if cellEdit.nonEditableRows is undefined', () => {
     beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
+      const WithCellEditComponent = bindCellEditing(
         props => <BaseComponent { ...props } />,
         false
       );
@@ -52,7 +52,7 @@ describe('Row Consumer', () => {
     const nonEditableRows = jest.fn().mockReturnValue([value]);
     describe('if value prop is match in one of cellEdit.nonEditableRows', () => {
       beforeEach(() => {
-        const WithCellEditComponent = withRowLevelCellEdit(
+        const WithCellEditComponent = bindCellEditing(
           props => <BaseComponent { ...props } />,
           false
         );
@@ -72,7 +72,7 @@ describe('Row Consumer', () => {
 
     describe('if value prop is not match in one of cellEdit.nonEditableRows', () => {
       beforeEach(() => {
-        const WithCellEditComponent = withRowLevelCellEdit(
+        const WithCellEditComponent = bindCellEditing(
           props => <BaseComponent { ...props } />,
           false
         );
@@ -93,7 +93,7 @@ describe('Row Consumer', () => {
 
   describe(`if selectRowEnabled argument is true and cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
     beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
+      const WithCellEditComponent = bindCellEditing(
         props => <BaseComponent { ...props } />,
         true
       );
@@ -115,7 +115,7 @@ describe('Row Consumer', () => {
     const ridx = 0;
     const cidx = 1;
     beforeEach(() => {
-      const WithCellEditComponent = withRowLevelCellEdit(
+      const WithCellEditComponent = bindCellEditing(
         props => <BaseComponent { ...props } />,
         false
       );

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

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

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

@@ -1,9 +1,10 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
+// import cellEditFactory from 'react-bootstrap-table2-editor';
 import { productsGenerator } from 'utils/common';
 
-const products = productsGenerator(3000);
+const products = productsGenerator(2000);
 
 const columns = [{
   dataField: 'id',
@@ -16,25 +17,41 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const expandRow = {
-  showExpandColumn: true,
-  renderer: row => (
-    <div>
-      <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
-      <p>You can render anything here, also you can add additional data on every row object</p>
-      <p>expandRow.renderer callback will pass the origin row object to you</p>
-    </div>
-  )
+// cellEdit={ cellEditFactory({
+//   mode: 'click'
+// }) }
+
+// const expandRow = {
+//   renderer: row => (
+//     <div>
+//       <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+//       <p>You can render anything here, also you can add additional data on every row object</p>
+//       <p>expandRow.renderer callback will pass the origin row object to you</p>
+//     </div>
+//   )
+// };
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  bgColor: 'red'
+  // selected: [2],
+  // hideSelectColumn: true
+  // clickToEdit: true
 };
 
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      selectRow={ { mode: 'checkbox', clickToSelect: true } }
-      expandRow={ expandRow }
-    />
-  </div>
-);
+/* eslint react/prefer-stateless-function: 0 */
+export default class Table extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          selectRow={ selectRow }
+        />
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/basic/tabindex-column.js

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

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

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

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

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

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

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

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

@@ -103,7 +103,7 @@ const columns = [{
 }, {
   dataField: 'quality',
   text: 'Product Quality',
-  editorRenderer: (editorProps, value, row, column, rowIndex, columnIndex) => (
+  editorRenderer: (editorProps, value, row, rowIndex, columnIndex) => (
     <QualityRanger { ...editorProps } value={ value } />
   )
 }];

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

@@ -1,70 +0,0 @@
-/* eslint max-len: 0 */
-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 = [
-  { value: 0, label: 'good' },
-  { value: 1, label: 'Bad' },
-  { value: 2, label: 'unknown' }
-];
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
-  filter: selectFilter({
-    options: selectOptions
-  })
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
-
-const selectOptions = [
-  { value: 0, label: 'good' },
-  { value: 1, label: 'Bad' },
-  { value: 2, label: 'unknown' }
-];
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'quality',
-  text: 'Product Quailty',
-  formatter: cell => selectOptions.find(opt => opt.value === cell).label,
-  filter: selectFilter({
-    options: selectOptions
-  })
-}];
-
-<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
-`;
-
-export default () => (
-  <div>
-    <h3><code>selectFilter.options</code> accept an Array and we keep that order when rendering the options</h3>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      filter={ filterFactory() }
-    />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,6 +1,5 @@
 /* eslint no-unused-vars: 0 */
 /* eslint no-alert: 0 */
-/* eslint no-console: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -13,22 +12,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   events: {
-    onClick: (e, column, columnIndex, row, rowIndex) => {
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      alert('Click on Product ID field');
-    },
-    onMouseEnter: (e, column, columnIndex, row, rowIndex) => {
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      console.log('onMouseEnter on Product ID field');
-    }
+    onClick: () => alert('Click on Product ID field')
   }
 }, {
   dataField: 'name',
@@ -45,22 +29,7 @@ const columns = [{
   dataField: 'id',
   text: 'Product ID',
   events: {
-    onClick: (e, column, columnIndex, row, rowIndex) => {
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      alert('Click on Product ID field');
-    },
-    onMouseEnter: (e, column, columnIndex, row, rowIndex) => {
-      console.log(e);
-      console.log(column);
-      console.log(columnIndex);
-      console.log(row);
-      console.log(rowIndex);
-      console.log('onMouseEnter on Product ID field');
-    }
+    onClick: () => alert('Click on Product ID field')
   }
 }, {
   dataField: 'name',
@@ -75,7 +44,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Try to Click or Mouse over on Product ID columns</h3>
+    <h3>Try to Click on Product ID columns</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>

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

@@ -2,9 +2,9 @@ import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
 import Code from 'components/common/code-block';
-import { productsGenerator, withOnSale } from 'utils/common';
+import { productsGenerator } from 'utils/common';
 
-const products = withOnSale(productsGenerator());
+const products = productsGenerator();
 
 function priceFormatter(cell, row) {
   if (row.onSale) {

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

@@ -1,5 +1,4 @@
 /* eslint react/prop-types: 0 */
-/* eslint no-unused-vars: 0 */
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
@@ -34,7 +33,7 @@ const expandRow = {
     }
     return <b>+</b>;
   },
-  expandColumnRenderer: ({ expanded, rowKey, expandable }) => {
+  expandColumnRenderer: ({ expanded }) => {
     if (expanded) {
       return (
         <b>-</b>

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

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

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

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

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

@@ -25,7 +25,6 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
-  showExpandColumn: true,
   nonExpandable: [1, 3]
 };
 
@@ -51,7 +50,6 @@ const expandRow = {
       <p>expandRow.renderer callback will pass the origin row object to you</p>
     </div>
   ),
-  showExpandColumn: true,
   nonExpandable: [1, 3]
 };
 

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

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

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

@@ -1,88 +0,0 @@
-/* eslint no-alert: 0 */
-/* eslint consistent-return: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-class AdvSelectionManagment extends React.Component {
-  handleOnSelect = (row, isSelect) => {
-    if (isSelect && row.id < 3) {
-      alert('Oops, You can not select Product ID which less than 3');
-      return false; // return false to deny current select action
-    }
-    return true; // return true or dont return to approve current select action
-  }
-
-  handleOnSelectAll = (isSelect, rows) => {
-    if (isSelect) {
-      return rows.filter(r => r.id >= 3).map(r => r.id);
-    }
-  }
-
-  render() {
-    const selectRow = {
-      mode: 'checkbox',
-      clickToSelect: true,
-      onSelect: this.handleOnSelect,
-      onSelectAll: this.handleOnSelectAll
-    };
-    return (
-      <div>
-        <h3>You can not select Product ID less than 3</h3>
-        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}
-`;
-
-export default class AdvSelectionManagment extends React.Component {
-  handleOnSelect = (row, isSelect) => {
-    if (isSelect && row.id < 3) {
-      alert('Oops, You can not select Product ID which less than 3');
-      return false; // return false to deny current select action
-    }
-    return true; // return true or dont return to approve current select action
-  }
-
-  handleOnSelectAll = (isSelect, rows) => {
-    if (isSelect) {
-      return rows.filter(r => r.id >= 3).map(r => r.id);
-    }
-  }
-
-  render() {
-    const selectRow = {
-      mode: 'checkbox',
-      clickToSelect: true,
-      onSelect: this.handleOnSelect,
-      onSelectAll: this.handleOnSelectAll
-    };
-    return (
-      <div>
-        <h3>You can not select Product ID less than 3</h3>
-        <BootstrapTable keyField="id" data={ products } columns={ columns } selectRow={ selectRow } />
-        <Code>{ sourceCode }</Code>
-      </div>
-    );
-  }
-}

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

@@ -18,9 +18,7 @@ const columns = [{
 }];
 
 const selectRow = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  clickToExpand: true
+  mode: 'checkbox'
 };
 
 const expandRow = {
@@ -50,8 +48,7 @@ const columns = [{
 
 const selectRow = {
   mode: 'checkbox',
-  clickToSelect: true,
-  clickToExpand: true
+  clickToSelect: true
 };
 
 const expandRow = {
@@ -70,7 +67,6 @@ const expandRow = {
   data={ products }
   columns={ columns }
   selectRow={ selectRow }
-  expandRow={ expandRow }
 />
 `;
 

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

@@ -1,57 +0,0 @@
-/* eslint no-unused-vars: 0 */
-/* eslint no-console: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const products = productsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const rowEvents = {
-  onClick: (e, row, rowIndex) => {
-    console.log(`clicked on row with index: ${rowIndex}`);
-  },
-  onMouseEnter: (e, row, rowIndex) => {
-    console.log(`enter on row with index: ${rowIndex}`);
-  }
-};
-
-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 hiddenRowKeys = [1, 3];
-
-<BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
-`;
-
-const hiddenRowKeys = [1, 3];
-
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } hiddenRows={ hiddenRowKeys } />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

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

@@ -1,83 +0,0 @@
-/* eslint react/prop-types: 0 */
-import React from 'react';
-
-import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
-import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
-
-const { SearchBar } = Search;
-const products = productsGenerator();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
-
-const { SearchBar } = Search;
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID'
-}, {
-  dataField: 'name',
-  text: 'Product Name'
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-<ToolkitProvider
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  search={ { defaultSearch: '2101' } }
->
-  {
-    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={ { defaultSearch: '2101' } }
-    >
-      {
-        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/sort/custom-sort-caret.js

@@ -1,59 +0,0 @@
-/* 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();
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-  sort: true
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  sort: true,
-  sortCaret: (order, column) => {
-    if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
-    else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
-    else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
-    return null;
-  }
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-const sourceCode = `\
-import BootstrapTable from 'react-bootstrap-table-next';
-
-const columns = [{
-  dataField: 'id',
-  text: 'Product ID',
-  sort: true
-}, {
-  dataField: 'name',
-  text: 'Product Name',
-  sort: true,
-  sortCaret: (order, column) => {
-    if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
-    else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
-    else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
-    return null;
-  }
-}, {
-  dataField: 'price',
-  text: 'Product Price'
-}];
-
-<BootstrapTable keyField='id' data={ products } columns={ columns } />
-`;
-
-export default () => (
-  <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } />
-    <Code>{ sourceCode }</Code>
-  </div>
-);

packages/react-bootstrap-table2-example/examples/welcome.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import Typed from 'typed.js';
 
-const PROJECT_NAME = 'react-bootstrap-table2';
-
 export default class Welcome extends React.Component {
   componentDidMount() {
     // type.js config
@@ -23,21 +21,14 @@ export default class Welcome extends React.Component {
     return (
       <div>
         <div className="welcome">
-          <div className="welcome-title">
-            <span className="welcome-title-logo">
-              <img src="images/logo-color-square.svg" alt={ `${PROJECT_NAME}-logo` } />
-            </span>
-            <h1>
-              {PROJECT_NAME}
-            </h1>
-          </div>
+          <h1 className="welcome-title">react-bootstrap-table2</h1>
           <span
             className="welcome-sub-title"
             ref={ (el) => { this.el = el; } }
           />
         </div>
-        <a href={ `https://github.com/react-bootstrap-table/${PROJECT_NAME}` } className="github-corner" aria-label="View source on Github">
-          <svg width="80" height="80" viewBox="0 0 250 250" style={ { fill: '#0058B7', color: '#fff', position: 'absolute', top: '0', border: '0', right: '0' } } aria-hidden="true">
+        <a href="https://github.com/react-bootstrap-table/react-bootstrap-table2" className="github-corner" aria-label="View source on Github">
+          <svg width="80" height="80" viewBox="0 0 250 250" style={ { fill: '#009688', color: '#fff', position: 'absolute', top: '0', border: '0', right: '0' } } aria-hidden="true">
             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
             <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style={ { transformOrigin: '130px 106px' } } className="octo-arm" />
             <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" className="octo-body" />

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

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

packages/react-bootstrap-table2-example/public/images/logo-color-square.svg

@@ -1 +0,0 @@
-<svg id="layer_1" data-name="layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><defs><style>.cls-1{fill:#059ae6;}.cls-2{fill:#0058b7;}</style></defs><title>logo square</title><polygon class="cls-1" points="22.76 59 22.76 64.35 49.24 51.13 49.24 43.88 44.45 41.5 44.45 48.17 22.76 59"/><polygon class="cls-2" points="22.76 20.87 22.76 47.98 27.55 45.59 27.55 23.83 44.45 15.39 44.45 23.02 33.06 28.71 33.06 31.9 49.24 39.97 49.24 34.62 40.58 30.3 49.24 25.98 49.24 7.65 22.76 20.87"/></svg>

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

@@ -1,5 +1,4 @@
 /* eslint no-mixed-operators: 0 */
-/* eslint no-param-reassign: 0 */
 
 /**
  * products generator for stories
@@ -23,12 +22,6 @@ export const productsGenerator = (quantity = 5, callback) => {
   );
 };
 
-export const withOnSale = rows => rows.map((row) => {
-  if (row.id > 2) row.onSale = false;
-  else row.onSale = true;
-  return row;
-});
-
 export const productsQualityGenerator = (quantity = 5) =>
   Array.from({ length: quantity }, (value, index) => ({
     id: index,

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

@@ -13,8 +13,6 @@ import NoDataTable from 'examples/basic/no-data-table';
 import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 import LargeTable from 'examples/basic/large-table';
-import ExposedAPITable from 'examples/basic/exposed-function';
-import TabIndexCellTable from 'examples/basic/tabindex-column';
 
 // bootstrap 4
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
@@ -55,7 +53,6 @@ import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
-import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
 import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import MultiSelectFilter from 'examples/column-filter/multi-select-filter';
 import MultiSelectFilterDefaultValue from 'examples/column-filter/multi-select-filter-default-value';
@@ -79,7 +76,6 @@ import ClearAllFilters from 'examples/column-filter/clear-all-filters';
 import RowStyleTable from 'examples/rows/row-style';
 import RowClassTable from 'examples/rows/row-class';
 import RowEventTable from 'examples/rows/row-event';
-import RowHiddenTable from 'examples/rows/row-hidden';
 
 // table sort
 import EnableSortTable from 'examples/sort/enable-sort-table';
@@ -87,7 +83,6 @@ import DefaultSortTable from 'examples/sort/default-sort-table';
 import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
 import SortEvents from 'examples/sort/sort-events';
 import CustomSortTable from 'examples/sort/custom-sort-table';
-import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
 import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
 import HeaderSortingStyleTable from 'examples/sort/header-sorting-style';
 
@@ -99,12 +94,9 @@ import RowLevelEditableTable from 'examples/cell-edit/row-level-editable-table';
 import ColumnLevelEditableTable from 'examples/cell-edit/column-level-editable-table';
 import CellLevelEditable from 'examples/cell-edit/cell-level-editable-table';
 import CellEditHooks from 'examples/cell-edit/cell-edit-hooks-table';
-import AsyncCellEditHooks from 'examples/cell-edit/cell-edit-async-hooks-table';
 import CellEditValidator from 'examples/cell-edit/cell-edit-validator-table';
-import AsyncCellEditValidator from 'examples/cell-edit/cell-edit-async-validator-table';
 import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table';
 import CellEditClassTable from 'examples/cell-edit/cell-edit-class-table';
-import AutoSelectTextInput from 'examples/cell-edit/auto-select-text-input-table';
 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';
@@ -120,13 +112,11 @@ import MultipleSelectionTable from 'examples/row-selection/multiple-selection';
 import ClickToSelectTable from 'examples/row-selection/click-to-select';
 import DefaultSelectTable from 'examples/row-selection/default-select';
 import SelectionManagement from 'examples/row-selection/selection-management';
-import AdvanceSelectionManagement from 'examples/row-selection/selection-advance-management';
 import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
 import SelectionWithExpansionTable from 'examples/row-selection/selection-with-expansion';
 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 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';
@@ -138,8 +128,6 @@ import BasicRowExpand from 'examples/row-expand';
 import RowExpandManagement from 'examples/row-expand/expand-management';
 import NonExpandableRows from 'examples/row-expand/non-expandable-rows';
 import ExpandColumn from 'examples/row-expand/expand-column';
-import OnlyExpandByColumn from 'examples/row-expand/expand-by-column-only.js';
-import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
 import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
 import ExpandHooks from 'examples/row-expand/expand-hooks';
 
@@ -150,7 +138,6 @@ import CustomPaginationTable from 'examples/pagination/custom-pagination';
 
 // search
 import SearchTable from 'examples/search';
-import DefaultSearch from 'examples/search/default-search';
 import DefaultCustomSearch from 'examples/search/default-custom-search';
 import FullyCustomSearch from 'examples/search/fully-custom-search';
 import SearchFormattedData from 'examples/search/search-formatted';
@@ -200,9 +187,7 @@ storiesOf('Basic Table', module)
   .add('Indication For Empty Table', () => <NoDataTable />)
   .add('Customized id and class table', () => <CustomizedIdClassesTable />)
   .add('Table with caption', () => <CaptionTable />)
-  .add('Large Table', () => <LargeTable />)
-  .add('Exposed API', () => <ExposedAPITable />)
-  .add('Enable tabIndex on Cell', () => <TabIndexCellTable />);
+  .add('Large Table', () => <LargeTable />);
 
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
@@ -265,14 +250,12 @@ storiesOf('Column Filter', module)
   .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
-  .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
   .add('Clear All Filters', () => <ClearAllFilters />);
 
 storiesOf('Work on Rows', module)
   .addDecorator(bootstrapStyle())
   .add('Customize Row Style', () => <RowStyleTable />)
   .add('Customize Row Class', () => <RowClassTable />)
-  .add('Hide Rows', () => <RowHiddenTable />)
   .add('Row Event', () => <RowEventTable />);
 
 storiesOf('Sort Table', module)
@@ -282,7 +265,6 @@ storiesOf('Sort Table', module)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
-  .add('Custom Sort Caret', () => <CustomSortCaretTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
   .add('Custom Style on Sorting Header Column', () => <HeaderSortingStyleTable />);
 
@@ -295,10 +277,7 @@ storiesOf('Cell Editing', module)
   .add('Column Level Editable', () => <ColumnLevelEditableTable />)
   .add('Cell Level Editable', () => <CellLevelEditable />)
   .add('Rich Hook Functions', () => <CellEditHooks />)
-  .add('Async Hook Functions', () => <AsyncCellEditHooks />)
   .add('Validation', () => <CellEditValidator />)
-  .add('Async Validation', () => <AsyncCellEditValidator />)
-  .add('Auto Select Text Input', () => <AutoSelectTextInput />)
   .add('Custom Cell Style', () => <CellEditStyleTable />)
   .add('Custom Cell Classes', () => <CellEditClassTable />)
   .add('Custom Editor Classes', () => <EditorClassTable />)
@@ -317,13 +296,11 @@ storiesOf('Row Selection', module)
   .add('Click to Select', () => <ClickToSelectTable />)
   .add('Default Select', () => <DefaultSelectTable />)
   .add('Selection Management', () => <SelectionManagement />)
-  .add('Advance Selection Management', () => <AdvanceSelectionManagement />)
   .add('Click to Select and Edit Cell', () => <ClickToSelectWithCellEditTable />)
   .add('Row Select and Expand', () => <SelectionWithExpansionTable />)
   .add('Selection without Data', () => <SelectionNoDataTable />)
   .add('Selection Style', () => <SelectionStyleTable />)
   .add('Selection Class', () => <SelectionClassTable />)
-  .add('Hide Select All', () => <HideSelectAllTable />)
   .add('Custom Selection', () => <CustomSelectionTable />)
   .add('Selection Background Color', () => <SelectionBgColorTable />)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
@@ -336,8 +313,6 @@ storiesOf('Row Expand', module)
   .add('Expand Management', () => <RowExpandManagement />)
   .add('Non Expandabled Rows', () => <NonExpandableRows />)
   .add('Expand Indicator', () => <ExpandColumn />)
-  .add('Only Expand by Indicator', () => <OnlyExpandByColumn />)
-  .add('Expand Only One Row at The Same Time', () => <ExpandOnlyOne />)
   .add('Custom Expand Indicator', () => <CustomExpandColumn />)
   .add('Expand Hooks', () => <ExpandHooks />);
 
@@ -350,7 +325,6 @@ storiesOf('Pagination', module)
 storiesOf('Table Search', module)
   .addDecorator(bootstrapStyle())
   .add('Basic Search Table', () => <SearchTable />)
-  .add('Default Search Table', () => <DefaultSearch />)
   .add('Default Custom Search', () => <DefaultCustomSearch />)
   .add('Fully Custom Search', () => <FullyCustomSearch />)
   .add('Search Fromatted Value', () => <SearchFormattedData />)

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

@@ -1,5 +1,3 @@
-$logo-size: 96px;
-
 .welcome {
   margin-top: 70px;
   text-align: center;
@@ -7,22 +5,7 @@ $logo-size: 96px;
 
   &-title {
     color: $grey-900;
-    width: 100%;
-
-    display: inline-flex;
-    justify-content: center;
-    align-content: center;
-
-    &-logo {
-      position: relative;
-      top: -8px;
-      right: -12px;
-
-      width: $logo-size;
-      height: $logo-size;
-    }
   }
-
   &-sub-title {
     font-size: 30px;
     color: $grey-500;

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

@@ -115,27 +115,6 @@ const qualityFilter = selectFilter({
 // omit...
 ```
 
-> Note, the selectOptions can be an array also: 
-
-```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.
-
 ## MultiSelect Filter
 
 A quick example: 
@@ -309,4 +288,3 @@ Following properties is valid in `FILTER_TYPES`:
 * SELECT
 * NUMBER
 * DATE
-* MULTISELECT

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

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

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

@@ -7,17 +7,6 @@ import { LIKE, EQ } from '../comparison';
 import { FILTER_TYPE } from '../const';
 
 function optionsEquals(currOpts, prevOpts) {
-  if (Array.isArray(currOpts)) {
-    for (let i = 0; i < currOpts.length; i += 1) {
-      if (
-        currOpts[i].value !== prevOpts[i].value ||
-        currOpts[i].label !== prevOpts[i].label
-      ) {
-        return false;
-      }
-    }
-    return currOpts.length === prevOpts.length;
-  }
   const keys = Object.keys(currOpts);
   for (let i = 0; i < keys.length; i += 1) {
     if (currOpts[keys[i]] !== prevOpts[keys[i]]) {
@@ -27,21 +16,11 @@ function optionsEquals(currOpts, prevOpts) {
   return Object.keys(currOpts).length === Object.keys(prevOpts).length;
 }
 
-function getOptionValue(options, key) {
-  if (Array.isArray(options)) {
-    const result = options
-      .filter(({ label }) => label === key)
-      .map(({ value }) => value);
-    return result[0];
-  }
-  return options[key];
-}
-
 class SelectFilter extends Component {
   constructor(props) {
     super(props);
     this.filter = this.filter.bind(this);
-    const isSelected = getOptionValue(props.options, props.defaultValue) !== undefined;
+    const isSelected = props.options[props.defaultValue] !== undefined;
     this.state = { isSelected };
   }
 
@@ -87,14 +66,9 @@ class SelectFilter extends Component {
         <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>)
-      );
-    }
+    Object.keys(options).forEach(key =>
+      optionTags.push(<option key={ key } value={ key }>{ options[key] }</option>)
+    );
     return optionTags;
   }
 
@@ -154,7 +128,7 @@ class SelectFilter extends Component {
 SelectFilter.propTypes = {
   onFilter: PropTypes.func.isRequired,
   column: PropTypes.object.isRequired,
-  options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+  options: PropTypes.object.isRequired,
   comparator: PropTypes.oneOf([LIKE, EQ]),
   placeholder: PropTypes.string,
   style: PropTypes.object,

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

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

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

@@ -68,9 +68,6 @@ export default (
           currPage = newPage;
           needNewState = true;
         }
-      } else {
-        this.currPage = nextProps.pagination.options.page;
-        this.currSizePerPage = nextProps.pagination.options.sizePerPage;
       }
 
       if (needNewState) {

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

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

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

@@ -160,27 +160,6 @@ describe('PaginationContext', () => {
       });
     });
 
-    describe('when remote pagination is enable', () => {
-      beforeEach(() => {
-        wrapper = shallow(shallowContext({ ...defaultPagination }, true));
-        instance = wrapper.instance();
-        wrapper.render();
-        nextProps = {
-          data,
-          pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } }
-        };
-        instance.componentWillReceiveProps(nextProps);
-      });
-
-      it('should always set currPage from nextProps.pagination.options.page', () => {
-        expect(instance.currPage).toEqual(nextProps.pagination.options.page);
-      });
-
-      it('should always set currSizePerPage from nextProps.pagination.options.sizePerPage', () => {
-        expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
-      });
-    });
-
     describe('when page is not align', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext({

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

@@ -63,22 +63,6 @@ const { SearchBar } = Search;
 
 ### Search Options
 
-#### defaultSearch - [string]
-Accept a string that will be used for default searching when first time table render.
-
-```js
-<ToolkitProvider
-  keyField="id"
-  data={ products }
-  columns={ columns }
-  search={ {
-    defaultSearch: 'search something here'
-  } }
->
-  // ...
-</ToolkitProvider>
-```
-
 #### searchFormatted - [bool]
 If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
 

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

@@ -17,7 +17,6 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     search: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.shape({
-        defaultSearch: PropTypes.string,
         searchFormatted: PropTypes.bool
       })
     ]),
@@ -43,7 +42,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
   constructor(props) {
     super(props);
     this.state = {
-      searchText: typeof props.search === 'object' ? (props.search.defaultSearch || '') : ''
+      searchText: ''
     };
     this._ = null;
     this.onSearch = this.onSearch.bind(this);
@@ -86,7 +85,6 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
     return (
       <ToolkitContext.Provider value={ {
         searchProps: {
-          searchText: this.state.searchText,
           onSearch: this.onSearch
         },
         csvProps: {

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-toolkit",
-  "version": "1.1.1",
+  "version": "1.0.3",
   "description": "The toolkit for react-bootstrap-table2",
   "main": "./lib/index.js",
   "repository": {

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

@@ -58,7 +58,7 @@ export const save = (
   }
 ) => {
   FileSaver.saveAs(
-    new Blob([content], { type: 'text/plain;charset=utf-8' }),
+    new Blob(['\ufeff', content], { type: 'text/plain;charset=utf-8' }),
     fileName,
     noAutoBOM
   );

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

@@ -47,7 +47,6 @@ const SearchBar = ({
       style={ style }
       onKeyUp={ () => debounceCallback() }
       className={ `form-control ${className}` }
-      defaultValue={ searchText }
       placeholder={ placeholder || SearchBar.defaultProps.placeholder }
       { ...rest }
     />

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

@@ -39,10 +39,8 @@ export default (options = {
       const { data, columns } = this.props;
       let { searchText } = this.props;
 
-      if (isRemoteSearch()) {
-        if (this.performRemoteSearch) {
-          handleRemoteSearchChange(searchText);
-        }
+      if (isRemoteSearch() && this.performRemoteSearch) {
+        handleRemoteSearchChange(searchText);
         return data;
       }
 

packages/react-bootstrap-table2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table-next",
-  "version": "1.4.4",
+  "version": "1.1.4",
   "description": "Next generation of react-bootstrap-table",
   "main": "./lib/index.js",
   "repository": {

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

@@ -5,12 +5,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import _ from './utils';
-import SimpleRow from './row/simple-row';
-import RowAggregator from './row/aggregate-row';
-import RowSection from './row/row-section';
+import Row from './simple-row';
+import RowAggregator from './row-aggregator';
+import RowSection from './row-section';
 import Const from './const';
-import withRowSelection from './row-selection/row-consumer';
-import withRowExpansion from './row-expand/row-consumer';
+import bindSelection from './row-selection/row-binder';
+import bindExpansion from './row-expand/row-binder';
 
 class Body extends React.Component {
   constructor(props) {
@@ -18,13 +18,13 @@ class Body extends React.Component {
     if (props.cellEdit.createContext) {
       this.EditingCell = props.cellEdit.createEditingCell(_, props.cellEdit.options.onStartEdit);
     }
+    this.RowComponent = bindSelection(RowAggregator);
   }
 
   render() {
     const {
       columns,
       data,
-      tabIndexCell,
       keyField,
       isEmpty,
       noDataIndication,
@@ -46,21 +46,21 @@ class Body extends React.Component {
       }
       content = <RowSection content={ indication } colSpan={ visibleColumnSize } />;
     } else {
-      let RowComponent = SimpleRow;
+      let RowComponent = Row;
       const selectRowEnabled = selectRow.mode !== Const.ROW_SELECT_DISABLED;
       const expandRowEnabled = !!expandRow.renderer;
 
       const additionalRowProps = {};
       if (expandRowEnabled) {
-        RowComponent = withRowExpansion(RowAggregator, visibleColumnSize);
+        RowComponent = bindExpansion(RowAggregator, visibleColumnSize);
       }
 
-      if (selectRowEnabled) {
-        RowComponent = withRowSelection(expandRowEnabled ? RowComponent : RowAggregator);
-      }
+      // if (selectRowEnabled) {
+      //   RowComponent = bindSelection(expandRowEnabled ? RowComponent : RowAggregator);
+      // }
 
       if (cellEdit.createContext) {
-        RowComponent = cellEdit.withRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _);
+        RowComponent = cellEdit.bindRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _);
         additionalRowProps.EditingCellComponent = this.EditingCell;
       }
 
@@ -74,13 +74,11 @@ class Body extends React.Component {
         const baseRowProps = {
           key,
           row,
-          tabIndexCell,
           columns,
           keyField,
           cellEdit,
           value: key,
           rowIndex: index,
-          visibleColumnSize,
           attrs: rowEvents || {},
           ...additionalRowProps
         };
@@ -88,7 +86,7 @@ class Body extends React.Component {
         baseRowProps.style = _.isFunction(rowStyle) ? rowStyle(row, index) : rowStyle;
         baseRowProps.className = (_.isFunction(rowClasses) ? rowClasses(row, index) : rowClasses);
 
-        return <RowComponent { ...baseRowProps } />;
+        return <this.RowComponent { ...baseRowProps } />;
       });
     }
 

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

@@ -15,13 +15,14 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     super(props);
     this.validateProps();
     if (props.registerExposedAPI) {
-      props.registerExposedAPI(this.getData);
+      const getData = () => this.getData();
+      props.registerExposedAPI(getData);
     }
   }
 
   // Exposed APIs
-  getData() {
-    return this.visibleRows();
+  getData = () => {
+    return this.props.data;
   }
 
   render() {
@@ -39,12 +40,11 @@ class BootstrapTable extends PropsBaseResolver(Component) {
 
   renderTable() {
     const {
+      data,
       columns,
       keyField,
-      tabIndexCell,
       id,
       classes,
-      bootstrap4,
       striped,
       hover,
       bordered,
@@ -66,7 +66,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       'table-striped': striped,
       'table-hover': hover,
       'table-bordered': bordered,
-      [(bootstrap4 ? 'table-sm' : 'table-condensed')]: condensed
+      'table-condensed': condensed
     }, classes);
 
     const tableCaption = (caption && <Caption>{ caption }</Caption>);
@@ -87,9 +87,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             expandRow={ expandRow }
           />
           <Body
-            data={ this.getData() }
+            data={ data }
             keyField={ keyField }
-            tabIndexCell={ tabIndexCell }
             columns={ columns }
             isEmpty={ this.isEmpty() }
             visibleColumnSize={ this.visibleColumnSize() }
@@ -119,7 +118,6 @@ BootstrapTable.propTypes = {
   striped: PropTypes.bool,
   bordered: PropTypes.bool,
   hover: PropTypes.bool,
-  tabIndexCell: PropTypes.bool,
   id: PropTypes.string,
   classes: PropTypes.string,
   wrapperClasses: PropTypes.string,
@@ -138,9 +136,7 @@ BootstrapTable.propTypes = {
       Const.ROW_SELECT_DISABLED
     ]).isRequired,
     clickToSelect: PropTypes.bool,
-    clickToExpand: PropTypes.bool,
     clickToEdit: PropTypes.bool,
-    hideSelectAll: PropTypes.bool,
     onSelect: PropTypes.func,
     onSelectAll: PropTypes.func,
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
@@ -158,8 +154,6 @@ BootstrapTable.propTypes = {
     onExpandAll: PropTypes.func,
     nonExpandable: PropTypes.array,
     showExpandColumn: PropTypes.bool,
-    onlyOneExpanding: PropTypes.bool,
-    expandByColumnOnly: PropTypes.bool,
     expandColumnRenderer: PropTypes.func,
     expandHeaderColumnRenderer: PropTypes.func
   }),

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

@@ -2,10 +2,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import eventDelegater from './cell-event-delegater';
 import _ from './utils';
 
-class Cell extends eventDelegater(Component) {
+class Cell extends Component {
   constructor(props) {
     super(props);
     this.handleEditingCell = this.handleEditingCell.bind(this);
@@ -35,8 +34,7 @@ class Cell extends eventDelegater(Component) {
       !_.isEqual(this.props.style, nextProps.style) ||
       !_.isEqual(this.props.column.formatExtraData, nextProps.column.formatExtraData) ||
       !_.isEqual(this.props.column.events, nextProps.column.events) ||
-      !_.isEqual(this.props.column.attrs, nextProps.column.attrs) ||
-      this.props.tabIndex !== nextProps.tabIndex;
+      !_.isEqual(this.props.column.attrs, nextProps.column.attrs);
     return shouldUpdate;
   }
 
@@ -74,8 +72,11 @@ class Cell extends eventDelegater(Component) {
       formatter,
       formatExtraData
     } = column;
-    const attrs = this.delegate({ ...rest });
-    let content = column.isDummyField ? null : _.get(row, dataField);
+    const attrs = { ...rest };
+    let content = this.props.children;
+    if (!content) {
+      content = column.isDummyField ? null : _.get(row, dataField);
+    }
 
     if (formatter) {
       content = column.formatter(content, row, rowIndex, formatExtraData);

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

@@ -54,16 +54,6 @@ const withContext = Base =>
       }
     }
 
-    componentWillReceiveProps(nextProps) {
-      if (!nextProps.pagination && this.props.pagination) {
-        this.PaginationContext = null;
-      }
-      if (nextProps.pagination && !this.props.pagination) {
-        this.PaginationContext = nextProps.pagination.createContext(
-          this.isRemotePagination, this.handleRemotePageChange);
-      }
-    }
-
     renderBase() {
       return (
         rootProps,
@@ -73,7 +63,6 @@ const withContext = Base =>
         paginationProps,
       ) => (
         <Base
-          ref={ n => this.table = n }
           { ...this.props }
           { ...sortProps }
           { ...filterProps }
@@ -94,7 +83,6 @@ const withContext = Base =>
       ) => (
         <this.SelectionContext.Provider
           { ...baseProps }
-          ref={ n => this.selectionContext = n }
           selectRow={ this.props.selectRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >
@@ -121,7 +109,6 @@ const withContext = Base =>
       ) => (
         <this.RowExpandContext.Provider
           { ...baseProps }
-          ref={ n => this.rowExpandContext = n }
           expandRow={ this.props.expandRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >

packages/react-bootstrap-table2/src/contexts/row-expand-context.js

@@ -23,16 +23,12 @@ class RowExpandProvider extends React.Component {
   }
 
   handleRowExpand = (rowKey, expanded, rowIndex, e) => {
-    const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
-    if (nonExpandable && nonExpandable.includes(rowKey)) {
-      return;
-    }
+    const { data, keyField, expandRow: { onExpand } } = this.props;
 
     let currExpanded = [...this.state.expanded];
 
     if (expanded) {
-      if (onlyOneExpanding) currExpanded = [rowKey];
-      else currExpanded.push(rowKey);
+      currExpanded.push(rowKey);
     } else {
       currExpanded = currExpanded.filter(value => value !== rowKey);
     }
@@ -76,7 +72,6 @@ class RowExpandProvider extends React.Component {
       <RowExpandContext.Provider
         value={ {
           ...this.props.expandRow,
-          nonExpandable: this.props.expandRow.nonExpandable,
           expanded: this.state.expanded,
           isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
           onRowExpand: this.handleRowExpand,

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

@@ -22,7 +22,7 @@ class SelectionProvider extends React.Component {
     }
   }
 
-  state = { selected: this.props.selectRow.selected || [] };
+  state = { selected: (this.props.selectRow && this.props.selectRow.selected) || [] };
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.selectRow) {
@@ -43,24 +43,20 @@ class SelectionProvider extends React.Component {
 
     let currSelected = [...this.state.selected];
 
-    let result = true;
-    if (onSelect) {
-      const row = dataOperator.getRowByRowId(data, keyField, rowKey);
-      result = onSelect(row, checked, rowIndex, e);
+    if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
+      currSelected = [rowKey];
+    } else if (checked) { // when select mode is checkbox
+      currSelected.push(rowKey);
+    } else {
+      currSelected = currSelected.filter(value => value !== rowKey);
     }
 
-    this.setState(() => {
-      if (result === true || result === undefined) {
-        if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
-          currSelected = [rowKey];
-        } else if (checked) { // when select mode is checkbox
-          currSelected.push(rowKey);
-        } else {
-          currSelected = currSelected.filter(value => value !== rowKey);
-        }
-      }
-      return { selected: currSelected };
-    });
+    if (onSelect) {
+      const row = dataOperator.getRowByRowId(data, keyField, rowKey);
+      onSelect(row, checked, rowIndex, e);
+    }
+
+    this.setState(() => ({ selected: currSelected }));
   }
 
   handleAllRowsSelect = (e, isUnSelect) => {
@@ -82,21 +78,10 @@ class SelectionProvider extends React.Component {
       currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
     }
 
-    let result;
     if (onSelectAll) {
-      result = onSelectAll(
-        !isUnSelect,
-        dataOperator.getSelectedRows(
-          data,
-          keyField,
-          isUnSelect ? this.state.selected : currSelected
-        ),
-        e
-      );
-      if (Array.isArray(result)) {
-        currSelected = result;
-      }
+      onSelectAll(!isUnSelect, dataOperator.getSelectedRows(data, keyField, currSelected), e);
     }
+
     this.setState(() => ({ selected: currSelected }));
   }
 

packages/react-bootstrap-table2/src/header-cell.js

@@ -24,7 +24,6 @@ const HeaderCell = (props) => {
   const {
     text,
     sort,
-    sortCaret,
     filter,
     filterRenderer,
     headerTitle,
@@ -50,7 +49,6 @@ const HeaderCell = (props) => {
 
   if (headerStyle) {
     cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
-    cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
   }
 
   if (headerTitle) {
@@ -70,7 +68,7 @@ const HeaderCell = (props) => {
     cellAttrs.className = cs(cellAttrs.className, 'sortable');
 
     if (sorting) {
-      sortSymbol = sortCaret ? sortCaret(sortOrder, column) : <SortCaret order={ sortOrder } />;
+      sortSymbol = <SortCaret order={ sortOrder } />;
 
       // append customized classes or style if table was sorting based on the current column.
       cellClasses = cs(
@@ -87,7 +85,7 @@ const HeaderCell = (props) => {
           : headerSortingStyle
       };
     } else {
-      sortSymbol = sortCaret ? sortCaret(undefined, column) : <SortSymbol />;
+      sortSymbol = <SortSymbol />;
     }
   }
 
@@ -152,7 +150,6 @@ HeaderCell.propTypes = {
   onSort: PropTypes.func,
   sorting: PropTypes.bool,
   sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]),
-  sortCaret: PropTypes.func,
   isLastSorting: PropTypes.bool,
   onFilter: PropTypes.func,
   onExternalFilter: PropTypes.func

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

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types';
 import HeaderCell from './header-cell';
 import SelectionHeaderCell from './row-selection/selection-header-cell';
 import ExpandHeaderCell from './row-expand/expand-header-cell';
-import withHeaderSelection from './row-selection/selection-header-cell-consumer';
-import withHeaderExpansion from './row-expand/expand-header-cell-consumer';
+import bindSelection from './row-selection/selection-header-cell-binder';
+import bindExpansion from './row-expand/expand-header-cell-binder';
 
 const Header = (props) => {
   const {
@@ -18,18 +18,19 @@ const Header = (props) => {
     sortOrder,
     selectRow,
     onExternalFilter,
-    expandRow
+    expandRow,
+    bootstrap4
   } = props;
 
   let SelectionHeaderCellComp = () => null;
   let ExpansionHeaderCellComp = () => null;
 
   if (expandRow.showExpandColumn) {
-    ExpansionHeaderCellComp = withHeaderExpansion(ExpandHeaderCell);
+    ExpansionHeaderCellComp = bindExpansion(ExpandHeaderCell);
   }
 
   if (selectRow) {
-    SelectionHeaderCellComp = withHeaderSelection(SelectionHeaderCell);
+    SelectionHeaderCellComp = bindSelection(SelectionHeaderCell);
   }
 
   return (
@@ -49,6 +50,7 @@ const Header = (props) => {
               return (
                 <HeaderCell
                   index={ i }
+                  bootstrap4={ bootstrap4 }
                   key={ column.dataField }
                   column={ column }
                   onSort={ onSort }
@@ -76,7 +78,8 @@ Header.propTypes = {
   selectRow: PropTypes.object,
   onExternalFilter: PropTypes.func,
   className: PropTypes.string,
-  expandRow: PropTypes.object
+  expandRow: PropTypes.object,
+  bootstrap4: PropTypes.bool
 };
 
 export default Header;

packages/react-bootstrap-table2/src/props-resolver/index.js

@@ -1,4 +1,3 @@
-import _ from '../utils';
 import ColumnResolver from './column-resolver';
 
 export default ExtendBase =>
@@ -16,13 +15,4 @@ export default ExtendBase =>
     isEmpty() {
       return this.props.data.length === 0;
     }
-
-    visibleRows() {
-      const { data, hiddenRows, keyField } = this.props;
-      if (!hiddenRows || hiddenRows.length === 0) return data;
-      return data.filter((row) => {
-        const key = _.get(row, keyField);
-        return !hiddenRows.includes(key);
-      });
-    }
   };

packages/react-bootstrap-table2/src/row-aggregator-content.js

@@ -0,0 +1,48 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/no-array-index-key: 0 */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+// import eventDelegater from './row-event-delegater';
+import RowContent from './row-pure-content';
+// import shouldRowUpdater from './row-should-updater';
+
+/* eslint react/prefer-stateless-function: 0 */
+class RowAggregatorContent extends Component {
+  render() {
+    const {
+      className,
+      style,
+      attrs,
+      shouldUpdateRowContent,
+      ...rest
+    } = this.props;
+
+    return (
+      <tr style={ style } className={ className } { ...attrs }>
+        { this.props.children }
+        <RowContent shouldUpdate={ shouldUpdateRowContent } { ...rest } />
+      </tr>
+    );
+  }
+}
+
+RowAggregatorContent.propTypes = {
+  row: PropTypes.object.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  columns: PropTypes.array.isRequired,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  attrs: PropTypes.object,
+  shouldUpdateRowContent: PropTypes.bool
+};
+
+RowAggregatorContent.defaultProps = {
+  editable: true,
+  style: {},
+  className: null,
+  attrs: {},
+  shouldUpdateRowContent: true
+};
+
+export default RowAggregatorContent;

packages/react-bootstrap-table2/src/row-aggregator.js

@@ -0,0 +1,178 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/no-array-index-key: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from './utils';
+import RowContent from './row-pure-content';
+// import RowAggregatorContent from './row-aggregator-content';
+import shouldRowUpdater from './row-should-updater';
+import ExpandCell from './row-expand/expand-cell';
+import SelectionCell from './row-selection/selection-cell';
+// import Cell from './cell';
+import eventDelegater from './row-event-delegater';
+
+export default class RowAggregator extends shouldRowUpdater(eventDelegater(React.Component)) {
+  static propTypes = {
+    attrs: PropTypes.object,
+    style: PropTypes.object
+  }
+  static defaultProps = {
+    attrs: {},
+    style: {}
+  }
+
+  constructor(props) {
+    super(props);
+    this.clickNum = 0;
+    this.shouldUpdateRowContent = false;
+    this.createClickEventHandler = this.createClickEventHandler.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (
+      this.props.selected !== nextProps.selected ||
+      this.props.expanded !== nextProps.expanded ||
+      this.props.selectable !== nextProps.selectable ||
+      this.shouldUpdateByWhenEditing(nextProps) ||
+      this.shouldUpdatedBySelfProps(nextProps)
+    ) {
+      this.shouldUpdateRowContent = this.shouldUpdatedByNormalProps(nextProps);
+      return true;
+    }
+    this.shouldUpdateRowContent = this.shouldUpdatedByNormalProps(nextProps);
+
+    return this.shouldUpdateRowContent;
+  }
+
+  createClickEventHandler(cb) {
+    return (e) => {
+      const {
+        row,
+        selected,
+        keyField,
+        selectable,
+        expandable,
+        rowIndex,
+        expanded,
+        expandRow,
+        selectRow,
+        DELAY_FOR_DBCLICK
+      } = this.props;
+
+      const clickFn = () => {
+        if (cb) {
+          cb(e, row, rowIndex);
+        }
+        const key = _.get(row, keyField);
+        if (expandRow && expandable) {
+          expandRow.onRowExpand(key, !expanded, rowIndex, e);
+        }
+        if (selectRow.clickToSelect && selectable) {
+          selectRow.onRowSelect(key, !selected, rowIndex, e);
+        }
+      };
+
+      if (DELAY_FOR_DBCLICK) {
+        this.clickNum += 1;
+        _.debounce(() => {
+          if (this.clickNum === 1) {
+            clickFn();
+          }
+          this.clickNum = 0;
+        }, DELAY_FOR_DBCLICK)();
+      } else {
+        clickFn();
+      }
+    };
+  }
+
+  render() {
+    const {
+      row,
+      columns,
+      keyField,
+      rowIndex,
+      style,
+      className,
+      attrs,
+      selectRow,
+      expandRow,
+      expanded,
+      selected,
+      selectable,
+      ...rest
+    } = this.props;
+    const key = _.get(row, keyField);
+    const { hideSelectColumn, clickToSelect } = selectRow;
+    const { showExpandColumn } = expandRow;
+
+    const newAttrs = this.delegate({ ...attrs });
+    if (clickToSelect || !!expandRow.renderer) {
+      newAttrs.onClick = this.createClickEventHandler(newAttrs.onClick);
+    }
+
+    return (
+      <tr
+        style={ style }
+        className={ className }
+        { ...newAttrs }
+      >
+        <td>123</td>
+        <td>12121212</td>
+      </tr>
+    );
+    // const content0 = _.get(row, columns[1].dataField);
+    // const content1 = _.get(row, columns[1].dataField);
+    // const content2 = _.get(row, columns[2].dataField);
+    // return (
+    //   <tr
+    //     style={ style }
+    //     className={ className }
+    //     onClick={ e => selectRow.onRowSelect(key, !selected, rowIndex, e) }
+    //   >
+    //     <td>1</td>
+    //     <td>2</td>
+    //     <td>3</td>
+    //     <td>4</td>
+    //   </tr>
+    // );
+
+    // const newCols = [{ fake: true }, ...columns];
+
+    // return (
+    //   <tr
+    //     style={ style }
+    //     className={ className }
+    //     { ...newAttrs }
+    //   >
+    //     {
+    //       newCols.map((column, i) => {
+    //         if (column.fake) {
+    //           return (
+    //             <Cell
+    //               key={ `${key}_${i}_sel}` }
+    //               column={ {} }
+    //               row={ {} }
+    //               rowIndex={ rowIndex }
+    //               columnIndex={ i }
+    //             >
+    //               <input type="checkbox" />
+    //             </Cell>
+    //           );
+    //         }
+    //         const content = _.get(row, column.dataField);
+    //         return (
+    //           <Cell
+    //             key={ `${key}_${content}}` }
+    //             row={ row }
+    //             rowIndex={ rowIndex }
+    //             column={ column }
+    //             columnIndex={ i }
+    //           />
+    //         );
+    //       })
+    //     }
+    //   </tr>
+    // );
+  }
+}

packages/react-bootstrap-table2/src/row-event-delegater.js

@@ -2,21 +2,21 @@ const events = [
   'onClick',
   'onDoubleClick',
   'onMouseEnter',
-  'onMouseLeave',
-  'onContextMenu'
+  'onMouseLeave'
 ];
 
 export default ExtendBase =>
-  class CellEventDelegater extends ExtendBase {
+  class RowEventDelegater extends ExtendBase {
     constructor(props) {
       super(props);
+      this.clickNum = 0;
       this.createDefaultEventHandler = this.createDefaultEventHandler.bind(this);
     }
 
     createDefaultEventHandler(cb) {
       return (e) => {
-        const { column, columnIndex } = this.props;
-        cb(e, column, columnIndex);
+        const { row, rowIndex } = this.props;
+        cb(e, row, rowIndex);
       };
     }
 

packages/react-bootstrap-table2/src/row-expand/expand-cell.js

@@ -10,11 +10,9 @@ export default class ExpandCell extends Component {
   static propTypes = {
     rowKey: PropTypes.any,
     expanded: PropTypes.bool.isRequired,
-    expandable: PropTypes.bool.isRequired,
     onRowExpand: PropTypes.func.isRequired,
     expandColumnRenderer: PropTypes.func,
-    rowIndex: PropTypes.number,
-    tabIndex: PropTypes.number
+    rowIndex: PropTypes.number
   }
 
   constructor() {
@@ -22,35 +20,21 @@ export default class ExpandCell extends Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
-  shouldComponentUpdate(nextProps) {
-    const shouldUpdate =
-      this.props.rowIndex !== nextProps.rowIndex ||
-      this.props.expanded !== nextProps.expanded ||
-      this.props.rowKey !== nextProps.rowKey ||
-      this.props.tabIndex !== nextProps.tabIndex;
-
-    return shouldUpdate;
-  }
-
   handleClick(e) {
     const { rowKey, expanded, onRowExpand, rowIndex } = this.props;
-    e.stopPropagation();
-    onRowExpand(rowKey, !expanded, rowIndex, e);
+
+    onRowExpand(rowKey, expanded, rowIndex, e);
   }
 
   render() {
-    const { expanded, expandable, expandColumnRenderer, tabIndex, rowKey } = this.props;
-    const attrs = {};
-    if (tabIndex !== -1) attrs.tabIndex = tabIndex;
+    const { expanded, expandColumnRenderer } = this.props;
 
     return (
-      <td onClick={ this.handleClick } { ...attrs }>
+      <td onClick={ this.handleClick }>
         {
           expandColumnRenderer ? expandColumnRenderer({
-            expandable,
-            expanded,
-            rowKey
-          }) : (expandable ? (expanded ? '(-)' : '(+)') : '')
+            expanded
+          }) : (expanded ? '(-)' : '(+)')
         }
       </td>
     );

packages/react-bootstrap-table2/src/row-pure-content.js

@@ -1,15 +1,19 @@
 /* eslint react/prop-types: 0 */
 /* eslint react/no-array-index-key: 0 */
-/* eslint no-plusplus: 0 */
 import React from 'react';
 
-import _ from '../utils';
-import Cell from '../cell';
+import _ from './utils';
+import Cell from './cell';
 
-export default class RowPureContent extends React.Component {
+export default class RowContent extends React.Component {
+  // shouldComponentUpdate(nextProps) {
+  //   return this.shouldUpdatedByNormalProps(nextProps);
+  // }
   shouldComponentUpdate(nextProps) {
-    if (typeof nextProps.shouldUpdate !== 'undefined') {
-      return nextProps.shouldUpdate;
+    if (typeof this.props.shouldUpdate !== 'undefined') {
+      if (nextProps.shouldUpdate === this.props.shouldUpdate) {
+        return false;
+      }
     }
     return true;
   }
@@ -26,12 +30,9 @@ export default class RowPureContent extends React.Component {
       onStart,
       clickToEdit,
       dbclickToEdit,
-      EditingCellComponent,
-      tabIndexStart
+      EditingCellComponent
     } = this.props;
 
-    let tabIndex = tabIndexStart;
-
     return columns.map((column, index) => {
       if (!column.hidden) {
         const { dataField } = column;
@@ -50,21 +51,13 @@ export default class RowPureContent extends React.Component {
         // render cell
         let cellTitle;
         let cellStyle = {};
-        let cellAttrs = {
+        const cellAttrs = {
           ..._.isFunction(column.attrs)
             ? column.attrs(content, row, rowIndex, index)
-            : column.attrs
+            : column.attrs,
+          ...column.events
         };
 
-        if (column.events) {
-          const events = Object.assign({}, column.events);
-          Object.keys(Object.assign({}, column.events)).forEach((key) => {
-            const originFn = events[key];
-            events[key] = (...rest) => originFn(...rest, row, rowIndex);
-          });
-          cellAttrs = { ...cellAttrs, ...events };
-        }
-
         const cellClasses = _.isFunction(column.classes)
           ? column.classes(content, row, rowIndex, index)
           : column.classes;
@@ -99,10 +92,6 @@ export default class RowPureContent extends React.Component {
           editableCell = column.editable(content, row, rowIndex, index);
         }
 
-        if (tabIndexStart !== -1) {
-          cellAttrs.tabIndex = tabIndex++;
-        }
-
         return (
           <Cell
             key={ `${content}-${index}` }

packages/react-bootstrap-table2/src/row-selection/row-binder.js

@@ -49,8 +49,7 @@ export default (Component) => {
       />
     );
   };
-
-  function withConsumer(props) {
+  function withSelectionConsumer(props) {
     return (
       <SelectionContext.Consumer>
         { selectRow => renderWithSelection(props, selectRow) }
@@ -58,6 +57,6 @@ export default (Component) => {
     );
   }
 
-  withConsumer.displayName = 'WithSelectionRowConsumer';
-  return withConsumer;
+  withSelectionConsumer.displayName = 'WithSelectionConsumer';
+  return withSelectionConsumer;
 };

packages/react-bootstrap-table2/src/row-selection/selection-cell.js

@@ -15,23 +15,21 @@ export default class SelectionCell extends Component {
     onRowSelect: PropTypes.func,
     disabled: PropTypes.bool,
     rowIndex: PropTypes.number,
-    tabIndex: PropTypes.number,
     clickToSelect: PropTypes.bool,
     selectionRenderer: PropTypes.func
   }
 
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
   shouldComponentUpdate(nextProps) {
     const shouldUpdate =
-      this.props.rowIndex !== nextProps.rowIndex ||
       this.props.selected !== nextProps.selected ||
-      this.props.disabled !== nextProps.disabled ||
       this.props.rowKey !== nextProps.rowKey ||
-      this.props.tabIndex !== nextProps.tabIndex;
+      this.props.rowIndex !== nextProps.rowIndex ||
+      this.props.disabled !== nextProps.disabled;
 
     return shouldUpdate;
   }
@@ -62,18 +60,14 @@ export default class SelectionCell extends Component {
       mode: inputType,
       selected,
       disabled,
-      tabIndex,
       selectionRenderer
     } = this.props;
 
-    const attrs = {};
-    if (tabIndex !== -1) attrs.tabIndex = tabIndex;
-
     return (
       <BootstrapContext.Consumer>
         {
           ({ bootstrap4 }) => (
-            <td onClick={ this.handleClick } { ...attrs }>
+            <td onClick={ this.handleClick }>
               {
                 selectionRenderer ? selectionRenderer({
                   mode: inputType,

packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js

@@ -27,7 +27,6 @@ export default class SelectionHeaderCell extends Component {
     mode: PropTypes.string.isRequired,
     checkedStatus: PropTypes.string,
     onAllRowsSelect: PropTypes.func,
-    hideSelectAll: PropTypes.bool,
     selectionHeaderRenderer: PropTypes.func
   }
 
@@ -64,10 +63,7 @@ export default class SelectionHeaderCell extends Component {
       CHECKBOX_STATUS_CHECKED, CHECKBOX_STATUS_INDETERMINATE, ROW_SELECT_MULTIPLE
     } = Const;
 
-    const { mode, checkedStatus, selectionHeaderRenderer, hideSelectAll } = this.props;
-    if (hideSelectAll) {
-      return <th data-row-selection />;
-    }
+    const { mode, checkedStatus, selectionHeaderRenderer } = this.props;
 
     const checked = checkedStatus === CHECKBOX_STATUS_CHECKED;
 

packages/react-bootstrap-table2/src/row-should-updater.js

@@ -1,10 +1,9 @@
 /* eslint react/prop-types: 0 */
-import _ from '../utils';
+import _ from './utils';
 
 export default ExtendBase =>
   class RowShouldUpdater extends ExtendBase {
-    shouldUpdateByCellEditing(nextProps) {
-      if (!(this.props.clickToEdit || this.props.dbclickToEdit)) return false;
+    shouldUpdateByWhenEditing(nextProps) {
       return (
         nextProps.editingRowIdx === nextProps.rowIndex ||
         (this.props.editingRowIdx === nextProps.rowIndex &&
@@ -24,14 +23,9 @@ export default ExtendBase =>
       const shouldUpdate =
         this.props.rowIndex !== nextProps.rowIndex ||
         this.props.editable !== nextProps.editable ||
-        !_.isEqual(this.props.row, nextProps.row) ||
-        this.props.columns.length !== nextProps.columns.length;
+        this.props.columns.length !== nextProps.columns.length ||
+        !_.isEqual(this.props.row, nextProps.row);
 
       return shouldUpdate;
     }
-
-    shouldUpdateChild(nextProps) {
-      return this.shouldUpdateByCellEditing(nextProps) ||
-        this.shouldUpdatedByNormalProps(nextProps);
-    }
   };

packages/react-bootstrap-table2/src/row/aggregate-row.js

@@ -1,120 +0,0 @@
-/* eslint react/prop-types: 0 */
-/* eslint no-plusplus: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from '../utils';
-import ExpandCell from '../row-expand/expand-cell';
-import SelectionCell from '../row-selection/selection-cell';
-import shouldUpdater from './should-updater';
-import eventDelegater from './event-delegater';
-import RowPureContent from './row-pure-content';
-
-export default class RowAggregator extends shouldUpdater(eventDelegater(React.Component)) {
-  static propTypes = {
-    attrs: PropTypes.object,
-    style: PropTypes.object
-  }
-
-  static defaultProps = {
-    attrs: {},
-    style: {}
-  }
-
-  constructor(props) {
-    super(props);
-    this.clickNum = 0;
-    this.shouldUpdateRowContent = false;
-    this.createClickEventHandler = this.createClickEventHandler.bind(this);
-  }
-
-  shouldComponentUpdate(nextProps) {
-    if (
-      this.props.selected !== nextProps.selected ||
-      this.props.expanded !== nextProps.expanded ||
-      this.props.expandable !== nextProps.expandable ||
-      this.props.selectable !== nextProps.selectable ||
-      this.shouldUpdatedBySelfProps(nextProps)
-    ) {
-      this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
-      return true;
-    }
-    this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
-
-    return this.shouldUpdateRowContent;
-  }
-
-  render() {
-    const {
-      row,
-      columns,
-      keyField,
-      rowIndex,
-      style,
-      className,
-      attrs,
-      selectRow,
-      expandRow,
-      expanded,
-      expandable,
-      selected,
-      selectable,
-      visibleColumnSize,
-      tabIndexCell,
-      ...rest
-    } = this.props;
-    const key = _.get(row, keyField);
-    const { hideSelectColumn, clickToSelect } = selectRow;
-    const { showExpandColumn } = expandRow;
-
-    const newAttrs = this.delegate({ ...attrs });
-    if (clickToSelect || !!expandRow.renderer) {
-      newAttrs.onClick = this.createClickEventHandler(newAttrs.onClick);
-    }
-
-    let tabIndexStart = (rowIndex * visibleColumnSize) + 1;
-
-    return (
-      <tr
-        style={ style }
-        className={ className }
-        { ...newAttrs }
-      >
-        {
-          showExpandColumn ? (
-            <ExpandCell
-              { ...expandRow }
-              rowKey={ key }
-              rowIndex={ rowIndex }
-              expanded={ expanded }
-              expandable={ expandable }
-              tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
-            />
-          ) : null
-        }
-        {
-          !hideSelectColumn
-            ? (
-              <SelectionCell
-                { ...selectRow }
-                rowKey={ key }
-                rowIndex={ rowIndex }
-                selected={ selected }
-                disabled={ !selectable }
-                tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
-              />
-            )
-            : null
-        }
-        <RowPureContent
-          row={ row }
-          columns={ columns }
-          keyField={ keyField }
-          rowIndex={ rowIndex }
-          shouldUpdate={ this.shouldUpdateRowContent }
-          tabIndexStart={ tabIndexCell ? tabIndexStart : -1 }
-          { ...rest }
-        />
-      </tr>
-    );
-  }
-}

packages/react-bootstrap-table2/src/row/event-delegater.js

@@ -1,83 +0,0 @@
-import _ from '../utils';
-import Const from '../const';
-
-const events = [
-  'onClick',
-  'onDoubleClick',
-  'onMouseEnter',
-  'onMouseLeave',
-  'onContextMenu'
-];
-
-export default ExtendBase =>
-  class RowEventDelegater extends ExtendBase {
-    constructor(props) {
-      super(props);
-      this.clickNum = 0;
-      this.createDefaultEventHandler = this.createDefaultEventHandler.bind(this);
-      this.createClickEventHandler = this.createClickEventHandler.bind(this);
-    }
-
-    createClickEventHandler(cb) {
-      return (e) => {
-        const {
-          row,
-          selected,
-          keyField,
-          selectable,
-          expandable,
-          rowIndex,
-          expanded,
-          expandRow,
-          selectRow,
-          DELAY_FOR_DBCLICK
-        } = this.props;
-        const clickFn = () => {
-          if (cb) {
-            cb(e, row, rowIndex);
-          }
-          const key = _.get(row, keyField);
-          if (expandRow && expandable && !expandRow.expandByColumnOnly) {
-            if (
-              (selectRow.mode !== Const.ROW_SELECT_DISABLED && selectRow.clickToExpand) ||
-              selectRow.mode === Const.ROW_SELECT_DISABLED
-            ) {
-              expandRow.onRowExpand(key, !expanded, rowIndex, e);
-            }
-          }
-          if (selectRow.clickToSelect && selectable) {
-            selectRow.onRowSelect(key, !selected, rowIndex, e);
-          }
-        };
-
-        if (DELAY_FOR_DBCLICK) {
-          this.clickNum += 1;
-          _.debounce(() => {
-            if (this.clickNum === 1) {
-              clickFn();
-            }
-            this.clickNum = 0;
-          }, DELAY_FOR_DBCLICK)();
-        } else {
-          clickFn();
-        }
-      };
-    }
-
-    createDefaultEventHandler(cb) {
-      return (e) => {
-        const { row, rowIndex } = this.props;
-        cb(e, row, rowIndex);
-      };
-    }
-
-    delegate(attrs = {}) {
-      const newAttrs = { ...attrs };
-      Object.keys(attrs).forEach((attr) => {
-        if (events.includes(attr)) {
-          newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
-        }
-      });
-      return newAttrs;
-    }
-  };

packages/react-bootstrap-table2/src/simple-row.js

@@ -3,19 +3,18 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-import RowPureContent from './row-pure-content';
-import eventDelegater from './event-delegater';
-import shouldUpdater from './should-updater';
+import eventDelegater from './row-event-delegater';
+import RowContent from './row-pure-content';
+import shouldRowUpdater from './row-should-updater';
 
-class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
+class Row extends shouldRowUpdater(eventDelegater(Component)) {
   constructor(props) {
     super(props);
     this.shouldUpdateRowContent = false;
   }
 
   shouldComponentUpdate(nextProps) {
-    this.shouldUpdateRowContent = false;
-    this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+    this.shouldUpdateRowContent = this.shouldUpdatedByNormalProps(nextProps);
     if (this.shouldUpdateRowContent) return true;
 
     return this.shouldUpdatedBySelfProps(nextProps);
@@ -26,26 +25,19 @@ class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
       className,
       style,
       attrs,
-      visibleColumnSize,
-      tabIndexCell,
       ...rest
     } = this.props;
     const trAttrs = this.delegate(attrs);
-    const tabIndexStart = (this.props.rowIndex * visibleColumnSize) + 1;
 
     return (
       <tr style={ style } className={ className } { ...trAttrs }>
-        <RowPureContent
-          shouldUpdate={ this.shouldUpdateRowContent }
-          tabIndexStart={ tabIndexCell ? tabIndexStart : -1 }
-          { ...rest }
-        />
+        <RowContent shouldUpdate={ this.shouldUpdateRowContent } { ...rest } />
       </tr>
     );
   }
 }
 
-SimpleRow.propTypes = {
+Row.propTypes = {
   row: PropTypes.object.isRequired,
   rowIndex: PropTypes.number.isRequired,
   columns: PropTypes.array.isRequired,
@@ -54,11 +46,11 @@ SimpleRow.propTypes = {
   attrs: PropTypes.object
 };
 
-SimpleRow.defaultProps = {
+Row.defaultProps = {
   editable: true,
   style: {},
   className: null,
   attrs: {}
 };
 
-export default SimpleRow;
+export default Row;

packages/react-bootstrap-table2/src/store/selection.js

@@ -6,7 +6,7 @@ export const getSelectionSummary = (
   keyField,
   selected = []
 ) => {
-  let allRowsSelected = data.length > 0;
+  let allRowsSelected = true;
   let allRowsNotSelected = true;
 
   const rowKeys = data.map(d => d[keyField]);

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

@@ -4,10 +4,10 @@ import sinon from 'sinon';
 import { shallow, mount } from 'enzyme';
 
 import Body from '../src/body';
-import Row from '../src/row/simple-row';
-import RowAggregator from '../src/row/aggregate-row';
+import Row from '../src/row';
+import RowAggregator from '../src/row-aggregator';
 import Const from '../src/const';
-import RowSection from '../src/row/row-section';
+import RowSection from '../src/row-section';
 import SelectionContext from '../src/contexts/selection-context';
 import ExpansionContext from '../src/contexts/row-expand-context';
 import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
@@ -255,13 +255,14 @@ describe('Body', () => {
   });
 
   describe('when cellEdit.createContext props is defined', () => {
+    const CellComponent = () => null;
     const EditingCellComponent = () => null;
     const RowComponent = props => <Row { ...props } />;
     const cellEdit = {
-      options: { onStartEdit: jest.fn() },
       createContext: jest.fn(),
+      bindCellLevelCellEdit: jest.fn().mockReturnValue(CellComponent),
       createEditingCell: jest.fn().mockReturnValue(EditingCellComponent),
-      withRowLevelCellEdit: jest.fn().mockReturnValue(RowComponent)
+      bindRowLevelCellEdit: jest.fn().mockReturnValue(RowComponent)
     };
     beforeEach(() => {
       wrapper = shallow(
@@ -277,10 +278,12 @@ describe('Body', () => {
 
     it('should render Row Component correctly', () => {
       expect(wrapper.length).toBe(1);
+      expect(cellEdit.bindCellLevelCellEdit).toHaveBeenCalledTimes(1);
       expect(cellEdit.createEditingCell).toHaveBeenCalledTimes(1);
-      expect(cellEdit.withRowLevelCellEdit).toHaveBeenCalledTimes(1);
+      expect(cellEdit.bindRowLevelCellEdit).toHaveBeenCalledTimes(1);
       expect(wrapper.find(RowComponent)).toHaveLength(2);
       const aRowElement = wrapper.find(RowComponent).get(0);
+      expect(aRowElement.props.CellComponent).toBeDefined();
       expect(aRowElement.props.EditingCellComponent).toBeDefined();
     });
   });

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

@@ -198,26 +198,6 @@ describe('Cell', () => {
       });
     });
 
-    describe('when props.tabIndex is change', () => {
-      const column = { dataField: 'name', text: 'Product Name' };
-      beforeEach(() => {
-        props = {
-          row,
-          columnIndex: 1,
-          rowIndex: 1,
-          tabIndex: 5,
-          column
-        };
-        wrapper = shallow(
-          <Cell { ...props } />);
-      });
-
-      it('should return true', () => {
-        nextProps = { ...props, tabIndex: 2 };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
-      });
-    });
-
     describe('if column.isDummyField is true', () => {
       describe('when content is change', () => {
         const column = { dataField: '', text: 'Product Name', isDummyField: true };

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

@@ -112,9 +112,9 @@ describe('Context', () => {
           Provider: CellEditContext.Provider,
           Consumer: CellEditContext.Consumer
         }),
-        options: {},
+        bindCellLevelCellEdit: jest.fn().mockReturnValue(() => null),
         createEditingCell: jest.fn().mockReturnValue(() => null),
-        withRowLevelCellEdit: jest.fn().mockReturnValue(() => null)
+        bindRowLevelCellEdit: jest.fn().mockReturnValue(() => null)
       };
       wrapper = shallow(
         <BootstrapTable

packages/react-bootstrap-table2/test/contexts/selection-context.test.js

@@ -223,25 +223,6 @@ describe('DataContext', () => {
       it('should set state.selected correctly', () => {
         expect(wrapper.state('selected')).toEqual(data.map(d => d[keyField]));
       });
-
-      describe('when selectRow.onSelectAll is defined', () => {
-        const onSelectAll = jest.fn();
-        beforeEach(() => {
-          wrapper = shallow(shallowContext({
-            ...defaultSelectRow,
-            onSelectAll
-          }));
-          wrapper.instance().handleAllRowsSelect(e, false);
-        });
-
-        it('should call selectRow.onSelectAll correctly', () => {
-          expect(onSelectAll).toHaveBeenCalledWith(
-            true,
-            dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')),
-            e
-          );
-        });
-      });
     });
 
     describe('when isUnSelect argument is true', () => {
@@ -256,25 +237,24 @@ describe('DataContext', () => {
       it('should set state.selected correctly', () => {
         expect(wrapper.state('selected')).toEqual([]);
       });
+    });
 
-      describe('when selectRow.onSelectAll is defined', () => {
-        const onSelectAll = jest.fn();
-        beforeEach(() => {
-          wrapper = shallow(shallowContext({
-            ...defaultSelectRow,
-            selected: data.map(d => d[keyField]),
-            onSelectAll
-          }));
-          wrapper.instance().handleAllRowsSelect(e, true);
-        });
+    describe('when selectRow.onSelectAll is defined', () => {
+      const onSelectAll = jest.fn();
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({
+          ...defaultSelectRow,
+          onSelectAll
+        }));
+        wrapper.instance().handleAllRowsSelect(e, false);
+      });
 
-        it('should call selectRow.onSelectAll correctly', () => {
-          expect(onSelectAll).toHaveBeenCalledWith(
-            false,
-            dataOperator.getSelectedRows(data, keyField, data.map(d => d[keyField])),
-            e
-          );
-        });
+      it('should call selectRow.onSelectAll correctly', () => {
+        expect(onSelectAll).toHaveBeenCalledWith(
+          true,
+          dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')),
+          e
+        );
       });
     });
   });

packages/react-bootstrap-table2/test/header-cell.test.js

@@ -403,24 +403,6 @@ describe('HeaderCell', () => {
       it('header should render SortSymbol as default', () => {
         expect(wrapper.find(SortSymbol).length).toBe(1);
       });
-
-      describe('when sortCaret is defined ', () => {
-        beforeEach(() => {
-          column = { ...column, sortCaret: jest.fn() };
-          wrapper = shallow(
-            <HeaderCell column={ column } index={ index } onSort={ onSortCallBack } />
-          );
-        });
-
-        it('header should not render SortSymbol', () => {
-          expect(wrapper.find(SortSymbol).length).toBe(0);
-        });
-
-        it('should call column.sortCaret correctly', () => {
-          expect(column.sortCaret).toHaveBeenCalledTimes(1);
-          expect(column.sortCaret).toHaveBeenCalledWith(undefined, column);
-        });
-      });
     });
 
     describe('and sorting prop is true', () => {
@@ -438,30 +420,6 @@ describe('HeaderCell', () => {
         });
       });
 
-      describe('when sortCaret is defined ', () => {
-        beforeEach(() => {
-          column = { ...column, sortCaret: jest.fn() };
-          wrapper = shallow(
-            <HeaderCell
-              column={ column }
-              index={ index }
-              onSort={ onSortCallBack }
-              sortOrder={ Const.SORT_ASC }
-              sorting
-            />
-          );
-        });
-
-        it('header should not render SortSymbol', () => {
-          expect(wrapper.find(SortSymbol).length).toBe(0);
-        });
-
-        it('should call column.sortCaret correctly', () => {
-          expect(column.sortCaret).toHaveBeenCalledTimes(1);
-          expect(column.sortCaret).toHaveBeenCalledWith(Const.SORT_ASC, column);
-        });
-      });
-
       describe('when headerSortingClasses is defined ', () => {
         const classes = 'foo';
         const order = Const.SORT_DESC;

packages/react-bootstrap-table2/test/props-resolver/index.test.js

@@ -25,51 +25,6 @@ describe('TableResolver', () => {
   const BootstrapTableMock = extendTo(ExtendBase);
   let wrapper;
 
-  describe('visibleRows', () => {
-    describe('if hiddenRows prop is not existing', () => {
-      beforeEach(() => {
-        const mockElement = React.createElement(BootstrapTableMock, {
-          data, columns, keyField
-        }, null);
-        wrapper = shallow(mockElement);
-      });
-
-      it('should return correct data', () => {
-        expect(wrapper.instance().visibleRows()).toEqual(data);
-      });
-    });
-
-    describe('if hiddenRows prop is an empty array', () => {
-      beforeEach(() => {
-        const mockElement = React.createElement(BootstrapTableMock, {
-          data, columns, keyField, hiddenRows: []
-        }, null);
-        wrapper = shallow(mockElement);
-      });
-
-      it('should return correct data', () => {
-        expect(wrapper.instance().visibleRows()).toEqual(data);
-      });
-    });
-
-    describe('if hiddenRows prop is not an empty array', () => {
-      const hiddenRows = [1];
-
-      beforeEach(() => {
-        const mockElement = React.createElement(BootstrapTableMock, {
-          data, columns, keyField, hiddenRows
-        }, null);
-        wrapper = shallow(mockElement);
-      });
-
-      it('should return correct data', () => {
-        const result = wrapper.instance().visibleRows();
-        expect(result).toHaveLength(data.length - hiddenRows.length);
-        expect(result).toEqual(data.filter(d => !hiddenRows.includes(d.id)));
-      });
-    });
-  });
-
   describe('validateProps', () => {
     describe('if keyField is defined and columns is all visible', () => {
       beforeEach(() => {

packages/react-bootstrap-table2/test/row-aggregator.test.js

@@ -1,14 +1,15 @@
 import 'jsdom-global/register';
 import React from 'react';
 import { mount } from 'enzyme';
-import mockBodyResolvedProps from '../test-helpers/mock/body-resolved-props';
-import SelectionContext from '../../src/contexts/selection-context';
-import ExpansionContext from '../../src/contexts/row-expand-context';
-import bindSelection from '../../src/row-selection/row-consumer';
-import bindExpansion from '../../src/row-expand/row-consumer';
-import ExpandCell from '../../src/row-expand/expand-cell';
-import SelectionCell from '../../src/row-selection/selection-cell';
-import RowAggregator from '../../src/row/aggregate-row';
+import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
+import SelectionContext from '../src/contexts/selection-context';
+import ExpansionContext from '../src/contexts/row-expand-context';
+import bindSelection from '../src/row-selection/row-binder';
+import bindExpansion from '../src/row-expand/row-binder';
+import ExpandCell from '../src/row-expand/expand-cell';
+import SelectionCell from '../src/row-selection/selection-cell';
+import RowAggregator from '../src/row-aggregator';
+import Row from '../src/row';
 
 describe('Row Aggregator', () => {
   let wrapper;
@@ -107,9 +108,9 @@ describe('Row Aggregator', () => {
       });
 
       it('should add onClick prop to Row Component', () => {
-        const tr = wrapper.find('tr');
-        expect(tr).toHaveLength(1);
-        expect(tr.props().onClick).toBeDefined();
+        const rowComp = wrapper.find(Row);
+        expect(rowComp).toHaveLength(1);
+        expect(rowComp.props().attrs.onClick).toBeDefined();
       });
     });
   });
@@ -215,7 +216,7 @@ describe('Row Aggregator', () => {
       });
     });
 
-    describe('if props.expandRow is not defined', () => {
+    describe('if props.expandRow.renderer is defined', () => {
       describe('but expandable props is false', () => {
         const expandRow = { renderer: jest.fn(), nonExpandable: [row[keyField]] };
         beforeEach(() => {
@@ -235,7 +236,7 @@ describe('Row Aggregator', () => {
       });
     });
 
-    describe('if props.expandRow is defined', () => {
+    describe('if props.expandRow.renderer is defined', () => {
       const expandRow = { renderer: jest.fn() };
       beforeEach(() => {
         wrapper = mount(
@@ -252,7 +253,7 @@ describe('Row Aggregator', () => {
       });
     });
 
-    describe('if props.attrs.onClick and props.expandRow both are defined', () => {
+    describe('if props.attrs.onClick and props.expandRow.renderer both are defined', () => {
       const attrs = { onClick: jest.fn() };
       const expandRow = { renderer: jest.fn() };
 

packages/react-bootstrap-table2/test/row-section.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import RowSection from '../../src/row/row-section';
+import RowSection from '../src/row-section';
 
 describe('Row', () => {
   const colSpan = 3;

packages/react-bootstrap-table2/test/row-selection/row-binder.test.js

@@ -3,13 +3,13 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import SelectionContext from '../../src/contexts/selection-context';
-import withSelectionConsumer from '../../src/row-selection/row-consumer';
+import bindSelection from '../../src/row-selection/row-binder';
 
-describe('withSelectionConsumer', () => {
+describe('Selection Row Binder', () => {
   let wrapper;
   let selectRow;
   const BaseComponent = () => null;
-  const WithSelectionComponent = withSelectionConsumer(props => <BaseComponent { ...props } />);
+  const WithSelectionComponent = bindSelection(props => <BaseComponent { ...props } />);
 
   const data = [{
     id: 1,

packages/react-bootstrap-table2/test/row-selection/selection-cell.test.js

@@ -14,106 +14,24 @@ describe('<SelectionCell />', () => {
   let wrapper;
 
   describe('shouldComponentUpdate', () => {
-    let props;
-    let nextProps;
+    const selected = true;
+
+    describe('when selected prop has not been changed', () => {
+      it('should not update component', () => {
+        const nextProps = { selected };
+
+        wrapper = shallow(<SelectionCell rowKey={ 1 } mode={ mode } selected={ selected } />);
+
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(false);
+      });
+    });
 
     describe('when selected prop has been changed', () => {
-      beforeEach(() => {
-        props = {
-          selected: false,
-          mode,
-          rowIndex,
-          disabled: false,
-          rowKey: 1
-        };
-        wrapper = shallow(
-          <SelectionCell { ...props } />
-        );
-      });
+      it('should update component', () => {
+        const nextProps = { selected: !selected };
 
-      it('should return true', () => {
-        nextProps = { ...props, selected: true };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
-      });
-    });
+        wrapper = shallow(<SelectionCell rowKey={ 1 } mode={ mode } selected={ selected } />);
 
-    describe('when rowIndex prop has been changed', () => {
-      beforeEach(() => {
-        props = {
-          selected: false,
-          mode,
-          rowIndex,
-          disabled: false,
-          rowKey: 1
-        };
-        wrapper = shallow(
-          <SelectionCell { ...props } />
-        );
-      });
-
-      it('should return true', () => {
-        nextProps = { ...props, rowIndex: 2 };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
-      });
-    });
-
-    describe('when tabIndex prop has been changed', () => {
-      beforeEach(() => {
-        props = {
-          selected: false,
-          mode,
-          rowIndex,
-          disabled: false,
-          tabIndex: 0,
-          rowKey: 1
-        };
-        wrapper = shallow(
-          <SelectionCell { ...props } />
-        );
-      });
-
-      it('should return true', () => {
-        nextProps = { ...props, tabIndex: 2 };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
-      });
-    });
-
-    describe('when disabled prop has been changed', () => {
-      beforeEach(() => {
-        props = {
-          selected: false,
-          mode,
-          rowIndex,
-          disabled: false,
-          rowKey: 1
-        };
-        wrapper = shallow(
-          <SelectionCell { ...props } />
-        );
-      });
-
-      it('should return true', () => {
-        nextProps = { ...props, disabled: true };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
-      });
-    });
-
-    describe('when rowKey prop has been changed', () => {
-      beforeEach(() => {
-        props = {
-          selected: false,
-          mode,
-          rowIndex,
-          disabled: false,
-          rowKey: 1
-        };
-        wrapper = shallow(
-          <SelectionCell { ...props } />
-        );
-      });
-
-      it('should return true', () => {
-        nextProps = { ...props, rowKey: '1' };
         expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
       });
     });

packages/react-bootstrap-table2/test/row-selection/selection-header-cell.test.js

@@ -104,22 +104,6 @@ describe('<SelectionHeaderCell />', () => {
   });
 
   describe('render', () => {
-    describe('when props.hideSelectAll is true', () => {
-      beforeEach(() => {
-        const checkedStatus = Const.CHECKBOX_STATUS_CHECKED;
-
-        wrapper = shallow(
-          <SelectionHeaderCell mode="checkbox" checkedStatus={ checkedStatus } hideSelectAll />
-        );
-      });
-
-      it('should render empty th element', () => {
-        expect(wrapper.find('th').length).toBe(1);
-        expect(wrapper.find('th[data-row-selection]').length).toBe(1);
-        expect(wrapper.find(CheckBox).length).toBe(0);
-      });
-    });
-
     describe('when props.mode is radio', () => {
       beforeEach(() => {
         const checkedStatus = Const.CHECKBOX_STATUS_CHECKED;

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

@@ -1,9 +1,10 @@
 import React from 'react';
+import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-import Cell from '../../src/cell';
-import RowPureContent from '../../src/row/row-pure-content';
-import mockBodyResolvedProps from '../test-helpers/mock/body-resolved-props';
+import Cell from '../src/cell';
+import Row from '../src/row';
+import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
 
 let defaultColumns = [{
   dataField: 'id',
@@ -19,7 +20,7 @@ let defaultColumns = [{
 const keyField = 'id';
 const rowIndex = 1;
 
-describe('RowPureContent', () => {
+describe('Row', () => {
   let wrapper;
 
   const row = {
@@ -41,55 +42,11 @@ describe('RowPureContent', () => {
     }];
   });
 
-  describe('shouldComponentUpdate', () => {
-    let props;
-    let nextProps;
-
-    describe('if nextProps.shouldUpdate is different with this.props.shouldUpdate', () => {
-      beforeEach(() => {
-        props = {
-          keyField,
-          columns: defaultColumns,
-          rowIndex: 1,
-          row,
-          shouldUpdate: false
-        };
-        wrapper = shallow(
-          <RowPureContent { ...props } />
-        );
-      });
-
-      it('should return true', () => {
-        nextProps = { ...props, shouldUpdate: true };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
-      });
-    });
-
-    describe('if nextProps.shouldUpdate is same with this.props.shouldUpdate', () => {
-      beforeEach(() => {
-        props = {
-          keyField,
-          columns: defaultColumns,
-          rowIndex: 1,
-          row,
-          shouldUpdate: false
-        };
-        wrapper = shallow(
-          <RowPureContent { ...props } />
-        );
-      });
-
-      it('should return false', () => {
-        nextProps = { ...props };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(false);
-      });
-    });
-  });
-
   describe('simplest row', () => {
     beforeEach(() => {
       wrapper = shallow(
-        <RowPureContent
+        <Row
+          { ...mockBodyResolvedProps }
           keyField={ keyField }
           rowIndex={ rowIndex }
           columns={ defaultColumns }
@@ -99,49 +56,66 @@ describe('RowPureContent', () => {
     });
 
     it('should render successfully', () => {
-      expect(wrapper.length).toBe(defaultColumns.length);
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find('tr').length).toBe(1);
       expect(wrapper.find(Cell).length).toBe(Object.keys(row).length);
     });
   });
 
-  describe('when tabIndexStart prop is -1', () => {
+  describe('when style prop is defined', () => {
+    const customStyle = { backgroundColor: 'red' };
     beforeEach(() => {
       wrapper = shallow(
-        <RowPureContent
-          tabIndexStart={ -1 }
-          keyField={ keyField }
+        <Row
+          { ...mockBodyResolvedProps }
           rowIndex={ rowIndex }
           columns={ defaultColumns }
           row={ row }
-        />
-      );
+          style={ customStyle }
+        />);
     });
 
-    it('should not render tabIndex prop on Cell', () => {
-      wrapper.find(Cell).forEach((cell) => {
-        expect(cell.prop('tabIndex')).toBeUndefined();
-      });
+    it('should render component with style successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.prop('style')).toEqual(customStyle);
     });
   });
 
-  describe('when tabIndexStart prop is not -1', () => {
-    const tabIndexStart = 4;
+  describe('when className prop is defined', () => {
+    const className = 'test-class';
     beforeEach(() => {
       wrapper = shallow(
-        <RowPureContent
-          tabIndexStart={ tabIndexStart }
-          keyField={ keyField }
+        <Row
+          { ...mockBodyResolvedProps }
           rowIndex={ rowIndex }
           columns={ defaultColumns }
           row={ row }
-        />
-      );
+          className={ className }
+        />);
     });
 
-    it('should render correct tabIndex prop on Cell', () => {
-      wrapper.find(Cell).forEach((cell, i) => {
-        expect(cell.prop('tabIndex')).toEqual(tabIndexStart + i);
-      });
+    it('should render component with className successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.hasClass(className)).toBe(true);
+    });
+  });
+
+  describe('when CellComponent prop is defined', () => {
+    const CellComponent = () => null;
+    beforeEach(() => {
+      wrapper = shallow(
+        <Row
+          { ...mockBodyResolvedProps }
+          rowIndex={ rowIndex }
+          columns={ defaultColumns }
+          row={ row }
+          CellComponent={ CellComponent }
+        />);
+    });
+
+    it('should render CellComponent successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find(CellComponent)).toHaveLength(defaultColumns.length);
     });
   });
 
@@ -151,8 +125,8 @@ describe('RowPureContent', () => {
     const EditingCellComponent = () => null;
     beforeEach(() => {
       wrapper = shallow(
-        <RowPureContent
-          keyField={ keyField }
+        <Row
+          { ...mockBodyResolvedProps }
           rowIndex={ rowIndex }
           columns={ defaultColumns }
           row={ row }
@@ -164,7 +138,7 @@ describe('RowPureContent', () => {
 
     it('should render EditingCell component correctly', () => {
       const EditingCell = wrapper.find(EditingCellComponent);
-      expect(wrapper.length).toBe(defaultColumns.length);
+      expect(wrapper.length).toBe(1);
       expect(EditingCell).toHaveLength(1);
       expect(EditingCell.prop('row')).toEqual(row);
       expect(EditingCell.prop('rowIndex')).toEqual(editingRowIdx);
@@ -173,6 +147,27 @@ describe('RowPureContent', () => {
     });
   });
 
+  describe('when attrs prop is defined', () => {
+    const customClickCallBack = sinon.stub();
+    const attrs = { 'data-index': 1, onClick: customClickCallBack };
+    beforeEach(() => {
+      wrapper = shallow(
+        <Row
+          { ...mockBodyResolvedProps }
+          rowIndex={ rowIndex }
+          columns={ defaultColumns }
+          row={ row }
+          attrs={ attrs }
+        />);
+    });
+
+    it('should render component with correct attributes', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.prop('data-index')).toBe(attrs['data-index']);
+      expect(wrapper.prop('onClick')).toBeDefined();
+    });
+  });
+
   describe('when column.hidden is true', () => {
     beforeEach(() => {
       const newColumns = [{
@@ -187,8 +182,8 @@ describe('RowPureContent', () => {
         text: 'Price'
       }];
       wrapper = shallow(
-        <RowPureContent
-          keyField={ keyField }
+        <Row
+          { ...mockBodyResolvedProps }
           rowIndex={ rowIndex }
           columns={ newColumns }
           row={ row }
@@ -212,7 +207,8 @@ describe('RowPureContent', () => {
       beforeEach(() => {
         columns[columnIndex].style = { backgroundColor: 'red' };
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -222,7 +218,7 @@ describe('RowPureContent', () => {
       });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.style).toEqual(columns[columnIndex].style);
       });
     });
@@ -232,10 +228,11 @@ describe('RowPureContent', () => {
       let styleCallBack;
 
       beforeEach(() => {
-        styleCallBack = jest.fn().mockReturnValue(returnStyle);
+        styleCallBack = sinon.stub().returns(returnStyle);
         columns[columnIndex].style = styleCallBack;
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -244,17 +241,18 @@ describe('RowPureContent', () => {
         );
       });
 
-      afterEach(() => { styleCallBack.mockClear(); });
+      afterEach(() => { styleCallBack.reset(); });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.style).toEqual(returnStyle);
       });
 
       it('should call custom style function correctly', () => {
-        expect(styleCallBack).toHaveBeenCalledTimes(1);
-        expect(styleCallBack).toHaveBeenCalledWith(
-          row[columns[columnIndex].dataField], row, rowIndex, columnIndex);
+        expect(styleCallBack.callCount).toBe(1);
+        expect(
+          styleCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
       });
     });
   });
@@ -271,7 +269,8 @@ describe('RowPureContent', () => {
       beforeEach(() => {
         columns[columnIndex].classes = 'td-test-class';
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -281,7 +280,7 @@ describe('RowPureContent', () => {
       });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.className)
           .toEqual(columns[columnIndex].classes);
       });
@@ -292,10 +291,11 @@ describe('RowPureContent', () => {
       let classesCallBack;
 
       beforeEach(() => {
-        classesCallBack = jest.fn().mockReturnValue(returnClasses);
+        classesCallBack = sinon.stub().returns(returnClasses);
         columns[columnIndex].classes = classesCallBack;
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -304,17 +304,19 @@ describe('RowPureContent', () => {
         );
       });
 
-      afterEach(() => { classesCallBack.mockClear(); });
+      afterEach(() => { classesCallBack.reset(); });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.className).toEqual(returnClasses);
       });
 
       it('should call custom classes function correctly', () => {
-        expect(classesCallBack).toHaveBeenCalledTimes(1);
-        expect(classesCallBack).toHaveBeenCalledWith(
-          row[columns[columnIndex].dataField], row, rowIndex, columnIndex);
+        expect(classesCallBack.callCount).toBe(1);
+        expect(
+          classesCallBack.calledWith(
+            row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
       });
     });
   });
@@ -331,7 +333,8 @@ describe('RowPureContent', () => {
       beforeEach(() => {
         columns[columnIndex].title = true;
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -341,7 +344,7 @@ describe('RowPureContent', () => {
       });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.title)
           .toEqual(row[columns[columnIndex].dataField]);
       });
@@ -352,10 +355,11 @@ describe('RowPureContent', () => {
       let titleCallBack;
 
       beforeEach(() => {
-        titleCallBack = jest.fn().mockReturnValue(returnTitle);
+        titleCallBack = sinon.stub().returns(returnTitle);
         columns[columnIndex].title = titleCallBack;
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -364,17 +368,19 @@ describe('RowPureContent', () => {
         );
       });
 
-      afterEach(() => { titleCallBack.mockClear(); });
+      afterEach(() => { titleCallBack.reset(); });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.title).toEqual(returnTitle);
       });
 
       it('should call custom title function correctly', () => {
-        expect(titleCallBack).toHaveBeenCalledTimes(1);
-        expect(titleCallBack).toHaveBeenCalledWith(
-          row[columns[columnIndex].dataField], row, rowIndex, columnIndex);
+        expect(titleCallBack.callCount).toBe(1);
+        expect(
+          titleCallBack.calledWith(
+            row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
       });
     });
   });
@@ -386,11 +392,12 @@ describe('RowPureContent', () => {
     beforeEach(() => {
       columns = [...defaultColumns];
       columns[columnIndex].events = {
-        onClick: jest.fn()
+        onClick: sinon.stub()
       };
 
       wrapper = shallow(
-        <RowPureContent
+        <Row
+          { ...mockBodyResolvedProps }
           keyField={ keyField }
           rowIndex={ rowIndex }
           columns={ columns }
@@ -400,7 +407,7 @@ describe('RowPureContent', () => {
     });
 
     it('should attachs DOM event successfully', () => {
-      expect(wrapper.length).toBe(defaultColumns.length);
+      expect(wrapper.length).toBe(1);
       expect(wrapper.find(Cell).get(columnIndex).props.onClick).toBeDefined();
     });
   });
@@ -417,7 +424,8 @@ describe('RowPureContent', () => {
       beforeEach(() => {
         columns[columnIndex].align = 'right';
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -427,7 +435,7 @@ describe('RowPureContent', () => {
       });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign)
           .toEqual(columns[columnIndex].align);
       });
@@ -438,10 +446,10 @@ describe('RowPureContent', () => {
       let alignCallBack;
 
       beforeEach(() => {
-        alignCallBack = jest.fn().mockReturnValue(returnAlign);
+        alignCallBack = sinon.stub().returns(returnAlign);
         columns[columnIndex].align = alignCallBack;
         wrapper = shallow(
-          <RowPureContent
+          <Row
             { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
@@ -451,17 +459,18 @@ describe('RowPureContent', () => {
         );
       });
 
-      afterEach(() => { alignCallBack.mockClear(); });
+      afterEach(() => { alignCallBack.reset(); });
 
       it('should render Cell correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign).toEqual(returnAlign);
       });
 
       it('should call custom align function correctly', () => {
-        expect(alignCallBack).toHaveBeenCalledTimes(1);
-        expect(alignCallBack).toHaveBeenCalledWith(
-          row[columns[columnIndex].dataField], row, rowIndex, columnIndex);
+        expect(alignCallBack.callCount).toBe(1);
+        expect(
+          alignCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
       });
     });
   });
@@ -488,7 +497,8 @@ describe('RowPureContent', () => {
         };
 
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -496,7 +506,7 @@ describe('RowPureContent', () => {
           />
         );
 
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props['data-test'])
           .toEqual(columns[columnIndex].attrs['data-test']);
         expect(wrapper.find(Cell).get(columnIndex).props.title)
@@ -513,7 +523,8 @@ describe('RowPureContent', () => {
           columns[columnIndex].attrs = { title: 'title' };
 
           wrapper = shallow(
-            <RowPureContent
+            <Row
+              { ...mockBodyResolvedProps }
               keyField={ keyField }
               rowIndex={ rowIndex }
               columns={ columns }
@@ -532,7 +543,8 @@ describe('RowPureContent', () => {
           columns[columnIndex].attrs = { className: 'attrs-class' };
 
           wrapper = shallow(
-            <RowPureContent
+            <Row
+              { ...mockBodyResolvedProps }
               keyField={ keyField }
               rowIndex={ rowIndex }
               columns={ columns }
@@ -551,7 +563,8 @@ describe('RowPureContent', () => {
           columns[columnIndex].attrs = { style: { backgroundColor: 'attrs-style-test' } };
 
           wrapper = shallow(
-            <RowPureContent
+            <Row
+              { ...mockBodyResolvedProps }
               keyField={ keyField }
               rowIndex={ rowIndex }
               columns={ columns }
@@ -570,7 +583,8 @@ describe('RowPureContent', () => {
           columns[columnIndex].attrs = { style: { textAlign: 'right' } };
 
           wrapper = shallow(
-            <RowPureContent
+            <Row
+              { ...mockBodyResolvedProps }
               keyField={ keyField }
               rowIndex={ rowIndex }
               columns={ columns }
@@ -592,10 +606,11 @@ describe('RowPureContent', () => {
       };
 
       beforeEach(() => {
-        attrsCallBack = jest.fn().mockReturnValue(customAttrs);
+        attrsCallBack = sinon.stub().returns(customAttrs);
         columns[columnIndex].attrs = attrsCallBack;
         wrapper = shallow(
-          <RowPureContent
+          <Row
+            { ...mockBodyResolvedProps }
             keyField={ keyField }
             rowIndex={ rowIndex }
             columns={ columns }
@@ -604,10 +619,8 @@ describe('RowPureContent', () => {
         );
       });
 
-      afterEach(() => { attrsCallBack.mockClear(); });
-
       it('should render style.attrs correctly', () => {
-        expect(wrapper.length).toBe(defaultColumns.length);
+        expect(wrapper.length).toBe(1);
         expect(wrapper.find(Cell).get(columnIndex).props['data-test'])
           .toEqual(customAttrs['data-test']);
         expect(wrapper.find(Cell).get(columnIndex).props.title)
@@ -615,9 +628,10 @@ describe('RowPureContent', () => {
       });
 
       it('should call custom attrs function correctly', () => {
-        expect(attrsCallBack).toHaveBeenCalledTimes(1);
-        expect(attrsCallBack).toHaveBeenCalledWith(
-          row[columns[columnIndex].dataField], row, rowIndex, columnIndex);
+        expect(attrsCallBack.callCount).toBe(1);
+        expect(
+          attrsCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
       });
     });
   });