temp fix

- react-bootstrap-table2-editor@1.0.1
 - react-bootstrap-table2-example@1.0.4
 - react-bootstrap-table2-toolkit@1.0.3
 - react-bootstrap-table-next@1.1.4

docs/columns.md

@@ -7,6 +7,7 @@ Available properties in a column object:
 * [text (**required**)](#text)
 
 #### Optional
+* [isDummyField](#isDummyField)
 * [hidden](#hidden)
 * [formatter](#formatter)
 * [formatExtraData](#formatExtraData)
@@ -84,6 +85,11 @@ dataField: 'address.city'
 ## <a name='text'>column.text (**required**) - [String]</a>
 `text` will be the column text in header column by default, if your header is not only text or you want to customize the header column, please check [`column.headerFormatter`](#headerFormatter)
 
+## <a name='isDummyField'>column.isDummyField - [Bool]</a>
+Sometime, you just want to have a column which is not perform any data but just some action components. In this situation, we suggest you to use `isDummyField`. If column is dummy, the [`column.dataField`](#dataField) can be any string value, cause of it's meaningless.
+
+There's only one different for dummy column than normal column, which is dummy column will compare the whole row value instead of cell value when call `shouldComponentUpdate`.
+
 ## <a name='hidden'>column.hidden - [Bool]</a>
 `hidden` allow you to hide column when `true` given.
 

enzyme-setup.js

@@ -1,4 +1,4 @@
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from 'enzyme-adapter-react-16.3';
 import { configure } from 'enzyme';
 
 const configureEnzyme = () => {

package.json

@@ -50,8 +50,8 @@
     "babel-preset-stage-0": "6.24.1",
     "babel-register": "6.24.1",
     "css-loader": "0.28.1",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-16": "1.1.1",
+    "enzyme": "3.4.0",
+    "enzyme-adapter-react-16.3": "1.0.0",
     "enzyme-to-json": "3.3.4",
     "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",

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

@@ -1,16 +1,16 @@
 import createContext from './src/context';
-import editingCellFactory from './src/editing-cell';
+import bindRowLevelCellEdit from './src/row-binder';
+import createEditingCell from './src/editing-cell-binder';
 import {
   EDITTYPE,
-  CLICK_TO_CELL_EDIT,
   DBCLICK_TO_CELL_EDIT,
   DELAY_FOR_DBCLICK
 } from './src/const';
 
 export default (options = {}) => ({
   createContext,
-  editingCellFactory,
-  CLICK_TO_CELL_EDIT,
+  createEditingCell,
+  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.0.0",
+  "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/checkbox-editor.js

@@ -13,7 +13,9 @@ class CheckBoxEditor extends Component {
   }
 
   componentDidMount() {
+    const { didMount } = this.props;
     this.checkbox.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -28,7 +30,7 @@ class CheckBoxEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('editor edit-chseckbox checkbox', className);
     return (
       <input
@@ -50,12 +52,14 @@ CheckBoxEditor.propTypes = {
   ]),
   value: PropTypes.string,
   defaultValue: PropTypes.any,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  didMount: PropTypes.func
 };
 CheckBoxEditor.defaultProps = {
   className: '',
   value: 'on:off',
   defaultValue: false,
-  onChange: undefined
+  onChange: undefined,
+  didMount: undefined
 };
 export default CheckBoxEditor;

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

@@ -4,15 +4,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
 
+const CellEditContext = React.createContext();
+
 export default (
   _,
   dataOperator,
   isRemoteCellEdit,
   handleCellChange
 ) => {
-  let EditingCell;
-  const CellEditContext = React.createContext();
-
   class CellEditProvider extends React.Component {
     static propTypes = {
       data: PropTypes.array.isRequired,
@@ -23,6 +22,7 @@ export default (
         blurToSave: PropTypes.bool,
         beforeSaveCell: PropTypes.func,
         afterSaveCell: PropTypes.func,
+        onStartEdit: PropTypes.func,
         nonEditableRows: PropTypes.func,
         timeToCloseMessage: PropTypes.number,
         errorMessage: PropTypes.any
@@ -31,7 +31,6 @@ export default (
 
     constructor(props) {
       super(props);
-      EditingCell = props.cellEdit.editingCellFactory(_);
       this.startEditing = this.startEditing.bind(this);
       this.escapeEditing = this.escapeEditing.bind(this);
       this.completeEditing = this.completeEditing.bind(this);
@@ -101,8 +100,6 @@ export default (
       const {
         cellEdit: {
           options: { nonEditableRows, errorMessage, ...optionsRest },
-          editingCellFactory,
-          createContext,
           ...cellEditRest
         }
       } = this.props;
@@ -111,7 +108,6 @@ export default (
         ...optionsRest,
         ...cellEditRest,
         ...this.state,
-        EditingCell,
         nonEditableRows: _.isDefined(nonEditableRows) ? nonEditableRows() : [],
         onStart: this.startEditing,
         onEscape: this.escapeEditing,
@@ -120,7 +116,7 @@ export default (
 
       return (
         <CellEditContext.Provider
-          value={ { cellEdit: newCellEdit } }
+          value={ { ...newCellEdit } }
         >
           { this.props.children }
         </CellEditContext.Provider>
@@ -128,7 +124,8 @@ export default (
     }
   }
   return {
-    Provider: CellEditProvider,
-    Consumer: CellEditContext.Consumer
+    Provider: CellEditProvider
   };
 };
+
+export const Consumer = CellEditContext.Consumer;

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

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DateEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.date.valueAsDate = new Date(defaultValue);
     this.date.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DateEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-date', className);
     return (
       <input
@@ -33,10 +34,12 @@ DateEditor.propTypes = {
     PropTypes.string,
     PropTypes.object
   ]),
-  defaultValue: PropTypes.string
+  defaultValue: PropTypes.string,
+  didMount: PropTypes.func
 };
 DateEditor.defaultProps = {
   className: '',
-  defaultValue: ''
+  defaultValue: '',
+  didMount: undefined
 };
 export default DateEditor;

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

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class DropDownEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.select.value = defaultValue;
     this.select.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class DropDownEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, options, ...rest } = this.props;
+    const { defaultValue, didMount, className, options, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-select', className);
 
     const attr = {
@@ -51,11 +52,13 @@ DropDownEditor.propTypes = {
       label: PropTypes.string,
       value: PropTypes.any
     }))
-  ]).isRequired
+  ]).isRequired,
+  didMount: PropTypes.func
 };
 DropDownEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  style: {}
+  style: {},
+  didMount: undefined
 };
 export default DropDownEditor;

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

@@ -0,0 +1,44 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import { Consumer } from './context';
+import createEditingCell from './editing-cell';
+
+export default (_, onStartEdit) => {
+  const EditingCell = createEditingCell(_, onStartEdit);
+  const renderWithEditingCell = (props, cellEdit) => {
+    const content = _.get(props.row, props.column.dataField);
+    let editCellstyle = props.column.editCellStyle || {};
+    let editCellclasses = props.column.editCellClasses;
+    if (_.isFunction(props.column.editCellStyle)) {
+      editCellstyle = props.column.editCellStyle(
+        content,
+        props.row,
+        props.rowIndex,
+        props.columnIndex
+      );
+    }
+    if (_.isFunction(props.column.editCellClasses)) {
+      editCellclasses = props.column.editCellClasses(
+        content,
+        props.row,
+        props.rowIndex,
+        props.columnIndex)
+      ;
+    }
+
+    return (
+      <EditingCell
+        { ...props }
+        className={ editCellclasses }
+        style={ editCellstyle }
+        { ...cellEdit }
+      />
+    );
+  };
+
+  return props => (
+    <Consumer>
+      { cellEdit => renderWithEditingCell(props, cellEdit) }
+    </Consumer>
+  );
+};

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

@@ -14,7 +14,7 @@ import TextEditor from './text-editor';
 import EditorIndicator from './editor-indicator';
 import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
 
-export default _ =>
+export default (_, onStartEdit) =>
   class EditingCell extends Component {
     static propTypes = {
       row: PropTypes.object.isRequired,
@@ -151,6 +151,10 @@ export default _ =>
         onBlur: this.handleBlur
       };
 
+      if (onStartEdit) {
+        editorProps.didMount = () => onStartEdit(row, column, rowIndex, columnIndex);
+      }
+
       const isDefaultEditorDefined = _.isObject(column.editor);
 
       if (isDefaultEditorDefined) {

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

@@ -0,0 +1,38 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import { DELAY_FOR_DBCLICK, DBCLICK_TO_CELL_EDIT, CLICK_TO_CELL_EDIT } from './const';
+import { Consumer } from './context';
+
+export default (Component, selectRowEnabled) => {
+  const renderWithCellEdit = (props, cellEdit) => {
+    const key = props.value;
+    const editableRow = !(
+      cellEdit.nonEditableRows.length > 0 &&
+      cellEdit.nonEditableRows.indexOf(key) > -1
+    );
+
+    const attrs = {};
+
+    if (selectRowEnabled && cellEdit.mode === DBCLICK_TO_CELL_EDIT) {
+      attrs.DELAY_FOR_DBCLICK = DELAY_FOR_DBCLICK;
+    }
+
+    return (
+      <Component
+        { ...props }
+        { ...attrs }
+        editingRowIdx={ cellEdit.ridx }
+        editingColIdx={ cellEdit.cidx }
+        editable={ editableRow }
+        onStart={ cellEdit.onStart }
+        clickToEdit={ cellEdit.mode === CLICK_TO_CELL_EDIT }
+        dbclickToEdit={ cellEdit.mode === DBCLICK_TO_CELL_EDIT }
+      />
+    );
+  };
+  return props => (
+    <Consumer>
+      { cellEdit => renderWithCellEdit(props, cellEdit) }
+    </Consumer>
+  );
+};

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

@@ -5,9 +5,10 @@ import PropTypes from 'prop-types';
 
 class TextEditor extends Component {
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -15,7 +16,7 @@ class TextEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-text', className);
     return (
       <input
@@ -36,10 +37,12 @@ TextEditor.propTypes = {
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number
-  ])
+  ]),
+  didMount: PropTypes.func
 };
 TextEditor.defaultProps = {
   className: null,
-  defaultValue: ''
+  defaultValue: '',
+  didMount: undefined
 };
 export default TextEditor;

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

@@ -10,9 +10,10 @@ class TextAreaEditor extends Component {
   }
 
   componentDidMount() {
-    const { defaultValue } = this.props;
+    const { defaultValue, didMount } = this.props;
     this.text.value = defaultValue;
     this.text.focus();
+    if (didMount) didMount();
   }
 
   getValue() {
@@ -27,7 +28,7 @@ class TextAreaEditor extends Component {
   }
 
   render() {
-    const { defaultValue, className, ...rest } = this.props;
+    const { defaultValue, didMount, className, ...rest } = this.props;
     const editorClass = cs('form-control editor edit-textarea', className);
     return (
       <textarea
@@ -50,11 +51,13 @@ TextAreaEditor.propTypes = {
     PropTypes.string,
     PropTypes.number
   ]),
-  onKeyDown: PropTypes.func
+  onKeyDown: PropTypes.func,
+  didMount: PropTypes.func
 };
 TextAreaEditor.defaultProps = {
   className: '',
   defaultValue: '',
-  onKeyDown: undefined
+  onKeyDown: undefined,
+  didMount: undefined
 };
 export default TextAreaEditor;

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

@@ -3,14 +3,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import _ from 'react-bootstrap-table-next/src/utils';
 import dataOperator from 'react-bootstrap-table-next/src/store/operators';
-import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
 
 import {
   CLICK_TO_CELL_EDIT,
   DBCLICK_TO_CELL_EDIT,
   DELAY_FOR_DBCLICK
 } from '../src/const';
-import createCellEditContext from '../src/context';
+import createCellEditContext, { Consumer } from '../src/context';
 import cellEditFactory from '../index';
 
 describe('CellEditContext', () => {
@@ -42,14 +41,7 @@ describe('CellEditContext', () => {
 
   const defaultSelectRow = undefined;
 
-  const mockBase = jest.fn((props => (
-    <BootstrapTable
-      data={ data }
-      columns={ columns }
-      keyField={ keyField }
-      { ...props }
-    />
-  )));
+  const mockBase = jest.fn((() => null));
 
   const handleCellChange = jest.fn();
 
@@ -75,11 +67,11 @@ describe('CellEditContext', () => {
         selectRow={ selectRow }
         data={ data }
       >
-        <CellEditContext.Consumer>
+        <Consumer>
           {
             cellEditProps => mockBase(cellEditProps)
           }
-        </CellEditContext.Consumer>
+        </Consumer>
       </CellEditContext.Provider>
     );
   }
@@ -94,10 +86,6 @@ describe('CellEditContext', () => {
       expect(CellEditContext.Provider).toBeDefined();
     });
 
-    it('should have correct Consumer property after calling createCellEditContext', () => {
-      expect(CellEditContext.Consumer).toBeDefined();
-    });
-
     it('should have correct state.ridx', () => {
       expect(wrapper.state().ridx).toBeNull();
     });
@@ -113,14 +101,11 @@ describe('CellEditContext', () => {
     it('should pass correct cell editing props to children element', () => {
       expect(wrapper.length).toBe(1);
       expect(JSON.stringify(mockBase.mock.calls[0])).toEqual(JSON.stringify([{
-        cellEdit: {
-          ...defaultCellEdit,
-          CLICK_TO_CELL_EDIT,
-          DBCLICK_TO_CELL_EDIT,
-          DELAY_FOR_DBCLICK,
-          ...wrapper.state(),
-          nonEditableRows: []
-        }
+        ...defaultCellEdit,
+        DBCLICK_TO_CELL_EDIT,
+        DELAY_FOR_DBCLICK,
+        ...wrapper.state(),
+        nonEditableRows: []
       }]));
     });
   });

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

@@ -0,0 +1,147 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import _ from 'react-bootstrap-table-next/src/utils';
+
+import cellEditFactory from '../index';
+import { CLICK_TO_CELL_EDIT } from '../src/const';
+import createCellEditContext from '../src/context';
+import bindEditingCell from '../src/editing-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(_);
+  const WithCellEditComponent = bindEditingCell(_);
+
+  beforeEach(() => {
+    columns = [{
+      dataField: 'id',
+      text: 'ID'
+    }, {
+      dataField: 'name',
+      text: 'Name'
+    }];
+  });
+
+  describe('if column.editCellClasses is defined as string', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellClasses = 'test-class-1';
+      wrapper = shallow(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+      wrapper = wrapper.render();
+    });
+
+    it('should inject className target component correctly', () => {
+      expect(wrapper.hasClass(`${columns[1].editCellClasses}`)).toBeTruthy();
+    });
+  });
+
+  describe('if column.editCellStyle is defined as object', () => {
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellStyle = { color: 'pink' };
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject style target component correctly', () => {
+      expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(columns[1].editCellStyle);
+    });
+  });
+
+  describe('if column.editCellClasses is defined as function', () => {
+    const className = 'test-class-1';
+
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellClasses = jest.fn().mockReturnValue(className);
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject empty className and style to target component', () => {
+      expect(wrapper.find(className)).toBeTruthy();
+    });
+
+    it('should call column.editCellClasses function correctly', () => {
+      expect(columns[1].editCellClasses).toHaveBeenCalledTimes(1);
+      expect(columns[1].editCellClasses).toHaveBeenCalledWith(
+        _.get(row, columns[1].dataField),
+        row,
+        rowIndex,
+        columnIndex
+      );
+    });
+  });
+
+  describe('if column.editCellStyle is defined as function', () => {
+    const style = { color: 'blue' };
+    beforeEach(() => {
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      columns[1].editCellStyle = jest.fn().mockReturnValue(style);
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent
+            row={ row }
+            column={ columns[1] }
+            rowIndex={ rowIndex }
+            columnIndex={ columnIndex }
+          />
+        </Provider>
+      );
+    });
+
+    it('should inject style target component correctly', () => {
+      expect(wrapper.find('.react-bootstrap-table-editing-cell').prop('style')).toEqual(style);
+    });
+
+    it('should call column.editCellStyle function correctly', () => {
+      expect(columns[1].editCellStyle).toHaveBeenCalledTimes(1);
+      expect(columns[1].editCellStyle).toHaveBeenCalledWith(
+        _.get(row, columns[1].dataField),
+        row,
+        rowIndex,
+        columnIndex
+      );
+    });
+  });
+});

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

@@ -0,0 +1,138 @@
+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, DELAY_FOR_DBCLICK } from '../src/const';
+import createCellEditContext from '../src/context';
+import bindCellEditing from '../src/row-binder';
+
+describe('Row Binder', () => {
+  let wrapper;
+  let cellEdit;
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+  const row = { id: 1, name: 'A' };
+  const keyField = 'id';
+  const value = _.get(row, keyField);
+
+  const { Provider } = createCellEditContext(_, op, false, jest.fn());
+  const BaseComponent = () => null;
+
+  describe('if cellEdit.nonEditableRows is undefined', () => {
+    beforeEach(() => {
+      const WithCellEditComponent = bindCellEditing(
+        props => <BaseComponent { ...props } />,
+        false
+      );
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent value={ value } />
+        </Provider>
+      );
+    });
+
+    it('should inject correct props to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toBeNull();
+      expect(wrapper.find(BaseComponent).prop('editingColIdx')).toBeNull();
+      expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
+    });
+  });
+
+  describe('if cellEdit.nonEditableRows is defined', () => {
+    const nonEditableRows = jest.fn().mockReturnValue([value]);
+    describe('if value prop is match in one of cellEdit.nonEditableRows', () => {
+      beforeEach(() => {
+        const WithCellEditComponent = bindCellEditing(
+          props => <BaseComponent { ...props } />,
+          false
+        );
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent value={ value } />
+          </Provider>
+        );
+      });
+
+      it('should inject correct editable prop as false to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeFalsy();
+      });
+    });
+
+    describe('if value prop is not match in one of cellEdit.nonEditableRows', () => {
+      beforeEach(() => {
+        const WithCellEditComponent = bindCellEditing(
+          props => <BaseComponent { ...props } />,
+          false
+        );
+        cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT, nonEditableRows });
+        wrapper = mount(
+          <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+            <WithCellEditComponent value={ 2 } />
+          </Provider>
+        );
+      });
+
+      it('should inject correct editable prop as false to target component', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('editable')).toBeTruthy();
+      });
+    });
+  });
+
+  describe(`if selectRowEnabled argument is true and cellEdit.mode is ${DBCLICK_TO_CELL_EDIT}`, () => {
+    beforeEach(() => {
+      const WithCellEditComponent = bindCellEditing(
+        props => <BaseComponent { ...props } />,
+        true
+      );
+      cellEdit = cellEditFactory({ mode: DBCLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent value={ value } />
+        </Provider>
+      );
+    });
+
+    it('should inject correct DELAY_FOR_DBCLICK prop to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('DELAY_FOR_DBCLICK')).toEqual(DELAY_FOR_DBCLICK);
+    });
+  });
+
+  describe('if cellEdit.ridx and cellEdit.cidx are defined', () => {
+    const ridx = 0;
+    const cidx = 1;
+    beforeEach(() => {
+      const WithCellEditComponent = bindCellEditing(
+        props => <BaseComponent { ...props } />,
+        false
+      );
+      cellEdit = cellEditFactory({ mode: CLICK_TO_CELL_EDIT });
+      wrapper = mount(
+        <Provider data={ data } keyField={ keyField } cellEdit={ cellEdit }>
+          <WithCellEditComponent value={ value } />
+        </Provider>
+      );
+      wrapper.instance().startEditing(ridx, cidx);
+      wrapper.update();
+    });
+
+    it('should inject correct editable prop as false to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('editingRowIdx')).toEqual(ridx);
+      expect(wrapper.find(BaseComponent).prop('editingColIdx')).toEqual(cidx);
+    });
+  });
+});

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

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import BootstrapTable from 'react-bootstrap-table-next';
-import cellEditFactory from 'react-bootstrap-table2-editor';
+// import cellEditFactory from 'react-bootstrap-table2-editor';
 import { productsGenerator } from 'utils/common';
 
-const products = productsGenerator(5000);
+const products = productsGenerator(2000);
 
 const columns = [{
   dataField: 'id',
@@ -17,16 +17,41 @@ const columns = [{
   text: 'Product Price'
 }];
 
-export default () => (
-  <div>
-    <BootstrapTable
-      keyField="id"
-      data={ products }
-      columns={ columns }
-      selectRow={ { mode: 'checkbox' } }
-      cellEdit={ cellEditFactory({
-        mode: 'click'
-      }) }
-    />
-  </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
+};
+
+/* 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/cell-edit/cell-edit-hooks-table.js

@@ -41,6 +41,7 @@ const columns = [{
   columns={ columns }
   cellEdit={ cellEditFactory({
     mode: 'click',
+    onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('start to edit!!!'); },
     beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
     afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
   }) }
@@ -55,6 +56,7 @@ export default () => (
       columns={ columns }
       cellEdit={ cellEditFactory({
         mode: 'click',
+        onStartEdit: (row, column, rowIndex, columnIndex) => { console.log('Start to edit!!!'); },
         beforeSaveCell: (oldValue, newValue, row, column) => { console.log('Before Saving Cell!!'); },
         afterSaveCell: (oldValue, newValue, row, column) => { console.log('After Saving Cell!!'); }
       }) }

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

@@ -52,7 +52,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Checkbox Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ todos }

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

@@ -118,7 +118,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Custom Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ products }

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

@@ -65,7 +65,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Date Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ stocks }

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

@@ -0,0 +1,69 @@
+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 selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: 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'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true,
+  clickToEdit: true
+};
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+  cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
+/>
+`;
+
+export default () => (
+  <div>
+    <h3>Double click to edit cell</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ selectRow }
+      cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -56,7 +56,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Dropdown Editor</h3>
+    <h3>Textarea Editor</h3>
     <BootstrapTable
       keyField="id"
       data={ jobs }

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

@@ -0,0 +1,221 @@
+/* eslint jsx-a11y/label-has-for: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+
+
+const products = [
+  { id: 12, name: 'Item 12', price: 12.5, inStock: false },
+  { id: 13, name: 'Item 13', price: 13.5, inStock: true },
+  { id: 14, name: 'Item 14', price: 14.5, inStock: true }
+];
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price'
+  },
+  {
+    dataField: 'inStock',
+    text: 'In Stock',
+    formatter: (cellContent, row) => (
+      <div className="checkbox disabled">
+        <label>
+          <input type="checkbox" checked={ row.inStock } disabled />
+        </label>
+      </div>
+    )
+  },
+  {
+    dataField: 'df1',
+    isDummyField: true,
+    text: 'Action 1',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  },
+  {
+    dataField: 'df2',
+    isDummyField: true,
+    text: 'Action 2',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+  {
+    dataField: 'id',
+    text: 'Product ID'
+  },
+  {
+    dataField: 'name',
+    text: 'Product Name'
+  },
+  {
+    dataField: 'price',
+    text: 'Product Price'
+  },
+  {
+    dataField: 'inStock',
+    text: 'In Stock',
+    formatter: (cellContent, row) => (
+      <div className="checkbox disabled">
+        <label>
+          <input type="checkbox" checked={ row.inStock } disabled />
+        </label>
+      </div>
+    )
+  },
+  {
+    dataField: 'df1',
+    isDummyField: true,
+    text: 'Action 1',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  },
+  {
+    dataField: 'df2',
+    isDummyField: true,
+    text: 'Action 2',
+    formatter: (cellContent, row) => {
+      if (row.inStock) {
+        return (
+          <h5>
+            <span className="label label-success"> Available</span>
+          </h5>
+        );
+      }
+      return (
+        <h5>
+          <span className="label label-danger"> Backordered</span>
+        </h5>
+      );
+    }
+  }
+];
+
+class ProductList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { products };
+  }
+
+  toggleInStock = () => {
+    let newProducts = [...this.state.products];
+    newProducts = newProducts.map((d) => {
+      if (d.id === 13) {
+        return {
+          ...d,
+          inStock: !d.inStock
+        };
+      }
+      return d;
+    });
+    this.setState(curr => ({ ...curr, products: newProducts }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h1 className="h2">Products</h1>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.products }
+          columns={ columns }
+        />
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+      </div>
+    );
+  }
+}
+`;
+
+class ProductList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { products };
+  }
+
+  toggleInStock = () => {
+    let newProducts = [...this.state.products];
+    newProducts = newProducts.map((d) => {
+      if (d.id === 13) {
+        return {
+          ...d,
+          inStock: !d.inStock
+        };
+      }
+      return d;
+    });
+    this.setState(curr => ({ ...curr, products: newProducts }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>Action 1 and Action 2 are dummy column</h3>
+        <button onClick={ this.toggleInStock } className="btn btn-primary">
+          Toggle item 13 stock status
+        </button>
+        <BootstrapTable
+          keyField="id"
+          data={ this.state.products }
+          columns={ columns }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+
+export default ProductList;

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

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

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

@@ -0,0 +1,140 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products1 = productsGenerator(15);
+const products2 = productsGenerator(15);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products1 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: true } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+
+<ToolkitProvider
+  keyField="id"
+  data={ products2 }
+  columns={ columns }
+  exportCSV={ { onlyExportSelection: true, exportAll: false } }
+>
+  {
+    props => (
+      <div>
+        <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+          selectRow={ selectRow }
+          pagination={ paginationFactory() }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const selectRow = {
+  mode: 'checkbox',
+  clickToSelect: true
+};
+
+export default () => (
+  <div>
+    <h3>Export all selected row</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products1 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: true } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <h3>Export all selected rows in currect visible rows</h3>
+    <ToolkitProvider
+      keyField="id"
+      data={ products2 }
+      columns={ columns }
+      exportCSV={ { onlyExportSelection: true, exportAll: false } }
+    >
+      {
+        props => (
+          <div>
+            <ExportCSVButton { ...props.csvProps }>Export CSV!!</ExportCSVButton>
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+              selectRow={ selectRow }
+              pagination={ paginationFactory() }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,84 @@
+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'
+};
+
+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>
+  )
+};
+
+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
+};
+
+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>
+  )
+};
+
+<BootstrapTable
+  keyField='id'
+  data={ products }
+  columns={ columns }
+  selectRow={ selectRow }
+/>
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ selectRow }
+      expandRow={ expandRow }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -1,5 +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';
@@ -21,7 +21,10 @@ const columns = [{
 
 const rowEvents = {
   onClick: (e, row, rowIndex) => {
-    alert(`clicked on row with index: ${rowIndex}`);
+    console.log(`clicked on row with index: ${rowIndex}`);
+  },
+  onMouseEnter: (e, row, rowIndex) => {
+    console.log(`enter on row with index: ${rowIndex}`);
   }
 };
 
@@ -41,7 +44,10 @@ const columns = [{
 
 const rowEvents = {
   onClick: (e, row, rowIndex) => {
-    alert(\`clicked on row with index: \${rowIndex}\`);
+    console.log(\`clicked on row with index: \${rowIndex}\`);
+  },
+  onMouseEnter: (e, row, rowIndex) => {
+    console.log(\`enter on row with index: \${rowIndex}\`);
   }
 };
 
@@ -50,7 +56,7 @@ const rowEvents = {
 
 export default () => (
   <div>
-    <h3>Try to click on any rows</h3>
+    <h3>Try to click or hover on any rows</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } rowEvents={ rowEvents } />
     <Code>{ sourceCode }</Code>
   </div>

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-example",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "main": "index.js",
   "private": true,
@@ -15,7 +15,7 @@
   "peerDependencies": {
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
-    "react-dom": "^116.3.0"
+    "react-dom": "^16.3.0"
   },
   "devDependencies": {
     "@storybook/addon-console": "^1.0.0",

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

@@ -30,6 +30,7 @@ import ColumnTitleTable from 'examples/columns/column-title-table';
 import ColumnEventTable from 'examples/columns/column-event-table';
 import ColumnHiddenTable from 'examples/columns/column-hidden-table';
 import ColumnAttrsTable from 'examples/columns/column-attrs-table';
+import DummyColumnTable from 'examples/columns/dummy-column-table';
 
 // work on header columns
 import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -98,6 +99,7 @@ import CellEditStyleTable from 'examples/cell-edit/cell-edit-style-table';
 import CellEditClassTable from 'examples/cell-edit/cell-edit-class-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';
 import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
 import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
 import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
@@ -111,6 +113,7 @@ import ClickToSelectTable from 'examples/row-selection/click-to-select';
 import DefaultSelectTable from 'examples/row-selection/default-select';
 import SelectionManagement from 'examples/row-selection/selection-management';
 import ClickToSelectWithCellEditTable from 'examples/row-selection/click-to-select-with-cell-edit';
+import 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';
@@ -145,8 +148,10 @@ import ExportCSV from 'examples/csv';
 import CSVFormatter from 'examples/csv/csv-column-formatter';
 import CustomCSVHeader from 'examples/csv/custom-csv-header';
 import HideCSVColumn from 'examples/csv/hide-column';
+import ExportOnlySelected from 'examples/csv/export-only-selected';
 import CSVColumnType from 'examples/csv/csv-column-type';
 import CustomCSVButton from 'examples/csv/custom-csv-button';
+import ExportCustomData from 'examples/csv/export-custom-data';
 import CustomCSV from 'examples/csv/custom-csv';
 
 // loading overlay
@@ -201,7 +206,8 @@ storiesOf('Work on Columns', module)
   .add('Column Event', () => <ColumnEventTable />)
   .add('Customize Column Class', () => <ColumnClassTable />)
   .add('Customize Column Style', () => <ColumnStyleTable />)
-  .add('Customize Column HTML attribute', () => <ColumnAttrsTable />);
+  .add('Customize Column HTML attribute', () => <ColumnAttrsTable />)
+  .add('Dummy Column', () => <DummyColumnTable />);
 
 storiesOf('Work on Header Columns', module)
   .addDecorator(bootstrapStyle())
@@ -276,6 +282,7 @@ storiesOf('Cell Editing', module)
   .add('Custom Cell Classes', () => <CellEditClassTable />)
   .add('Custom Editor Classes', () => <EditorClassTable />)
   .add('Custom Editor Style', () => <EditorStyleTable />)
+  .add('DoubleClick to Edit with Selection', () => <DBClickEditWithSelection />)
   .add('Dropdown Editor', () => <DropdownEditorTable />)
   .add('Textarea Editor', () => <TextareaEditorTable />)
   .add('Checkbox Editor', () => <CheckboxEditorTable />)
@@ -290,6 +297,7 @@ storiesOf('Row Selection', module)
   .add('Default Select', () => <DefaultSelectTable />)
   .add('Selection Management', () => <SelectionManagement />)
   .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 />)
@@ -328,8 +336,10 @@ storiesOf('Export CSV', module)
   .add('Format CSV Column', () => <CSVFormatter />)
   .add('Custom CSV Header', () => <CustomCSVHeader />)
   .add('Hide CSV Column', () => <HideCSVColumn />)
+  .add('Only Export Selected Rows', () => <ExportOnlySelected />)
   .add('CSV Column Type', () => <CSVColumnType />)
   .add('Custom CSV Button', () => <CustomCSVButton />)
+  .add('Export Custom Data', () => <ExportCustomData />)
   .add('Custom CSV', () => <CustomCSV />);
 
 storiesOf('EmptyTableOverlay', module)

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

@@ -124,3 +124,6 @@ Default is `true`.
 
 #### exportAll - [bool]
 Default is `true`. `false` will only export current data which display on table.
+
+#### onlyExportSelection - [bool]
+Default is `false`. `true` will only export the data which is selected.

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

@@ -26,7 +26,9 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
         fileName: PropTypes.string,
         separator: PropTypes.string,
         ignoreHeader: PropTypes.bool,
-        noAutoBOM: PropTypes.bool
+        noAutoBOM: PropTypes.bool,
+        exportAll: PropTypes.bool,
+        onlyExportSelection: PropTypes.bool
       })
     ])
   }

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

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

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

@@ -11,7 +11,7 @@ const ExportCSVButton = (props) => {
   return (
     <button
       type="button"
-      onClick={ onExport }
+      onClick={ () => onExport() }
       { ...rest }
     >
       { children }

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

@@ -5,13 +5,14 @@ const csvDefaultOptions = {
   separator: ',',
   ignoreHeader: false,
   noAutoBOM: true,
-  exportAll: true
+  exportAll: true,
+  onlyExportSelection: false
 };
 
 export default Base =>
   class CSVOperation extends Base {
-    handleExportCSV = () => {
-      const { columns, exportCSV } = this.props;
+    handleExportCSV = (source) => {
+      const { columns, exportCSV, keyField } = this.props;
       const meta = getMetaInfo(columns);
       const options = exportCSV === true ?
         csvDefaultOptions :
@@ -20,7 +21,19 @@ export default Base =>
           ...exportCSV
         };
 
-      const data = options.exportAll ? this.props.data : this.getData();
+      // get data for csv export
+      let data;
+      if (typeof source !== 'undefined') {
+        data = source;
+      } else {
+        data = options.exportAll ? this.props.data : this.getData();
+      }
+
+      // filter data
+      if (options.onlyExportSelection) {
+        const selections = this.getSelected();
+        data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
+      }
       const content = transform(data, meta, this._.get, options);
       save(content, options);
     }

packages/react-bootstrap-table2/package.json

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

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

@@ -3,129 +3,104 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import cs from 'classnames';
 
 import _ from './utils';
-import Row from './row';
-import ExpandRow from './row-expand/expand-row';
+import Row from './simple-row';
+import RowAggregator from './row-aggregator';
 import RowSection from './row-section';
 import Const from './const';
+import bindSelection from './row-selection/row-binder';
+import bindExpansion from './row-expand/row-binder';
 
-const Body = (props) => {
-  const {
-    columns,
-    data,
-    keyField,
-    isEmpty,
-    noDataIndication,
-    visibleColumnSize,
-    cellEdit,
-    selectRow,
-    selectedRowKeys,
-    rowStyle,
-    rowClasses,
-    rowEvents,
-    expandRow
-  } = props;
-
-  const {
-    bgColor,
-    nonSelectable
-  } = selectRow;
-
-  let content;
-
-  if (isEmpty) {
-    const indication = _.isFunction(noDataIndication) ? noDataIndication() : noDataIndication;
-    if (!indication) {
-      return null;
+class Body extends React.Component {
+  constructor(props) {
+    super(props);
+    if (props.cellEdit.createContext) {
+      this.EditingCell = props.cellEdit.createEditingCell(_, props.cellEdit.options.onStartEdit);
     }
-    content = <RowSection content={ indication } colSpan={ visibleColumnSize } />;
-  } else {
-    const nonEditableRows = cellEdit.nonEditableRows || [];
-    content = data.map((row, index) => {
-      const key = _.get(row, keyField);
-      const editable = !(nonEditableRows.length > 0 && nonEditableRows.indexOf(key) > -1);
-
-      const selected = selectRow.mode !== Const.ROW_SELECT_DISABLED
-        ? selectedRowKeys.includes(key)
-        : null;
-
-      const attrs = rowEvents || {};
-      let style = _.isFunction(rowStyle) ? rowStyle(row, index) : rowStyle;
-      let classes = (_.isFunction(rowClasses) ? rowClasses(row, index) : rowClasses);
-      if (selected) {
-        const selectedStyle = _.isFunction(selectRow.style)
-          ? selectRow.style(row, index)
-          : selectRow.style;
-
-        const selectedClasses = _.isFunction(selectRow.classes)
-          ? selectRow.classes(row, index)
-          : selectRow.classes;
-
-        style = {
-          ...style,
-          ...selectedStyle
-        };
-        classes = cs(classes, selectedClasses);
-
-        if (bgColor) {
-          style = style || {};
-          style.backgroundColor = _.isFunction(bgColor) ? bgColor(row, index) : bgColor;
-        }
-      }
-
-      const selectable = !nonSelectable || !nonSelectable.includes(key);
-      const expandable = expandRow && !expandRow.nonExpandable.includes(key);
-      const expanded = expandRow && expandRow.expanded.includes(key);
-
-      const result = [
-        <Row
-          key={ key }
-          row={ row }
-          keyField={ keyField }
-          rowIndex={ index }
-          columns={ columns }
-          cellEdit={ cellEdit }
-          editable={ editable }
-          selectable={ selectable }
-          expandable={ expandable }
-          selected={ selected }
-          expanded={ expanded }
-          selectRow={ selectRow }
-          expandRow={ expandRow }
-          style={ style }
-          className={ classes }
-          attrs={ attrs }
-        />
-      ];
-
-      if (expanded) {
-        result.push((
-          <ExpandRow
-            key={ `${key}-expanding` }
-            colSpan={ visibleColumnSize }
-          >
-            { expandRow.renderer(row) }
-          </ExpandRow>
-        ));
-      }
-
-      return result;
-    });
+    this.RowComponent = bindSelection(RowAggregator);
   }
 
-  return (
-    <tbody>{ content }</tbody>
-  );
-};
+  render() {
+    const {
+      columns,
+      data,
+      keyField,
+      isEmpty,
+      noDataIndication,
+      visibleColumnSize,
+      cellEdit,
+      selectRow,
+      rowStyle,
+      rowClasses,
+      rowEvents,
+      expandRow
+    } = this.props;
+
+    let content;
+
+    if (isEmpty) {
+      const indication = _.isFunction(noDataIndication) ? noDataIndication() : noDataIndication;
+      if (!indication) {
+        return null;
+      }
+      content = <RowSection content={ indication } colSpan={ visibleColumnSize } />;
+    } else {
+      let RowComponent = Row;
+      const selectRowEnabled = selectRow.mode !== Const.ROW_SELECT_DISABLED;
+      const expandRowEnabled = !!expandRow.renderer;
+
+      const additionalRowProps = {};
+      if (expandRowEnabled) {
+        RowComponent = bindExpansion(RowAggregator, visibleColumnSize);
+      }
+
+      // if (selectRowEnabled) {
+      //   RowComponent = bindSelection(expandRowEnabled ? RowComponent : RowAggregator);
+      // }
+
+      if (cellEdit.createContext) {
+        RowComponent = cellEdit.bindRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _);
+        additionalRowProps.EditingCellComponent = this.EditingCell;
+      }
+
+      if (selectRowEnabled || expandRowEnabled) {
+        additionalRowProps.expandRow = expandRow;
+        additionalRowProps.selectRow = selectRow;
+      }
+
+      content = data.map((row, index) => {
+        const key = _.get(row, keyField);
+        const baseRowProps = {
+          key,
+          row,
+          columns,
+          keyField,
+          cellEdit,
+          value: key,
+          rowIndex: index,
+          attrs: rowEvents || {},
+          ...additionalRowProps
+        };
+
+        baseRowProps.style = _.isFunction(rowStyle) ? rowStyle(row, index) : rowStyle;
+        baseRowProps.className = (_.isFunction(rowClasses) ? rowClasses(row, index) : rowClasses);
+
+        return <this.RowComponent { ...baseRowProps } />;
+      });
+    }
+
+    return (
+      <tbody>{ content }</tbody>
+    );
+  }
+}
 
 Body.propTypes = {
   keyField: PropTypes.string.isRequired,
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
-  selectRow: PropTypes.object,
-  selectedRowKeys: PropTypes.array
+  selectRow: PropTypes.object
 };
 
 export default Body;

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

@@ -9,7 +9,6 @@ import Caption from './caption';
 import Body from './body';
 import PropsBaseResolver from './props-resolver';
 import Const from './const';
-import { getSelectionSummary } from './store/selection';
 
 class BootstrapTable extends PropsBaseResolver(Component) {
   constructor(props) {
@@ -56,7 +55,9 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       rowClasses,
       wrapperClasses,
       rowEvents,
-      selected
+      selectRow,
+      expandRow,
+      cellEdit
     } = this.props;
 
     const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
@@ -68,20 +69,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       'table-condensed': condensed
     }, classes);
 
-    const cellSelectionInfo = this.resolveSelectRowProps({
-      onRowSelect: this.props.onRowSelect
-    });
-
-    const { allRowsSelected, allRowsNotSelected } = getSelectionSummary(data, keyField, selected);
-    const headerCellSelectionInfo = this.resolveSelectRowPropsForHeader({
-      onAllRowsSelect: this.props.onAllRowsSelect,
-      selected,
-      allRowsSelected,
-      allRowsNotSelected
-    });
-
     const tableCaption = (caption && <Caption>{ caption }</Caption>);
-    const expandRow = this.resolveExpandRowProps();
 
     return (
       <div className={ tableWrapperClass }>
@@ -95,7 +83,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             onSort={ this.props.onSort }
             onFilter={ this.props.onFilter }
             onExternalFilter={ this.props.onExternalFilter }
-            selectRow={ headerCellSelectionInfo }
+            selectRow={ selectRow }
             expandRow={ expandRow }
           />
           <Body
@@ -105,9 +93,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             isEmpty={ this.isEmpty() }
             visibleColumnSize={ this.visibleColumnSize() }
             noDataIndication={ noDataIndication }
-            cellEdit={ this.props.cellEdit || {} }
-            selectRow={ cellSelectionInfo }
-            selectedRowKeys={ selected }
+            cellEdit={ cellEdit }
+            selectRow={ selectRow }
             expandRow={ expandRow }
             rowStyle={ rowStyle }
             rowClasses={ rowClasses }
@@ -143,7 +130,11 @@ BootstrapTable.propTypes = {
   filter: PropTypes.object,
   cellEdit: PropTypes.object,
   selectRow: PropTypes.shape({
-    mode: PropTypes.oneOf([Const.ROW_SELECT_SINGLE, Const.ROW_SELECT_MULTIPLE]).isRequired,
+    mode: PropTypes.oneOf([
+      Const.ROW_SELECT_SINGLE,
+      Const.ROW_SELECT_MULTIPLE,
+      Const.ROW_SELECT_DISABLED
+    ]).isRequired,
     clickToSelect: PropTypes.bool,
     clickToEdit: PropTypes.bool,
     onSelect: PropTypes.func,
@@ -156,10 +147,8 @@ BootstrapTable.propTypes = {
     selectionRenderer: PropTypes.func,
     selectionHeaderRenderer: PropTypes.func
   }),
-  onRowSelect: PropTypes.func,
-  onAllRowsSelect: PropTypes.func,
   expandRow: PropTypes.shape({
-    renderer: PropTypes.func.isRequired,
+    renderer: PropTypes.func,
     expanded: PropTypes.array,
     onExpand: PropTypes.func,
     onExpandAll: PropTypes.func,
@@ -168,9 +157,6 @@ BootstrapTable.propTypes = {
     expandColumnRenderer: PropTypes.func,
     expandHeaderColumnRenderer: PropTypes.func
   }),
-  onRowExpand: PropTypes.func,
-  onAllRowExpand: PropTypes.func,
-  isAnyExpands: PropTypes.bool,
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
@@ -200,7 +186,21 @@ BootstrapTable.defaultProps = {
   bordered: true,
   hover: false,
   condensed: false,
-  noDataIndication: null
+  noDataIndication: null,
+  selectRow: {
+    mode: Const.ROW_SELECT_DISABLED,
+    selected: [],
+    hideSelectColumn: true
+  },
+  expandRow: {
+    renderer: undefined,
+    expanded: [],
+    nonExpandable: []
+  },
+  cellEdit: {
+    mode: null,
+    nonEditableRows: []
+  }
 };
 
 export default BootstrapTable;

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

@@ -11,9 +11,18 @@ class Cell extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    const shouldUpdate =
-      _.get(this.props.row, this.props.column.dataField)
-        !== _.get(nextProps.row, nextProps.column.dataField) ||
+    let shouldUpdate = false;
+    if (nextProps.column.isDummyField) {
+      shouldUpdate = !_.isEqual(this.props.row, nextProps.row);
+    } else {
+      shouldUpdate =
+        _.get(this.props.row, this.props.column.dataField)
+          !== _.get(nextProps.row, nextProps.column.dataField);
+    }
+
+    if (shouldUpdate) return true;
+
+    shouldUpdate =
       this.props.column.hidden !== nextProps.column.hidden ||
       this.props.rowIndex !== nextProps.rowIndex ||
       this.props.columnIndex !== nextProps.columnIndex ||
@@ -64,7 +73,10 @@ class Cell extends Component {
       formatExtraData
     } = column;
     const attrs = { ...rest };
-    let content = _.get(row, dataField);
+    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

@@ -4,8 +4,8 @@ import React, { Component } from 'react';
 import _ from '../utils';
 import createDataContext from './data-context';
 import createSortContext from './sort-context';
-import createSelectionContext from './selection-context';
-import createRowExpandContext from './row-expand-context';
+import SelectionContext from './selection-context';
+import RowExpandContext from './row-expand-context';
 import remoteResolver from '../props-resolver/remote-resolver';
 import { BootstrapContext } from './bootstrap';
 import dataOperator from '../store/operators';
@@ -22,11 +22,11 @@ const withContext = Base =>
       }
 
       if (props.selectRow) {
-        this.SelectionContext = createSelectionContext(dataOperator);
+        this.SelectionContext = SelectionContext;
       }
 
       if (props.expandRow) {
-        this.RowExpandContext = createRowExpandContext(dataOperator);
+        this.RowExpandContext = RowExpandContext;
       }
 
       if (props.cellEdit && props.cellEdit.createContext) {
@@ -57,23 +57,17 @@ const withContext = Base =>
     renderBase() {
       return (
         rootProps,
-        cellEditProps,
         filterProps,
         searchProps,
         sortProps,
         paginationProps,
-        expandProps,
-        selectionProps
       ) => (
         <Base
           { ...this.props }
-          { ...selectionProps }
           { ...sortProps }
-          { ...cellEditProps }
           { ...filterProps }
           { ...searchProps }
           { ...paginationProps }
-          { ...expandProps }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         />
       );
@@ -82,32 +76,25 @@ const withContext = Base =>
     renderWithSelectionCtx(base, baseProps) {
       return (
         rootProps,
-        cellEditProps,
         filterProps,
         searchProps,
         sortProps,
-        paginationProps,
-        expandProps
+        paginationProps
       ) => (
         <this.SelectionContext.Provider
           { ...baseProps }
           selectRow={ this.props.selectRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >
-          <this.SelectionContext.Consumer>
-            {
-              selectionProps => base(
-                rootProps,
-                cellEditProps,
-                filterProps,
-                searchProps,
-                sortProps,
-                paginationProps,
-                expandProps,
-                selectionProps
-              )
-            }
-          </this.SelectionContext.Consumer>
+          {
+            base(
+              rootProps,
+              filterProps,
+              searchProps,
+              sortProps,
+              paginationProps
+            )
+          }
         </this.SelectionContext.Provider>
       );
     }
@@ -115,7 +102,6 @@ const withContext = Base =>
     renderWithRowExpandCtx(base, baseProps) {
       return (
         rootProps,
-        cellEditProps,
         filterProps,
         searchProps,
         sortProps,
@@ -126,19 +112,15 @@ const withContext = Base =>
           expandRow={ this.props.expandRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >
-          <this.RowExpandContext.Consumer>
-            {
-              expandProps => base(
-                rootProps,
-                cellEditProps,
-                filterProps,
-                searchProps,
-                sortProps,
-                paginationProps,
-                expandProps
-              )
-            }
-          </this.RowExpandContext.Consumer>
+          {
+            base(
+              rootProps,
+              filterProps,
+              searchProps,
+              sortProps,
+              paginationProps
+            )
+          }
         </this.RowExpandContext.Provider>
       );
     }
@@ -146,7 +128,6 @@ const withContext = Base =>
     renderWithPaginationCtx(base) {
       return (
         rootProps,
-        cellEditProps,
         filterProps,
         searchProps,
         sortProps
@@ -161,7 +142,6 @@ const withContext = Base =>
             {
               paginationProps => base(
                 rootProps,
-                cellEditProps,
                 filterProps,
                 searchProps,
                 sortProps,
@@ -176,7 +156,6 @@ const withContext = Base =>
     renderWithSortCtx(base, baseProps) {
       return (
         rootProps,
-        cellEditProps,
         filterProps,
         searchProps
       ) => (
@@ -191,7 +170,6 @@ const withContext = Base =>
             {
               sortProps => base(
                 rootProps,
-                cellEditProps,
                 filterProps,
                 searchProps,
                 sortProps,
@@ -205,7 +183,6 @@ const withContext = Base =>
     renderWithSearchCtx(base, baseProps) {
       return (
         rootProps,
-        cellEditProps,
         filterProps
       ) => (
         <this.SearchContext.Provider
@@ -218,7 +195,6 @@ const withContext = Base =>
             {
               searchProps => base(
                 rootProps,
-                cellEditProps,
                 filterProps,
                 searchProps
               )
@@ -229,10 +205,7 @@ const withContext = Base =>
     }
 
     renderWithFilterCtx(base, baseProps) {
-      return (
-        rootProps,
-        cellEditProps
-      ) => (
+      return rootProps => (
         <this.FilterContext.Provider
           { ...baseProps }
           ref={ n => this.filterContext = n }
@@ -242,7 +215,6 @@ const withContext = Base =>
             {
               filterProps => base(
                 rootProps,
-                cellEditProps,
                 filterProps
               )
             }
@@ -259,18 +231,15 @@ const withContext = Base =>
           cellEdit={ this.props.cellEdit }
           data={ rootProps.getData() }
         >
-          <this.CellEditContext.Consumer>
-            {
-              cellEditProps => base(rootProps, cellEditProps)
-            }
-          </this.CellEditContext.Consumer>
+          { base(rootProps) }
         </this.CellEditContext.Provider>
       );
     }
 
     render() {
-      const { keyField, columns, bootstrap4 } = this.props;
+      const { keyField, columns, bootstrap4, registerExposedAPI } = this.props;
       const baseProps = { keyField, columns };
+      if (registerExposedAPI) baseProps.registerExposedAPI = registerExposedAPI;
 
       let base = this.renderBase();
 

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

@@ -1,91 +1,90 @@
 /* eslint react/prop-types: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
+import dataOperator from '../store/operators';
 
-export default (
-  dataOperator
-) => {
-  const RowExpandContext = React.createContext();
+const RowExpandContext = React.createContext();
 
-  class RowExpandProvider extends React.Component {
-    static propTypes = {
-      children: PropTypes.node.isRequired,
-      data: PropTypes.array.isRequired,
-      keyField: PropTypes.string.isRequired
-    }
+class RowExpandProvider extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    data: PropTypes.array.isRequired,
+    keyField: PropTypes.string.isRequired
+  }
 
-    state = { expanded: this.props.expandRow.expanded || [] };
+  state = { expanded: this.props.expandRow.expanded || [] };
 
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.expandRow) {
-        this.setState(() => ({
-          expanded: nextProps.expandRow.expanded || this.state.expanded
-        }));
-      }
-    }
-
-    handleRowExpand = (rowKey, expanded, rowIndex, e) => {
-      const { data, keyField, expandRow: { onExpand } } = this.props;
-
-      let currExpanded = [...this.state.expanded];
-
-      if (expanded) {
-        currExpanded.push(rowKey);
-      } else {
-        currExpanded = currExpanded.filter(value => value !== rowKey);
-      }
-
-      if (onExpand) {
-        const row = dataOperator.getRowByRowId(data, keyField, rowKey);
-        onExpand(row, expanded, rowIndex, e);
-      }
-      this.setState(() => ({ expanded: currExpanded }));
-    }
-
-    handleAllRowExpand = (e, expandAll) => {
-      const {
-        data,
-        keyField,
-        expandRow: {
-          onExpandAll,
-          nonExpandable
-        }
-      } = this.props;
-      const { expanded } = this.state;
-
-      let currExpanded;
-
-      if (expandAll) {
-        currExpanded = expanded.concat(dataOperator.expandableKeys(data, keyField, nonExpandable));
-      } else {
-        currExpanded = expanded.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
-      }
-
-      if (onExpandAll) {
-        onExpandAll(expandAll, dataOperator.getExpandedRows(data, keyField, currExpanded), e);
-      }
-
-      this.setState(() => ({ expanded: currExpanded }));
-    }
-
-    render() {
-      const { data, keyField } = this.props;
-      return (
-        <RowExpandContext.Provider
-          value={ {
-            isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
-            expanded: this.state.expanded,
-            onRowExpand: this.handleRowExpand,
-            onAllRowExpand: this.handleAllRowExpand
-          } }
-        >
-          { this.props.children }
-        </RowExpandContext.Provider>
-      );
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.expandRow) {
+      this.setState(() => ({
+        expanded: nextProps.expandRow.expanded || this.state.expanded
+      }));
     }
   }
-  return {
-    Provider: RowExpandProvider,
-    Consumer: RowExpandContext.Consumer
-  };
+
+  handleRowExpand = (rowKey, expanded, rowIndex, e) => {
+    const { data, keyField, expandRow: { onExpand } } = this.props;
+
+    let currExpanded = [...this.state.expanded];
+
+    if (expanded) {
+      currExpanded.push(rowKey);
+    } else {
+      currExpanded = currExpanded.filter(value => value !== rowKey);
+    }
+
+    if (onExpand) {
+      const row = dataOperator.getRowByRowId(data, keyField, rowKey);
+      onExpand(row, expanded, rowIndex, e);
+    }
+    this.setState(() => ({ expanded: currExpanded }));
+  }
+
+  handleAllRowExpand = (e, expandAll) => {
+    const {
+      data,
+      keyField,
+      expandRow: {
+        onExpandAll,
+        nonExpandable
+      }
+    } = this.props;
+    const { expanded } = this.state;
+
+    let currExpanded;
+
+    if (expandAll) {
+      currExpanded = expanded.concat(dataOperator.expandableKeys(data, keyField, nonExpandable));
+    } else {
+      currExpanded = expanded.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
+    }
+
+    if (onExpandAll) {
+      onExpandAll(expandAll, dataOperator.getExpandedRows(data, keyField, currExpanded), e);
+    }
+
+    this.setState(() => ({ expanded: currExpanded }));
+  }
+
+  render() {
+    const { data, keyField } = this.props;
+    return (
+      <RowExpandContext.Provider
+        value={ {
+          ...this.props.expandRow,
+          expanded: this.state.expanded,
+          isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
+          onRowExpand: this.handleRowExpand,
+          onAllRowExpand: this.handleAllRowExpand
+        } }
+      >
+        { this.props.children }
+      </RowExpandContext.Provider>
+    );
+  }
+}
+
+export default {
+  Provider: RowExpandProvider,
+  Consumer: RowExpandContext.Consumer
 };

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

@@ -3,92 +3,124 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Const from '../const';
 
-export default (
-  dataOperator
-) => {
-  const SelectionContext = React.createContext();
+import dataOperator from '../store/operators';
+import { getSelectionSummary } from '../store/selection';
 
-  class SelectionProvider extends React.Component {
-    static propTypes = {
-      children: PropTypes.node.isRequired,
-      data: PropTypes.array.isRequired,
-      keyField: PropTypes.string.isRequired
-    }
+const SelectionContext = React.createContext();
+class SelectionProvider extends React.Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    data: PropTypes.array.isRequired,
+    keyField: PropTypes.string.isRequired
+  }
 
-    state = { selected: (this.props.selectRow && this.props.selectRow.selected) || [] };
-
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.selectRow) {
-        this.setState(() => ({
-          selected: nextProps.selectRow.selected || this.state.selected
-        }));
-      }
-    }
-
-    handleRowSelect = (rowKey, checked, rowIndex, e) => {
-      const { data, keyField, selectRow: { mode, onSelect } } = this.props;
-      const { ROW_SELECT_SINGLE } = Const;
-
-      let currSelected = [...this.state.selected];
-
-      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);
-      }
-
-      if (onSelect) {
-        const row = dataOperator.getRowByRowId(data, keyField, rowKey);
-        onSelect(row, checked, rowIndex, e);
-      }
-
-      this.setState(() => ({ selected: currSelected }));
-    }
-
-    handleAllRowsSelect = (e, isUnSelect) => {
-      const {
-        data,
-        keyField,
-        selectRow: {
-          onSelectAll,
-          nonSelectable
-        }
-      } = this.props;
-      const { selected } = this.state;
-
-      let currSelected;
-
-      if (!isUnSelect) {
-        currSelected = selected.concat(dataOperator.selectableKeys(data, keyField, nonSelectable));
-      } else {
-        currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
-      }
-
-      if (onSelectAll) {
-        onSelectAll(!isUnSelect, dataOperator.getSelectedRows(data, keyField, currSelected), e);
-      }
-
-      this.setState(() => ({ selected: currSelected }));
-    }
-
-    render() {
-      return (
-        <SelectionContext.Provider
-          value={ {
-            selected: this.state.selected,
-            onRowSelect: this.handleRowSelect,
-            onAllRowsSelect: this.handleAllRowsSelect
-          } }
-        >
-          { this.props.children }
-        </SelectionContext.Provider>
-      );
+  constructor(props) {
+    super(props);
+    if (props.registerExposedAPI) {
+      const getSelected = () => this.getSelected();
+      props.registerExposedAPI(getSelected);
     }
   }
-  return {
-    Provider: SelectionProvider,
-    Consumer: SelectionContext.Consumer
-  };
+
+  state = { selected: (this.props.selectRow && this.props.selectRow.selected) || [] };
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectRow) {
+      this.setState(() => ({
+        selected: nextProps.selectRow.selected || this.state.selected
+      }));
+    }
+  }
+
+  // exposed API
+  getSelected() {
+    return this.state.selected;
+  }
+
+  handleRowSelect = (rowKey, checked, rowIndex, e) => {
+    const { data, keyField, selectRow: { mode, onSelect } } = this.props;
+    const { ROW_SELECT_SINGLE } = Const;
+
+    let currSelected = [...this.state.selected];
+
+    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);
+    }
+
+    if (onSelect) {
+      const row = dataOperator.getRowByRowId(data, keyField, rowKey);
+      onSelect(row, checked, rowIndex, e);
+    }
+
+    this.setState(() => ({ selected: currSelected }));
+  }
+
+  handleAllRowsSelect = (e, isUnSelect) => {
+    const {
+      data,
+      keyField,
+      selectRow: {
+        onSelectAll,
+        nonSelectable
+      }
+    } = this.props;
+    const { selected } = this.state;
+
+    let currSelected;
+
+    if (!isUnSelect) {
+      currSelected = selected.concat(dataOperator.selectableKeys(data, keyField, nonSelectable));
+    } else {
+      currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
+    }
+
+    if (onSelectAll) {
+      onSelectAll(!isUnSelect, dataOperator.getSelectedRows(data, keyField, currSelected), e);
+    }
+
+    this.setState(() => ({ selected: currSelected }));
+  }
+
+  render() {
+    const {
+      allRowsSelected,
+      allRowsNotSelected
+    } = getSelectionSummary(
+      this.props.data,
+      this.props.keyField,
+      this.state.selected
+    );
+
+    let checkedStatus;
+
+    // checkbox status depending on selected rows counts
+    if (allRowsSelected) checkedStatus = Const.CHECKBOX_STATUS_CHECKED;
+    else if (allRowsNotSelected) checkedStatus = Const.CHECKBOX_STATUS_UNCHECKED;
+    else checkedStatus = Const.CHECKBOX_STATUS_INDETERMINATE;
+
+    return (
+      <SelectionContext.Provider
+        value={ {
+          ...this.props.selectRow,
+          selected: this.state.selected,
+          onRowSelect: this.handleRowSelect,
+          onAllRowsSelect: this.handleAllRowsSelect,
+          allRowsSelected,
+          allRowsNotSelected,
+          checkedStatus
+        } }
+      >
+        { this.props.children }
+      </SelectionContext.Provider>
+    );
+  }
+}
+
+export default {
+  Provider: SelectionProvider,
+  Consumer: SelectionContext.Consumer
 };

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

@@ -114,6 +114,7 @@ HeaderCell.propTypes = {
   column: PropTypes.shape({
     dataField: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
+    isDummyField: PropTypes.bool,
     hidden: PropTypes.bool,
     headerFormatter: PropTypes.func,
     formatter: PropTypes.func,

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

@@ -1,15 +1,14 @@
 /* eslint react/require-default-props: 0 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Const from './const';
 
 import HeaderCell from './header-cell';
 import SelectionHeaderCell from './row-selection/selection-header-cell';
 import ExpandHeaderCell from './row-expand/expand-header-cell';
+import bindSelection from './row-selection/selection-header-cell-binder';
+import bindExpansion from './row-expand/expand-header-cell-binder';
 
 const Header = (props) => {
-  const { ROW_SELECT_DISABLED } = Const;
-
   const {
     className,
     columns,
@@ -23,20 +22,24 @@ const Header = (props) => {
     bootstrap4
   } = props;
 
+  let SelectionHeaderCellComp = () => null;
+  let ExpansionHeaderCellComp = () => null;
+
+  if (expandRow.showExpandColumn) {
+    ExpansionHeaderCellComp = bindExpansion(ExpandHeaderCell);
+  }
+
+  if (selectRow) {
+    SelectionHeaderCellComp = bindSelection(SelectionHeaderCell);
+  }
+
   return (
     <thead>
       <tr className={ className }>
+        <ExpansionHeaderCellComp />
         {
-          (expandRow && expandRow.showExpandColumn)
-            ? <ExpandHeaderCell
-              onAllRowExpand={ expandRow.onAllRowExpand }
-              anyExpands={ expandRow.isAnyExpands }
-              renderer={ expandRow.expandHeaderColumnRenderer }
-            /> : null
-        }
-        {
-          (selectRow.mode !== ROW_SELECT_DISABLED && !selectRow.hideSelectColumn)
-            ? <SelectionHeaderCell { ...selectRow } /> : null
+          !selectRow.hideSelectColumn ?
+            <SelectionHeaderCellComp /> : null
         }
         {
           columns.map((column, i) => {

packages/react-bootstrap-table2/src/props-resolver/expand-row-resolver.js

@@ -1,17 +0,0 @@
-export default ExtendBase =>
-  class ExpandRowResolver extends ExtendBase {
-    resolveExpandRowProps() {
-      const { expandRow, expanded, onRowExpand, onAllRowExpand, isAnyExpands } = this.props;
-      if (expandRow) {
-        return {
-          ...expandRow,
-          expanded,
-          onRowExpand,
-          onAllRowExpand,
-          isAnyExpands,
-          nonExpandable: expandRow.nonExpandable || []
-        };
-      }
-      return null;
-    }
-  };

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

@@ -1,11 +1,7 @@
 import ColumnResolver from './column-resolver';
-import ExpandRowResolver from './expand-row-resolver';
-import Const from '../const';
-import _ from '../utils';
 
 export default ExtendBase =>
-  class TableResolver extends
-    ExpandRowResolver(ColumnResolver(ExtendBase)) {
+  class TableResolver extends ColumnResolver(ExtendBase) {
     validateProps() {
       const { keyField } = this.props;
       if (!keyField) {
@@ -19,63 +15,4 @@ export default ExtendBase =>
     isEmpty() {
       return this.props.data.length === 0;
     }
-
-    /**
-     * props resolver for cell selection
-     * @param {Object} options - addtional options like callback which are about to merge into props
-     *
-     * @returns {Object} result - props for cell selections
-     * @returns {String} result.mode - input type of row selection or disabled.
-     */
-    resolveSelectRowProps(options) {
-      const { selectRow } = this.props;
-      const { ROW_SELECT_DISABLED } = Const;
-
-      if (_.isDefined(selectRow)) {
-        return {
-          ...selectRow,
-          ...options
-        };
-      }
-
-      return {
-        mode: ROW_SELECT_DISABLED
-      };
-    }
-
-    /**
-     * props resolver for header cell selection
-     * @param {Object} options - addtional options like callback which are about to merge into props
-     *
-     * @returns {Object} result - props for cell selections
-     * @returns {String} result.mode - input type of row selection or disabled.
-     * @returns {String} result.checkedStatus - checkbox status depending on selected rows counts
-     */
-    resolveSelectRowPropsForHeader(options = {}) {
-      const { selectRow } = this.props;
-      const { allRowsSelected, allRowsNotSelected, ...rest } = options;
-      const {
-        ROW_SELECT_DISABLED, CHECKBOX_STATUS_CHECKED,
-        CHECKBOX_STATUS_INDETERMINATE, CHECKBOX_STATUS_UNCHECKED
-      } = Const;
-
-      if (_.isDefined(selectRow)) {
-        let checkedStatus;
-
-        // checkbox status depending on selected rows counts
-        if (allRowsSelected) checkedStatus = CHECKBOX_STATUS_CHECKED;
-        else if (allRowsNotSelected) checkedStatus = CHECKBOX_STATUS_UNCHECKED;
-        else checkedStatus = CHECKBOX_STATUS_INDETERMINATE;
-
-        return {
-          ...selectRow,
-          ...rest,
-          checkedStatus
-        };
-      }
-
-      return {
-        mode: ROW_SELECT_DISABLED
-      };
-    }
   };

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

@@ -1,6 +1,3 @@
-import _ from './utils';
-import Const from './const';
-
 const events = [
   'onClick',
   'onDoubleClick',
@@ -14,7 +11,6 @@ export default ExtendBase =>
       super(props);
       this.clickNum = 0;
       this.createDefaultEventHandler = this.createDefaultEventHandler.bind(this);
-      this.createClickEventHandler = this.createClickEventHandler.bind(this);
     }
 
     createDefaultEventHandler(cb) {
@@ -24,65 +20,11 @@ export default ExtendBase =>
       };
     }
 
-    createClickEventHandler(cb) {
-      return (e) => {
-        const {
-          row,
-          selected,
-          keyField,
-          selectable,
-          expandable,
-          rowIndex,
-          expanded,
-          expandRow,
-          selectRow,
-          cellEdit: {
-            mode,
-            DBCLICK_TO_CELL_EDIT,
-            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.mode !== Const.ROW_SELECT_DISABLED && selectable) {
-            selectRow.onRowSelect(key, !selected, rowIndex, e);
-          }
-        };
-
-        if (mode === DBCLICK_TO_CELL_EDIT && selectRow.clickToEdit) {
-          this.clickNum += 1;
-          _.debounce(() => {
-            if (this.clickNum === 1) {
-              clickFn();
-            }
-            this.clickNum = 0;
-          }, DELAY_FOR_DBCLICK)();
-        } else {
-          clickFn();
-        }
-      };
-    }
-
     delegate(attrs = {}) {
-      const newAttrs = {};
-      const { expandRow, selectRow } = this.props;
-      if (expandRow || (selectRow && selectRow.clickToSelect)) {
-        newAttrs.onClick = this.createClickEventHandler(attrs.onClick);
-      }
+      const newAttrs = { ...attrs };
       Object.keys(attrs).forEach((attr) => {
-        if (!newAttrs[attr]) {
-          if (events.includes(attr)) {
-            newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
-          } else {
-            newAttrs[attr] = attrs[attr];
-          }
+        if (events.includes(attr)) {
+          newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
         }
       });
       return newAttrs;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import ExpansionContext from '../contexts/row-expand-context';
+
+export default Component => () => (
+  <ExpansionContext.Consumer>
+    { expandRow => <Component { ...expandRow } /> }
+  </ExpansionContext.Consumer>
+);

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

@@ -3,11 +3,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
-export default class SelectionHeaderCell extends Component {
+export default class ExpansionHeaderCell extends Component {
   static propTypes = {
-    anyExpands: PropTypes.bool.isRequired,
+    isAnyExpands: PropTypes.bool.isRequired,
     onAllRowExpand: PropTypes.func.isRequired,
-    renderer: PropTypes.func
+    expandHeaderColumnRenderer: PropTypes.func
   }
 
   constructor() {
@@ -16,13 +16,13 @@ export default class SelectionHeaderCell extends Component {
   }
 
   handleCheckBoxClick(e) {
-    const { anyExpands, onAllRowExpand } = this.props;
+    const { isAnyExpands, onAllRowExpand } = this.props;
 
-    onAllRowExpand(e, !anyExpands);
+    onAllRowExpand(e, !isAnyExpands);
   }
 
   render() {
-    const { anyExpands, renderer } = this.props;
+    const { isAnyExpands, expandHeaderColumnRenderer } = this.props;
     const attrs = {
       onClick: this.handleCheckBoxClick
     };
@@ -30,9 +30,9 @@ export default class SelectionHeaderCell extends Component {
     return (
       <th data-row-selection { ...attrs }>
         {
-          renderer ?
-            renderer({ isAnyExpands: anyExpands }) :
-            (anyExpands ? '(-)' : '(+)')
+          expandHeaderColumnRenderer ?
+            expandHeaderColumnRenderer({ isAnyExpands }) :
+            (isAnyExpands ? '(-)' : '(+)')
         }
       </th>
     );

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

@@ -0,0 +1,34 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import ExpandRow from './expand-row';
+import ExpansionContext from '../contexts/row-expand-context';
+
+export default (Component, visibleColumnSize) => {
+  const renderWithExpansion = (props, expandRow) => {
+    const key = props.value;
+
+    const expanded = expandRow.expanded.includes(key);
+    const expandable = !expandRow.nonExpandable || !expandRow.nonExpandable.includes(key);
+
+    return [
+      <Component
+        { ...props }
+        key={ key }
+        expanded={ expanded }
+        expandable={ expandable }
+        expandRow={ { ...expandRow } }
+      />,
+      expanded ? <ExpandRow
+        key={ `${key}-expanding` }
+        colSpan={ visibleColumnSize }
+      >
+        { expandRow.renderer(props.row) }
+      </ExpandRow> : null
+    ];
+  };
+  return props => (
+    <ExpansionContext.Consumer>
+      { expandRow => renderWithExpansion(props, expandRow) }
+    </ExpansionContext.Consumer>
+  );
+};

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

@@ -0,0 +1,113 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/no-array-index-key: 0 */
+import React from 'react';
+
+import _ from './utils';
+import Cell from './cell';
+
+export default class RowContent extends React.Component {
+  // shouldComponentUpdate(nextProps) {
+  //   return this.shouldUpdatedByNormalProps(nextProps);
+  // }
+  shouldComponentUpdate(nextProps) {
+    if (typeof this.props.shouldUpdate !== 'undefined') {
+      if (nextProps.shouldUpdate === this.props.shouldUpdate) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  render() {
+    const {
+      row,
+      keyField,
+      columns,
+      rowIndex,
+      editable,
+      editingRowIdx,
+      editingColIdx,
+      onStart,
+      clickToEdit,
+      dbclickToEdit,
+      EditingCellComponent
+    } = this.props;
+
+    return columns.map((column, index) => {
+      if (!column.hidden) {
+        const { dataField } = column;
+        const content = _.get(row, dataField);
+        if (rowIndex === editingRowIdx && index === editingColIdx) {
+          return (
+            <EditingCellComponent
+              key={ `${content}-${index}-editing` }
+              row={ row }
+              rowIndex={ rowIndex }
+              column={ column }
+              columnIndex={ index }
+            />
+          );
+        }
+        // render cell
+        let cellTitle;
+        let cellStyle = {};
+        const cellAttrs = {
+          ..._.isFunction(column.attrs)
+            ? column.attrs(content, row, rowIndex, index)
+            : column.attrs,
+          ...column.events
+        };
+
+        const cellClasses = _.isFunction(column.classes)
+          ? column.classes(content, row, rowIndex, index)
+          : column.classes;
+
+        if (column.style) {
+          cellStyle = _.isFunction(column.style)
+            ? column.style(content, row, rowIndex, index)
+            : column.style;
+          cellStyle = Object.assign({}, cellStyle) || {};
+        }
+
+        if (column.title) {
+          cellTitle = _.isFunction(column.title)
+            ? column.title(content, row, rowIndex, index)
+            : content;
+          cellAttrs.title = cellTitle;
+        }
+
+        if (column.align) {
+          cellStyle.textAlign =
+            _.isFunction(column.align)
+              ? column.align(content, row, rowIndex, index)
+              : column.align;
+        }
+
+        if (cellClasses) cellAttrs.className = cellClasses;
+        if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+
+        let editableCell = _.isDefined(column.editable) ? column.editable : true;
+        if (column.dataField === keyField || !editable) editableCell = false;
+        if (_.isFunction(column.editable)) {
+          editableCell = column.editable(content, row, rowIndex, index);
+        }
+
+        return (
+          <Cell
+            key={ `${content}-${index}` }
+            row={ row }
+            editable={ editableCell }
+            rowIndex={ rowIndex }
+            columnIndex={ index }
+            column={ column }
+            onStart={ onStart }
+            clickToEdit={ clickToEdit }
+            dbclickToEdit={ dbclickToEdit }
+            { ...cellAttrs }
+          />
+        );
+      }
+      return false;
+    });
+  }
+}

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

@@ -0,0 +1,62 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import cs from 'classnames';
+import _ from '../utils';
+import SelectionContext from '../contexts/selection-context';
+
+export default (Component) => {
+  const renderWithSelection = (props, selectRow) => {
+    const key = props.value;
+    const selected = selectRow.selected.includes(key);
+    const selectable = !selectRow.nonSelectable || !selectRow.nonSelectable.includes(key);
+
+    let {
+      style,
+      className
+    } = props;
+
+    if (selected) {
+      const selectedStyle = _.isFunction(selectRow.style)
+        ? selectRow.style(props.row, props.rowIndex)
+        : selectRow.style;
+
+      const selectedClasses = _.isFunction(selectRow.classes)
+        ? selectRow.classes(props.row, props.rowIndex)
+        : selectRow.classes;
+
+      style = {
+        ...style,
+        ...selectedStyle
+      };
+      className = cs(className, selectedClasses) || undefined;
+
+      if (selectRow.bgColor) {
+        style = style || {};
+        style.backgroundColor = _.isFunction(selectRow.bgColor)
+          ? selectRow.bgColor(props.row, props.rowIndex)
+          : selectRow.bgColor;
+      }
+    }
+
+    return (
+      <Component
+        { ...props }
+        style={ style }
+        className={ className }
+        selectRow={ selectRow }
+        selected={ selected }
+        selectable={ selectable }
+      />
+    );
+  };
+  function withSelectionConsumer(props) {
+    return (
+      <SelectionContext.Consumer>
+        { selectRow => renderWithSelection(props, selectRow) }
+      </SelectionContext.Consumer>
+    );
+  }
+
+  withSelectionConsumer.displayName = 'WithSelectionConsumer';
+  return withSelectionConsumer;
+};

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

@@ -19,15 +19,19 @@ export default class SelectionCell extends Component {
     selectionRenderer: PropTypes.func
   }
 
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
   shouldComponentUpdate(nextProps) {
-    const { selected } = this.props;
+    const shouldUpdate =
+      this.props.selected !== nextProps.selected ||
+      this.props.rowKey !== nextProps.rowKey ||
+      this.props.rowIndex !== nextProps.rowIndex ||
+      this.props.disabled !== nextProps.disabled;
 
-    return nextProps.selected !== selected;
+    return shouldUpdate;
   }
 
   handleClick(e) {

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import SelectionContext from '../contexts/selection-context';
+
+export default Component => () => (
+  <SelectionContext.Consumer>
+    { selectRow => <Component { ...selectRow } /> }
+  </SelectionContext.Consumer>
+);

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

@@ -0,0 +1,31 @@
+/* eslint react/prop-types: 0 */
+import _ from './utils';
+
+export default ExtendBase =>
+  class RowShouldUpdater extends ExtendBase {
+    shouldUpdateByWhenEditing(nextProps) {
+      return (
+        nextProps.editingRowIdx === nextProps.rowIndex ||
+        (this.props.editingRowIdx === nextProps.rowIndex &&
+        nextProps.editingRowIdx === null)
+      );
+    }
+
+    shouldUpdatedBySelfProps(nextProps) {
+      return (
+        this.props.className !== nextProps.className ||
+        !_.isEqual(this.props.style, nextProps.style) ||
+        !_.isEqual(this.props.attrs, nextProps.attrs)
+      );
+    }
+
+    shouldUpdatedByNormalProps(nextProps) {
+      const shouldUpdate =
+        this.props.rowIndex !== nextProps.rowIndex ||
+        this.props.editable !== nextProps.editable ||
+        this.props.columns.length !== nextProps.columns.length ||
+        !_.isEqual(this.props.row, nextProps.row);
+
+      return shouldUpdate;
+    }
+  };

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

@@ -1,183 +0,0 @@
-/* eslint react/prop-types: 0 */
-/* eslint react/no-array-index-key: 0 */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import _ from './utils';
-import Cell from './cell';
-import SelectionCell from './row-selection/selection-cell';
-import ExpandCell from './row-expand/expand-cell';
-import eventDelegater from './row-event-delegater';
-import Const from './const';
-
-class Row extends eventDelegater(Component) {
-  render() {
-    const {
-      row,
-      columns,
-      keyField,
-      rowIndex,
-      className,
-      style,
-      attrs,
-      cellEdit,
-      selected,
-      selectRow,
-      expanded,
-      expandRow,
-      selectable,
-      editable: editableRow
-    } = this.props;
-
-    const {
-      mode,
-      onStart,
-      EditingCell,
-      ridx: editingRowIdx,
-      cidx: editingColIdx,
-      CLICK_TO_CELL_EDIT,
-      DBCLICK_TO_CELL_EDIT,
-      ...rest
-    } = cellEdit;
-
-    const key = _.get(row, keyField);
-    const { hideSelectColumn } = selectRow;
-    const { showExpandColumn } = expandRow || {};
-    const trAttrs = this.delegate(attrs);
-
-    return (
-      <tr style={ style } className={ className } { ...trAttrs }>
-        {
-          showExpandColumn ? (
-            <ExpandCell
-              { ...expandRow }
-              rowKey={ key }
-              rowIndex={ rowIndex }
-              expanded={ expanded }
-            />
-          ) : null
-        }
-        {
-          (selectRow.mode !== Const.ROW_SELECT_DISABLED && !hideSelectColumn)
-            ? (
-              <SelectionCell
-                { ...selectRow }
-                rowKey={ key }
-                rowIndex={ rowIndex }
-                selected={ selected }
-                disabled={ !selectable }
-              />
-            )
-            : null
-        }
-        {
-          columns.map((column, index) => {
-            if (!column.hidden) {
-              const { dataField } = column;
-              const content = _.get(row, dataField);
-              let editable = _.isDefined(column.editable) ? column.editable : true;
-              if (dataField === keyField || !editableRow) editable = false;
-              if (_.isFunction(column.editable)) {
-                editable = column.editable(content, row, rowIndex, index);
-              }
-              if (rowIndex === editingRowIdx && index === editingColIdx) {
-                let editCellstyle = column.editCellStyle || {};
-                let editCellclasses = column.editCellClasses;
-                if (_.isFunction(column.editCellStyle)) {
-                  editCellstyle = column.editCellStyle(content, row, rowIndex, index);
-                }
-                if (_.isFunction(column.editCellClasses)) {
-                  editCellclasses = column.editCellClasses(content, row, rowIndex, index);
-                }
-                return (
-                  <EditingCell
-                    key={ `${content}-${index}` }
-                    row={ row }
-                    rowIndex={ rowIndex }
-                    column={ column }
-                    columnIndex={ index }
-                    className={ editCellclasses }
-                    style={ editCellstyle }
-                    { ...rest }
-                  />
-                );
-              }
-              // render cell
-              let cellTitle;
-              let cellStyle = {};
-              const cellAttrs = {
-                ..._.isFunction(column.attrs)
-                  ? column.attrs(content, row, rowIndex, index)
-                  : column.attrs,
-                ...column.events
-              };
-
-              const cellClasses = _.isFunction(column.classes)
-                ? column.classes(content, row, rowIndex, index)
-                : column.classes;
-
-              if (column.style) {
-                cellStyle = _.isFunction(column.style)
-                  ? column.style(content, row, rowIndex, index)
-                  : column.style;
-                cellStyle = Object.assign({}, cellStyle) || {};
-              }
-
-
-              if (column.title) {
-                cellTitle = _.isFunction(column.title)
-                  ? column.title(content, row, rowIndex, index)
-                  : content;
-                cellAttrs.title = cellTitle;
-              }
-
-              if (column.align) {
-                cellStyle.textAlign =
-                  _.isFunction(column.align)
-                    ? column.align(content, row, rowIndex, index)
-                    : column.align;
-              }
-
-              if (cellClasses) cellAttrs.className = cellClasses;
-              if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
-
-              return (
-                <Cell
-                  key={ `${content}-${index}` }
-                  row={ row }
-                  rowIndex={ rowIndex }
-                  columnIndex={ index }
-                  column={ column }
-                  onStart={ onStart }
-                  editable={ editable }
-                  clickToEdit={ mode === CLICK_TO_CELL_EDIT }
-                  dbclickToEdit={ mode === DBCLICK_TO_CELL_EDIT }
-                  { ...cellAttrs }
-                />
-              );
-            }
-            return false;
-          })
-        }
-      </tr>
-    );
-  }
-}
-
-Row.propTypes = {
-  row: PropTypes.object.isRequired,
-  rowIndex: PropTypes.number.isRequired,
-  columns: PropTypes.array.isRequired,
-  style: PropTypes.object,
-  className: PropTypes.string,
-  attrs: PropTypes.object
-};
-
-Row.defaultProps = {
-  editable: true,
-  style: {},
-  className: null,
-  attrs: {}
-};
-
-export default Row;

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

@@ -0,0 +1,56 @@
+/* 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';
+
+class Row extends shouldRowUpdater(eventDelegater(Component)) {
+  constructor(props) {
+    super(props);
+    this.shouldUpdateRowContent = false;
+  }
+
+  shouldComponentUpdate(nextProps) {
+    this.shouldUpdateRowContent = this.shouldUpdatedByNormalProps(nextProps);
+    if (this.shouldUpdateRowContent) return true;
+
+    return this.shouldUpdatedBySelfProps(nextProps);
+  }
+
+  render() {
+    const {
+      className,
+      style,
+      attrs,
+      ...rest
+    } = this.props;
+    const trAttrs = this.delegate(attrs);
+
+    return (
+      <tr style={ style } className={ className } { ...trAttrs }>
+        <RowContent shouldUpdate={ this.shouldUpdateRowContent } { ...rest } />
+      </tr>
+    );
+  }
+}
+
+Row.propTypes = {
+  row: PropTypes.object.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  columns: PropTypes.array.isRequired,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  attrs: PropTypes.object
+};
+
+Row.defaultProps = {
+  editable: true,
+  style: {},
+  className: null,
+  attrs: {}
+};
+
+export default Row;

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

@@ -1,11 +1,15 @@
+import 'jsdom-global/register';
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import Body from '../src/body';
 import Row from '../src/row';
+import RowAggregator from '../src/row-aggregator';
 import Const from '../src/const';
 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';
 
 describe('Body', () => {
@@ -169,92 +173,6 @@ describe('Body', () => {
         });
       });
     });
-
-    describe('when selectRow.style is defined', () => {
-      const selectedRowKey = data[0][keyField];
-      const selectedRowKeys = [selectedRowKey];
-      const selectedStyle = { backgroundColor: 'green', fontWeight: 'bold' };
-      const selectRow = { mode: 'radio', style: selectedStyle };
-
-      beforeEach(() => {
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            keyField="id"
-            columns={ columns }
-            data={ data }
-            rowStyle={ rowStyle }
-            selectRow={ selectRow }
-            selectedRowKeys={ selectedRowKeys }
-          />);
-      });
-
-      it('should rendering selected Row component with mixing selectRow.style correctly', () => {
-        const selectedRow = wrapper.find(Row).get(0);
-        expect(JSON.stringify(selectedRow.props.style)).toBe(JSON.stringify({
-          ...rowStyle,
-          ...selectedStyle
-        }));
-      });
-
-      describe('and selectRow.bgColor is also defined', () => {
-        beforeEach(() => {
-          selectRow.bgColor = 'gray';
-          wrapper = shallow(
-            <Body
-              { ...mockBodyResolvedProps }
-              keyField="id"
-              columns={ columns }
-              data={ data }
-              rowStyle={ rowStyle }
-              selectRow={ selectRow }
-              selectedRowKeys={ selectedRowKeys }
-            />);
-        });
-
-        it('should rendering selected Row component with mixing selectRow.style correctly', () => {
-          const selectedRow = wrapper.find(Row).get(0);
-          expect(JSON.stringify(selectedRow.props.style)).toBe(JSON.stringify({
-            ...rowStyle,
-            ...selectedStyle,
-            backgroundColor: selectRow.bgColor
-          }));
-        });
-
-        it('should render selected Row component with correct style.backgroundColor', () => {
-          const selectedRow = wrapper.find(Row).get(0);
-          expect(selectedRow.props.style.backgroundColor).toEqual(selectRow.bgColor);
-        });
-      });
-    });
-
-    describe('when selectRow.bgColor is defined', () => {
-      const selectedRowKey = data[0][keyField];
-      const selectedRowKeys = [selectedRowKey];
-      const selectRow = { mode: 'radio', bgColor: 'gray' };
-
-      beforeEach(() => {
-        selectRow.bgColor = 'gray';
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            keyField="id"
-            columns={ columns }
-            data={ data }
-            rowStyle={ rowStyle }
-            selectRow={ selectRow }
-            selectedRowKeys={ selectedRowKeys }
-          />);
-      });
-
-      it('should rendering selected Row component with correct style', () => {
-        const selectedRow = wrapper.find(Row).get(0);
-        expect(JSON.stringify(selectedRow.props.style)).toBe(JSON.stringify({
-          ...rowStyle,
-          backgroundColor: selectRow.bgColor
-        }));
-      });
-    });
   });
 
   describe('when rowClasses prop is defined', () => {
@@ -310,31 +228,6 @@ describe('Body', () => {
         });
       });
     });
-
-    describe('when selectRow.classes is defined', () => {
-      const selectedRowKey = data[0][keyField];
-      const selectedRowKeys = [selectedRowKey];
-      const selectedClasses = 'selected-classes';
-      const selectRow = { mode: 'radio', classes: selectedClasses };
-
-      beforeEach(() => {
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            keyField="id"
-            columns={ columns }
-            data={ data }
-            rowClasses={ rowClasses }
-            selectRow={ selectRow }
-            selectedRowKeys={ selectedRowKeys }
-          />);
-      });
-
-      it('should rendering selected Row component with mixing selectRow.classes correctly', () => {
-        const selectedRow = wrapper.find(Row).get(0);
-        expect(selectedRow.props.className).toBe(`${rowClasses} ${selectedClasses}`);
-      });
-    });
   });
 
   describe('when rowEvents prop is defined', () => {
@@ -361,11 +254,15 @@ describe('Body', () => {
     });
   });
 
-  describe('when cellEdit.nonEditableRows props is defined', () => {
-    const nonEditableRows = [data[1].id];
+  describe('when cellEdit.createContext props is defined', () => {
+    const CellComponent = () => null;
+    const EditingCellComponent = () => null;
+    const RowComponent = props => <Row { ...props } />;
     const cellEdit = {
-      mode: Const.CLICK_TO_CELL_EDIT,
-      nonEditableRows
+      createContext: jest.fn(),
+      bindCellLevelCellEdit: jest.fn().mockReturnValue(CellComponent),
+      createEditingCell: jest.fn().mockReturnValue(EditingCellComponent),
+      bindRowLevelCellEdit: jest.fn().mockReturnValue(RowComponent)
     };
     beforeEach(() => {
       wrapper = shallow(
@@ -379,259 +276,84 @@ describe('Body', () => {
       );
     });
 
-    it('should render Row component with correct editable prop', () => {
+    it('should render Row Component correctly', () => {
       expect(wrapper.length).toBe(1);
-      const rows = wrapper.find(Row);
-      for (let i = 0; i < rows.length; i += 1) {
-        if (nonEditableRows.indexOf(rows.get(i).props.row[keyField]) > -1) {
-          expect(rows.get(i).props.editable).toBeFalsy();
-        } else {
-          expect(rows.get(i).props.editable).toBeTruthy();
-        }
-      }
+      expect(cellEdit.bindCellLevelCellEdit).toHaveBeenCalledTimes(1);
+      expect(cellEdit.createEditingCell).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();
     });
   });
 
-  describe('when selectRow.mode is checkbox or radio (row was selectable)', () => {
+  describe('when selectRow.mode is ROW_SELECT_DISABLED or expandRow.renderer is undefined', () => {
+    beforeEach(() => {
+      wrapper = shallow(
+        <Body
+          { ...mockBodyResolvedProps }
+          data={ data }
+          columns={ columns }
+          keyField={ keyField }
+        />
+      );
+    });
+
+    it('shouldn\'t render RowAggregator component', () => {
+      expect(wrapper.find(RowAggregator)).toHaveLength(0);
+    });
+  });
+
+  describe('when selectRow.mode is defined correctly', () => {
     const selectRow = { mode: 'checkbox' };
-    const selectedRowKey = data[0][keyField];
-    const selectedRowKeys = [selectedRowKey];
 
     beforeEach(() => {
-      wrapper = shallow(
-        <Body
-          { ...mockBodyResolvedProps }
-          data={ data }
-          columns={ columns }
-          keyField={ keyField }
-          selectedRowKeys={ selectedRowKeys }
-          selectRow={ selectRow }
-        />
+      wrapper = mount(
+        <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+          <Body
+            { ...mockBodyResolvedProps }
+            data={ data }
+            columns={ columns }
+            keyField={ keyField }
+            selectRow={ selectRow }
+          />
+        </SelectionContext.Provider>
       );
     });
 
-    it('should render Row component with correct selected prop', () => {
-      const rows = wrapper.find(Row);
-      for (let i = 0; i < rows.length; i += 1) {
-        const row = rows.get(i);
-        expect(row.props.selected).toBe(selectedRowKeys.indexOf(row.props.row[keyField]) > -1);
-      }
-    });
+    it('should render RowAggregator component correctly', () => {
+      const rowAggregator = wrapper.find(RowAggregator);
 
-    describe('if selectRow.style is defined as an object', () => {
-      const style = { backgroundColor: 'red' };
-
-      beforeEach(() => {
-        selectRow.style = style;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should render Row component with correct style prop', () => {
-        expect(JSON.stringify(wrapper.find(Row).get(0).props.style)).toBe(JSON.stringify(style));
-      });
-    });
-
-    describe('if selectRow.style is defined as a function', () => {
-      const style = { backgroundColor: 'red' };
-      const styleCallBack = sinon.stub().returns(style);
-
-      beforeEach(() => {
-        selectRow.style = styleCallBack;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should calling style callback correctly', () => {
-        expect(styleCallBack.callCount).toBe(1);
-        expect(styleCallBack.calledWith(data[0]), 1);
-      });
-
-      it('should render Row component with correct style prop', () => {
-        expect(JSON.stringify(wrapper.find(Row).get(0).props.style)).toBe(JSON.stringify(style));
-      });
-    });
-
-    describe('if selectRow.classes is defined as a string', () => {
-      const className = 'custom-class';
-
-      beforeEach(() => {
-        selectRow.classes = className;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should render Row component with correct className prop', () => {
-        expect(wrapper.find(Row).get(0).props.className).toEqual(className);
-      });
-    });
-
-    describe('if selectRow.classes is defined as a function', () => {
-      const className = 'custom-class';
-      const classesCallBack = sinon.stub().returns(className);
-
-      beforeEach(() => {
-        selectRow.classes = classesCallBack;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should calling style callback correctly', () => {
-        expect(classesCallBack.callCount).toBe(1);
-        expect(classesCallBack.calledWith(data[0]), 1);
-      });
-
-      it('should render Row component with correct style prop', () => {
-        expect(wrapper.find(Row).get(0).props.className).toEqual(className);
-      });
-    });
-
-    describe('if selectRow.bgColor is defined as a string', () => {
-      const bgColor = 'red';
-
-      beforeEach(() => {
-        selectRow.bgColor = bgColor;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should render Row component with correct style.backgroundColor prop', () => {
-        expect(wrapper.find(Row).get(0).props.style).toEqual({ backgroundColor: bgColor });
-      });
-    });
-
-    describe('if selectRow.bgColor is defined as a string', () => {
-      const bgColor = 'red';
-      const bgColorCallBack = sinon.stub().returns(bgColor);
-
-      beforeEach(() => {
-        selectRow.bgColor = bgColorCallBack;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should calling selectRow.bgColor callback correctly', () => {
-        expect(bgColorCallBack.calledOnce).toBeTruthy();
-        expect(bgColorCallBack.calledWith(data[0]), 1).toBeTruthy();
-      });
-
-      it('should render Row component with correct style.backgroundColor prop', () => {
-        expect(wrapper.find(Row).get(0).props.style).toEqual({ backgroundColor: bgColor });
-      });
-    });
-
-    describe('if selectRow.bgColor defined and selectRow.style.backgroundColor defined', () => {
-      const bgColor = 'yellow';
-      const style = { backgroundColor: 'red' };
-
-      beforeEach(() => {
-        selectRow.style = style;
-        selectRow.bgColor = bgColor;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should take selectRow.bgColor as higher priority', () => {
-        expect(wrapper.find(Row).get(0).props.style.backgroundColor).toBe(bgColor);
-      });
-    });
-
-    describe('if selectRow.nonSelectable is defined', () => {
-      const nonSelectableRowIndex = 1;
-      const nonSelectable = [data[nonSelectableRowIndex][keyField]];
-
-      beforeEach(() => {
-        selectRow.nonSelectable = nonSelectable;
-        wrapper = shallow(
-          <Body
-            { ...mockBodyResolvedProps }
-            data={ data }
-            columns={ columns }
-            keyField={ keyField }
-            selectedRowKeys={ selectedRowKeys }
-            selectRow={ selectRow }
-          />
-        );
-      });
-
-      it('should render Row component with correct selectable prop', () => {
-        expect(wrapper.find(Row).get(0).props.selectable).toBeTruthy();
-        expect(wrapper.find(Row).get(nonSelectableRowIndex).props.selectable).toBeFalsy();
-      });
+      expect(rowAggregator.get(0).props.selectRow.mode)
+        .not.toEqual(Const.ROW_SELECT_DISABLED);
+      expect(rowAggregator.get(0).props.selected).toBeDefined();
+      expect(rowAggregator.get(0).props.selectable).toBeDefined();
     });
   });
 
-  describe('when selectRow.mode is ROW_SELECT_DISABLED (row was un-selectable)', () => {
+  describe('when expandRow.renderer is defined correctly', () => {
+    const expandRow = { renderer: jest.fn() };
+
     beforeEach(() => {
-      wrapper = shallow(
-        <Body
-          { ...mockBodyResolvedProps }
-          data={ data }
-          columns={ columns }
-          keyField={ keyField }
-          selectedRowKeys={ [] }
-        />
+      wrapper = mount(
+        <ExpansionContext.Provider data={ data } keyField={ keyField } expandRow={ expandRow }>
+          <Body
+            { ...mockBodyResolvedProps }
+            data={ data }
+            columns={ columns }
+            keyField={ keyField }
+            expandRow={ expandRow }
+          />
+        </ExpansionContext.Provider>
       );
     });
 
-    it('prop selected should be null', () => {
-      expect(wrapper.find(Row).get(0).props.selected).toBeNull();
+    it('should render RowAggregator component correctly', () => {
+      const rowAggregator = wrapper.find(RowAggregator);
+      expect(rowAggregator.get(0).props.expandRow.renderer).toEqual(expandRow.renderer);
+      expect(rowAggregator.get(0).props.expanded).toBeDefined();
+      expect(rowAggregator.get(0).props.expandable).toBeDefined();
     });
   });
 });

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

@@ -177,22 +177,45 @@ describe('Cell', () => {
     let props;
     let nextProps;
 
-    describe('when content is change', () => {
-      const column = { dataField: 'name', text: 'Product Name' };
-      beforeEach(() => {
-        props = {
-          row,
-          columnIndex: 1,
-          rowIndex: 1,
-          column
-        };
-        wrapper = shallow(
-          <Cell { ...props } />);
-      });
+    describe('if column.isDummyField is false', () => {
+      describe('when content is change', () => {
+        const column = { dataField: 'name', text: 'Product Name' };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
 
-      it('should return true', () => {
-        nextProps = { ...props, row: { id: 1, name: 'CDE' } };
-        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        it('should return true', () => {
+          nextProps = { ...props, row: { id: 1, name: 'CDE' } };
+          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 };
+        beforeEach(() => {
+          props = {
+            row,
+            columnIndex: 1,
+            rowIndex: 1,
+            column
+          };
+          wrapper = shallow(
+            <Cell { ...props } />);
+        });
+
+        it('should return true', () => {
+          nextProps = { ...props, row: { id: 1, name: 'CDE', test: 'This is new Field' } };
+          expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+        });
       });
     });
 

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

@@ -111,7 +111,10 @@ describe('Context', () => {
         createContext: jest.fn().mockReturnValue({
           Provider: CellEditContext.Provider,
           Consumer: CellEditContext.Consumer
-        })
+        }),
+        bindCellLevelCellEdit: jest.fn().mockReturnValue(() => null),
+        createEditingCell: jest.fn().mockReturnValue(() => null),
+        bindRowLevelCellEdit: jest.fn().mockReturnValue(() => null)
       };
       wrapper = shallow(
         <BootstrapTable

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

@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 
 import dataOperator from '../../src/store/operators';
 import BootstrapTable from '../../src/bootstrap-table';
-import createSelectionContext from '../../src/contexts/selection-context';
+import SelectionContext from '../../src/contexts/selection-context';
 
 describe('DataContext', () => {
   let wrapper;
@@ -42,7 +42,6 @@ describe('DataContext', () => {
   const defaultSelectRow = {
     mode: 'checkbox'
   };
-  const SelectionContext = createSelectionContext(dataOperator);
 
   function shallowContext(selectRow = defaultSelectRow) {
     return (
@@ -81,9 +80,13 @@ describe('DataContext', () => {
     it('should pass correct sort props to children element', () => {
       expect(wrapper.length).toBe(1);
       expect(mockBase).toHaveBeenCalledWith({
+        ...defaultSelectRow,
         selected: wrapper.state().selected,
         onRowSelect: wrapper.instance().handleRowSelect,
-        onAllRowsSelect: wrapper.instance().handleAllRowsSelect
+        onAllRowsSelect: wrapper.instance().handleAllRowsSelect,
+        allRowsNotSelected: true,
+        allRowsSelected: false,
+        checkedStatus: 'unchecked'
       });
     });
   });

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

@@ -1,8 +1,12 @@
+import 'jsdom-global/register';
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import HeaderCell from '../src/header-cell';
-import SelectionHeaderCell from '../src//row-selection/selection-header-cell';
+import SelectionHeaderCell from '../src/row-selection/selection-header-cell';
+import ExpandHeaderCell from '../src/row-expand/expand-header-cell';
+import SelectionContext from '../src/contexts/selection-context';
+import ExpansionContext from '../src/contexts/row-expand-context';
 import Header from '../src/header';
 import Const from '../src/const';
 import mockHeaderResolvedProps from './test-helpers/mock/header-resolved-props';
@@ -17,6 +21,16 @@ describe('Header', () => {
     text: 'Name'
   }];
 
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }];
+
+  const keyField = 'id';
+
   describe('simplest header', () => {
     beforeEach(() => {
       wrapper = shallow(<Header { ...mockHeaderResolvedProps } columns={ columns } />);
@@ -89,12 +103,18 @@ describe('Header', () => {
     describe('when selectRow.mode is radio (single selection)', () => {
       beforeEach(() => {
         const selectRow = { mode: 'radio' };
-        wrapper = shallow(
-          <Header
-            { ...mockHeaderResolvedProps }
-            columns={ columns }
+        wrapper = mount(
+          <SelectionContext.Provider
+            data={ data }
+            keyField={ keyField }
             selectRow={ selectRow }
-          />
+          >
+            <Header
+              { ...mockHeaderResolvedProps }
+              columns={ columns }
+              selectRow={ selectRow }
+            />
+          </SelectionContext.Provider>
         );
       });
 
@@ -105,12 +125,18 @@ describe('Header', () => {
       describe('when selectRow.hideSelectColumn is true', () => {
         beforeEach(() => {
           const selectRow = { mode: 'radio', hideSelectColumn: true };
-          wrapper = shallow(
-            <Header
-              { ...mockHeaderResolvedProps }
-              columns={ columns }
+          wrapper = mount(
+            <SelectionContext.Provider
+              data={ data }
+              keyField={ keyField }
               selectRow={ selectRow }
-            />
+            >
+              <Header
+                { ...mockHeaderResolvedProps }
+                columns={ columns }
+                selectRow={ selectRow }
+              />
+            </SelectionContext.Provider>
           );
         });
 
@@ -146,12 +172,18 @@ describe('Header', () => {
     describe('when selectRow.mode is checkbox (multiple selection)', () => {
       beforeEach(() => {
         const selectRow = { mode: 'checkbox' };
-        wrapper = shallow(
-          <Header
-            { ...mockHeaderResolvedProps }
-            columns={ columns }
+        wrapper = mount(
+          <SelectionContext.Provider
+            data={ data }
+            keyField={ keyField }
             selectRow={ selectRow }
-          />
+          >
+            <Header
+              { ...mockHeaderResolvedProps }
+              columns={ columns }
+              selectRow={ selectRow }
+            />
+          </SelectionContext.Provider>
         );
       });
 
@@ -162,12 +194,18 @@ describe('Header', () => {
       describe('when selectRow.hideSelectColumn is true', () => {
         beforeEach(() => {
           const selectRow = { mode: 'checkbox', hideSelectColumn: true };
-          wrapper = shallow(
-            <Header
-              { ...mockHeaderResolvedProps }
-              columns={ columns }
+          wrapper = mount(
+            <SelectionContext.Provider
+              data={ data }
+              keyField={ keyField }
               selectRow={ selectRow }
-            />
+            >
+              <Header
+                { ...mockHeaderResolvedProps }
+                columns={ columns }
+                selectRow={ selectRow }
+              />
+            </SelectionContext.Provider>
           );
         });
 
@@ -177,4 +215,44 @@ describe('Header', () => {
       });
     });
   });
+
+  describe('expandRow', () => {
+    describe('when expandRow.showExpandColumn is false', () => {
+      beforeEach(() => {
+        wrapper = shallow(
+          <Header
+            { ...mockHeaderResolvedProps }
+            columns={ columns }
+          />
+        );
+      });
+
+      it('should not render <ExpandHeaderCell />', () => {
+        expect(wrapper.find(ExpandHeaderCell).length).toBe(0);
+      });
+    });
+
+    describe('when expandRow.showExpandColumn is true', () => {
+      beforeEach(() => {
+        const expandRow = { renderer: jest.fn(), expanded: [], showExpandColumn: true };
+        wrapper = mount(
+          <ExpansionContext.Provider
+            data={ data }
+            keyField={ keyField }
+            expandRow={ expandRow }
+          >
+            <Header
+              { ...mockHeaderResolvedProps }
+              columns={ columns }
+              expandRow={ expandRow }
+            />
+          </ExpansionContext.Provider>
+        );
+      });
+
+      it('should render <ExpandHeaderCell /> correctly', () => {
+        expect(wrapper.find(ExpandHeaderCell).length).toBe(1);
+      });
+    });
+  });
 });

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

@@ -1,10 +1,8 @@
 import React, { Component } from 'react';
-import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
 import { extendTo } from '../test-helpers/mock-component';
 import baseResolver from '../../src/props-resolver/index';
-import Const from '../../src/const';
 
 describe('TableResolver', () => {
   const keyField = 'id';
@@ -71,231 +69,4 @@ describe('TableResolver', () => {
       });
     });
   });
-
-  describe('resolveSelectRowProps', () => {
-    let cellSelectionInfo;
-    let selectRow;
-
-    describe('if selectRow was not defined', () => {
-      beforeEach(() => {
-        const mockElement = React.createElement(BootstrapTableMock, {
-          data, keyField, columns
-        }, null);
-        wrapper = shallow(mockElement);
-        cellSelectionInfo = wrapper.instance().resolveSelectRowProps();
-      });
-
-      it('should return object', () => {
-        expect(cellSelectionInfo).toBeDefined();
-        expect(cellSelectionInfo.constructor).toEqual(Object);
-      });
-
-      it('should contain mode in ROW_SELECT_DISABLED', () => {
-        expect(cellSelectionInfo.mode).toEqual(Const.ROW_SELECT_DISABLED);
-      });
-    });
-
-    describe('if selectRow was defined', () => {
-      describe('when mode was defined', () => {
-        it('should return object which contains ROW_SELECT_SINGLE if mode is radio', () => {
-          selectRow = { mode: 'radio' };
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectRow
-          }, null);
-          wrapper = shallow(mockElement);
-          cellSelectionInfo = wrapper.instance().resolveSelectRowProps();
-
-          expect(cellSelectionInfo).toBeDefined();
-          expect(cellSelectionInfo.constructor).toEqual(Object);
-          expect(cellSelectionInfo.mode).toEqual(Const.ROW_SELECT_SINGLE);
-        });
-
-        it('should return object which contains ROW_SELECT_MULTIPLE if mode is checkbox', () => {
-          selectRow = { mode: 'checkbox' };
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectRow
-          }, null);
-          wrapper = shallow(mockElement);
-          cellSelectionInfo = wrapper.instance().resolveSelectRowProps();
-
-          expect(cellSelectionInfo).toBeDefined();
-          expect(cellSelectionInfo.constructor).toEqual(Object);
-          expect(cellSelectionInfo.mode).toEqual(Const.ROW_SELECT_MULTIPLE);
-        });
-      });
-
-      describe('when options were given', () => {
-        beforeEach(() => {
-          selectRow = {};
-          const mockOptions = {
-            foo: 'test',
-            bar: sinon.stub()
-          };
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectRow
-          }, null);
-          wrapper = shallow(mockElement);
-          cellSelectionInfo = wrapper.instance().resolveSelectRowProps(mockOptions);
-        });
-
-        it('should return object which contain options', () => {
-          expect(cellSelectionInfo).toEqual(expect.objectContaining({
-            foo: 'test',
-            bar: expect.any(Function)
-          }));
-        });
-      });
-    });
-  });
-
-  describe('resolveSelectRowPropsForHeader', () => {
-    let headerCellSelectionInfo;
-    let selectRow;
-
-    beforeEach(() => {
-      const mockElement = React.createElement(BootstrapTableMock, {
-        data, keyField, columns
-      }, null);
-      wrapper = shallow(mockElement);
-      headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader();
-    });
-
-    describe('if selectRow was not defined', () => {
-      it('should return object', () => {
-        expect(headerCellSelectionInfo).toBeDefined();
-        expect(headerCellSelectionInfo.constructor).toEqual(Object);
-      });
-
-      it('should contain mode in ROW_SELECT_DISABLED', () => {
-        expect(headerCellSelectionInfo.mode).toEqual(Const.ROW_SELECT_DISABLED);
-      });
-    });
-
-    describe('if selectRow was defined', () => {
-      describe('when mode was defined', () => {
-        it('should return object which contains ROW_SELECT_SINGLE if mode is radio', () => {
-          selectRow = { mode: 'radio' };
-          const selectedRowKeys = [];
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectedRowKeys, selectRow
-          }, null);
-          wrapper = shallow(mockElement);
-          headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader();
-
-          expect(headerCellSelectionInfo).toBeDefined();
-          expect(headerCellSelectionInfo.constructor).toEqual(Object);
-          expect(headerCellSelectionInfo.mode).toEqual(Const.ROW_SELECT_SINGLE);
-        });
-
-        it('should return object which contains ROW_SELECT_MULTIPLE if mode is checkbox', () => {
-          selectRow = { mode: 'checkbox' };
-          const selectedRowKeys = [];
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectedRowKeys, selectRow
-          }, null);
-          wrapper = shallow(mockElement);
-          headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader();
-
-          expect(headerCellSelectionInfo).toBeDefined();
-          expect(headerCellSelectionInfo.constructor).toEqual(Object);
-          expect(headerCellSelectionInfo.mode).toEqual(Const.ROW_SELECT_MULTIPLE);
-        });
-      });
-
-      describe('when options were given', () => {
-        beforeEach(() => {
-          selectRow = {};
-          const mockOptions = {
-            foo: 'test',
-            bar: sinon.stub(),
-            allRowsSelected: false,
-            selected: []
-          };
-          const selectedRowKeys = [];
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectedRowKeys, selectRow
-          }, null);
-          wrapper = shallow(mockElement);
-          headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader(mockOptions);
-        });
-
-        it('should return object which contain specified options', () => {
-          expect(headerCellSelectionInfo).toEqual(expect.objectContaining({
-            foo: 'test',
-            bar: expect.any(Function)
-          }));
-        });
-      });
-
-      describe('if options.allRowsSelected is true', () => {
-        beforeEach(() => {
-          selectRow = {};
-          const selectedRowKeys = [1, 2];
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectRow
-          }, null);
-
-          wrapper = shallow(mockElement);
-
-          headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader({
-            allRowsSelected: true,
-            selected: selectedRowKeys
-          });
-        });
-
-        it('should return checkedStatus which eqauls to checked', () => {
-          expect(headerCellSelectionInfo).toEqual(expect.objectContaining({
-            checkedStatus: Const.CHECKBOX_STATUS_CHECKED
-          }));
-        });
-      });
-
-      describe('if options.allRowsSelected and options.allRowsNotSelected both are false', () => {
-        beforeEach(() => {
-          selectRow = {};
-          const selectedRowKeys = [1];
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectRow
-          }, null);
-
-          wrapper = shallow(mockElement);
-          headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader({
-            allRowsSelected: false,
-            allRowsNotSelected: false,
-            selected: selectedRowKeys
-          });
-        });
-
-        it('should return checkedStatus which eqauls to indeterminate', () => {
-          expect(headerCellSelectionInfo).toEqual(expect.objectContaining({
-            checkedStatus: Const.CHECKBOX_STATUS_INDETERMINATE
-          }));
-        });
-      });
-
-      describe('if options.allRowsNotSelected is true', () => {
-        beforeEach(() => {
-          selectRow = {};
-          const selectedRowKeys = [];
-          const mockElement = React.createElement(BootstrapTableMock, {
-            data, keyField, columns, selectRow
-          }, null);
-
-          wrapper = shallow(mockElement);
-
-          headerCellSelectionInfo = wrapper.instance().resolveSelectRowPropsForHeader({
-            allRowsSelected: false,
-            allRowsNotSelected: true,
-            selected: selectedRowKeys
-          });
-        });
-
-        it('should return checkedStatus which eqauls to unchecked', () => {
-          expect(headerCellSelectionInfo).toEqual(expect.objectContaining({
-            checkedStatus: Const.CHECKBOX_STATUS_UNCHECKED
-          }));
-        });
-      });
-    });
-  });
 });

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

@@ -0,0 +1,296 @@
+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-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;
+  let rowAggregator;
+  const RowAggregatorWithSelection = bindSelection(RowAggregator);
+  const RowAggregatorWithExpansion = bindExpansion(RowAggregator);
+
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }, {
+    id: 3,
+    name: 'C'
+  }];
+  const columns = [{
+    dataField: 'id',
+    text: 'ID'
+  }, {
+    dataField: 'name',
+    text: 'Name'
+  }];
+  const rowIndex = 1;
+  const row = data[rowIndex];
+  const keyField = 'id';
+
+  const getBaseProps = () => ({
+    row,
+    value: row[keyField],
+    columns,
+    keyField,
+    rowIndex,
+    ...mockBodyResolvedProps
+  });
+
+  describe('when selectRow is enable', () => {
+    describe('if props.selectRow.hideSelectColumn is false', () => {
+      beforeEach(() => {
+        const selectRow = { mode: 'radio' };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <RowAggregatorWithSelection { ...getBaseProps() } />
+          </SelectionContext.Provider>
+        );
+      });
+
+      it('should render RowAggregator correctly', () => {
+        rowAggregator = wrapper.find(RowAggregator);
+        expect(rowAggregator).toHaveLength(1);
+      });
+
+      it('should render selection column correctly', () => {
+        const selectionCell = wrapper.find(SelectionCell);
+        expect(selectionCell).toHaveLength(1);
+        expect(selectionCell.props().selected).toEqual(rowAggregator.props().selected);
+        expect(selectionCell.props().disabled).toEqual(!rowAggregator.props().selectable);
+      });
+    });
+
+    describe('if props.selectRow.hideSelectColumn is true', () => {
+      beforeEach(() => {
+        const selectRow = { mode: 'radio', hideSelectColumn: true };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <RowAggregatorWithSelection { ...getBaseProps() } />
+          </SelectionContext.Provider>
+        );
+      });
+
+      it('should render RowAggregator correctly', () => {
+        rowAggregator = wrapper.find(RowAggregator);
+        expect(rowAggregator).toHaveLength(1);
+      });
+
+      it('should not render selection column', () => {
+        const selectionCell = wrapper.find(SelectionCell);
+        expect(selectionCell).toHaveLength(0);
+      });
+    });
+
+    describe('if props.selectRow.clickToSelect is defined', () => {
+      beforeEach(() => {
+        const selectRow = { mode: 'radio', clickToSelect: true };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <RowAggregatorWithSelection { ...getBaseProps() } />
+          </SelectionContext.Provider>
+        );
+      });
+
+      it('should render RowAggregator correctly', () => {
+        rowAggregator = wrapper.find(RowAggregator);
+        expect(rowAggregator).toHaveLength(1);
+      });
+
+      it('should add onClick prop to Row Component', () => {
+        const rowComp = wrapper.find(Row);
+        expect(rowComp).toHaveLength(1);
+        expect(rowComp.props().attrs.onClick).toBeDefined();
+      });
+    });
+  });
+
+  describe('when expandRow is enable', () => {
+    describe('if props.expandRow.showExpandColumn is false', () => {
+      beforeEach(() => {
+        const expandRow = { renderer: jest.fn() };
+        wrapper = mount(
+          <ExpansionContext.Provider data={ data } keyField={ keyField } expandRow={ expandRow }>
+            <RowAggregatorWithExpansion { ...getBaseProps() } />
+          </ExpansionContext.Provider>
+        );
+      });
+
+      it('should render RowAggregator correctly', () => {
+        rowAggregator = wrapper.find(RowAggregator);
+        expect(rowAggregator).toHaveLength(1);
+      });
+
+      it('should not render expansion column', () => {
+        const expandCell = wrapper.find(ExpandCell);
+        expect(expandCell).toHaveLength(0);
+      });
+    });
+
+    describe('if props.expandRow.showExpandColumn is true', () => {
+      beforeEach(() => {
+        const expandRow = { renderer: jest.fn(), showExpandColumn: true };
+        wrapper = mount(
+          <ExpansionContext.Provider data={ data } keyField={ keyField } expandRow={ expandRow }>
+            <RowAggregatorWithExpansion { ...getBaseProps() } />
+          </ExpansionContext.Provider>
+        );
+      });
+
+      it('should render RowAggregator correctly', () => {
+        rowAggregator = wrapper.find(RowAggregator);
+        expect(rowAggregator).toHaveLength(1);
+      });
+
+      it('should render expansion column correctly', () => {
+        const expandCell = wrapper.find(ExpandCell);
+        expect(expandCell).toHaveLength(1);
+        expect(expandCell.props().expanded).toEqual(rowAggregator.props().expanded);
+      });
+    });
+  });
+
+  describe('createClickEventHandler', () => {
+    describe('if props.attrs.onClick is defined', () => {
+      const attrs = { onClick: jest.fn() };
+
+      beforeEach(() => {
+        const selectRow = { mode: 'radio' };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <RowAggregatorWithSelection { ...getBaseProps() } attrs={ attrs } />
+          </SelectionContext.Provider>
+        );
+        wrapper.find('tr').simulate('click');
+      });
+
+      it('should call attrs.onClick correctly', () => {
+        expect(attrs.onClick).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if props.selectRow.clickToSelect is true', () => {
+      const selectRow = { mode: 'radio', clickToSelect: true };
+      beforeEach(() => {
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <RowAggregatorWithSelection { ...getBaseProps() } />
+          </SelectionContext.Provider>
+        );
+        wrapper.find(RowAggregator).props().selectRow.onRowSelect = jest.fn();
+        wrapper.find('tr').simulate('click');
+      });
+
+      it('should call selectRow.onRowSelect correctly', () => {
+        expect(wrapper.find(RowAggregator).props().selectRow.onRowSelect).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if props.selectRow.clickToSelect is true', () => {
+      describe('but selectable props is false', () => {
+        const selectRow = { mode: 'radio', clickToSelect: true, nonSelectable: [row[keyField]] };
+        beforeEach(() => {
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <RowAggregatorWithSelection { ...getBaseProps() } />
+            </SelectionContext.Provider>
+          );
+          wrapper.find(RowAggregator).props().selectRow.onRowSelect = jest.fn();
+          wrapper.find('tr').simulate('click');
+        });
+
+        it('should call selectRow.onRowSelect correctly', () => {
+          expect(wrapper.find(RowAggregator).props().selectRow.onRowSelect)
+            .toHaveBeenCalledTimes(0);
+        });
+      });
+    });
+
+    describe('if props.expandRow.renderer is defined', () => {
+      describe('but expandable props is false', () => {
+        const expandRow = { renderer: jest.fn(), nonExpandable: [row[keyField]] };
+        beforeEach(() => {
+          wrapper = mount(
+            <ExpansionContext.Provider data={ data } keyField={ keyField } expandRow={ expandRow }>
+              <RowAggregatorWithExpansion { ...getBaseProps() } />
+            </ExpansionContext.Provider>
+          );
+          wrapper.find(RowAggregator).props().expandRow.onRowExpand = jest.fn();
+          wrapper.find('tr').simulate('click');
+        });
+
+        it('should call expandRow.onRowExpand correctly', () => {
+          expect(wrapper.find(RowAggregator).props().expandRow.onRowExpand)
+            .toHaveBeenCalledTimes(0);
+        });
+      });
+    });
+
+    describe('if props.expandRow.renderer is defined', () => {
+      const expandRow = { renderer: jest.fn() };
+      beforeEach(() => {
+        wrapper = mount(
+          <ExpansionContext.Provider data={ data } keyField={ keyField } expandRow={ expandRow }>
+            <RowAggregatorWithExpansion { ...getBaseProps() } />
+          </ExpansionContext.Provider>
+        );
+        wrapper.find(RowAggregator).props().expandRow.onRowExpand = jest.fn();
+        wrapper.find('tr').simulate('click');
+      });
+
+      it('should call expandRow.onRowExpand correctly', () => {
+        expect(wrapper.find(RowAggregator).props().expandRow.onRowExpand).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if props.attrs.onClick and props.expandRow.renderer both are defined', () => {
+      const attrs = { onClick: jest.fn() };
+      const expandRow = { renderer: jest.fn() };
+
+      beforeEach(() => {
+        wrapper = mount(
+          <ExpansionContext.Provider data={ data } keyField={ keyField } expandRow={ expandRow }>
+            <RowAggregatorWithExpansion { ...getBaseProps() } attrs={ attrs } />
+          </ExpansionContext.Provider>
+        );
+        wrapper.find(RowAggregator).props().expandRow.onRowExpand = jest.fn();
+        wrapper.find('tr').simulate('click');
+      });
+
+      it('should call attrs.onClick and expandRow.onRowExpand correctly', () => {
+        expect(attrs.onClick).toHaveBeenCalledTimes(1);
+        expect(wrapper.find(RowAggregator).props().expandRow.onRowExpand).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('if props.attrs.onClick and props.selectRow.clickToSelect both are defined', () => {
+      const attrs = { onClick: jest.fn() };
+      const selectRow = { mode: 'radio', clickToSelect: true };
+
+      beforeEach(() => {
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <RowAggregatorWithSelection { ...getBaseProps() } attrs={ attrs } />
+          </SelectionContext.Provider>
+        );
+        wrapper.find(RowAggregator).props().selectRow.onRowSelect = jest.fn();
+        wrapper.find('tr').simulate('click');
+      });
+
+      it('should call attrs.onClick and selectRow.onRowSelect correctly', () => {
+        expect(attrs.onClick).toHaveBeenCalledTimes(1);
+        expect(wrapper.find(RowAggregator).props().selectRow.onRowSelect).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,414 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { mount } from 'enzyme';
+
+import SelectionContext from '../../src/contexts/selection-context';
+import bindSelection from '../../src/row-selection/row-binder';
+
+describe('Selection Row Binder', () => {
+  let wrapper;
+  let selectRow;
+  const BaseComponent = () => null;
+  const WithSelectionComponent = bindSelection(props => <BaseComponent { ...props } />);
+
+  const data = [{
+    id: 1,
+    name: 'A'
+  }, {
+    id: 2,
+    name: 'B'
+  }, {
+    id: 3,
+    name: 'C'
+  }];
+  const rowIndex = 1;
+  const row = data[rowIndex];
+  const keyField = 'id';
+  const value = row[keyField];
+
+  describe('if current row is selected', () => {
+    beforeEach(() => {
+      selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]] };
+      wrapper = mount(
+        <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
+        </SelectionContext.Provider>
+      );
+    });
+
+    it('should inject selected prop as true to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('selected')).toBeTruthy();
+    });
+  });
+
+  describe('if current row is not selected', () => {
+    beforeEach(() => {
+      selectRow = { mode: 'checkbox', selected: [] };
+      wrapper = mount(
+        <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
+        </SelectionContext.Provider>
+      );
+    });
+
+    it('should inject selected prop as false to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('selected')).toBeFalsy();
+    });
+  });
+
+  describe('if current row is selectable', () => {
+    beforeEach(() => {
+      selectRow = { mode: 'checkbox', nonSelectable: [] };
+      wrapper = mount(
+        <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
+        </SelectionContext.Provider>
+      );
+    });
+
+    it('should inject selectable prop as true to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('selectable')).toBeTruthy();
+    });
+  });
+
+  describe('if current row is non selectable', () => {
+    beforeEach(() => {
+      selectRow = { mode: 'checkbox', nonSelectable: [data[rowIndex][keyField]] };
+      wrapper = mount(
+        <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
+        </SelectionContext.Provider>
+      );
+    });
+
+    it('should inject selectable prop as false to target component', () => {
+      expect(wrapper.find(BaseComponent)).toHaveLength(1);
+      expect(wrapper.find(BaseComponent).prop('selectable')).toBeFalsy();
+    });
+  });
+
+  describe('if current row is selected', () => {
+    const selectedStyle = { backgroundColor: 'green', fontWeight: 'bold' };
+    describe('when selectRow.style is defined as an object', () => {
+      beforeEach(() => {
+        selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], style: selectedStyle };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
+          </SelectionContext.Provider>
+        );
+      });
+
+      it('should inject style prop correctly', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('style')).toEqual(selectedStyle);
+      });
+
+      describe('and props.style is also defined', () => {
+        const componentStype = { fontSize: '16px' };
+        beforeEach(() => {
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+                style={ componentStype }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop correctly', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('style')).toEqual({
+            ...selectedStyle,
+            ...componentStype
+          });
+        });
+      });
+
+      describe('and selectRow.bgColor is also defined as an object', () => {
+        beforeEach(() => {
+          selectRow.bgColor = 'gray';
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop with correct backgroundColor', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('style')).toEqual({
+            ...selectedStyle,
+            backgroundColor: selectRow.bgColor
+          });
+        });
+      });
+
+      describe('and selectRow.bgColor is also defined as a function', () => {
+        const color = 'gray';
+        beforeEach(() => {
+          selectRow.bgColor = jest.fn().mockReturnValue(color);
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop with correct backgroundColor', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('style')).toEqual({
+            ...selectedStyle,
+            backgroundColor: color
+          });
+        });
+
+        it('should call selectRow.bgColor function correctly', () => {
+          expect(selectRow.bgColor).toHaveBeenCalledTimes(1);
+          expect(selectRow.bgColor).toHaveBeenCalledWith(row, rowIndex);
+        });
+      });
+    });
+
+    describe('when selectRow.style is defined as a function', () => {
+      beforeEach(() => {
+        selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], style: jest.fn().mockReturnValue(selectedStyle) };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
+          </SelectionContext.Provider>
+        );
+      });
+
+      it('should inject style prop correctly', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('style')).toEqual(selectedStyle);
+      });
+
+      it('should call selectRow.style function correctly', () => {
+        expect(selectRow.style).toHaveBeenCalledTimes(1);
+        expect(selectRow.style).toHaveBeenCalledWith(row, rowIndex);
+      });
+
+      describe('and props.style is also defined', () => {
+        const componentStype = { fontSize: '16px' };
+        beforeEach(() => {
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+                style={ componentStype }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop correctly', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('style')).toEqual({
+            ...selectedStyle,
+            ...componentStype
+          });
+        });
+      });
+
+      describe('and selectRow.bgColor is also defined as an object', () => {
+        beforeEach(() => {
+          selectRow.bgColor = 'gray';
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop with correct backgroundColor', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('style')).toEqual({
+            ...selectedStyle,
+            backgroundColor: selectRow.bgColor
+          });
+        });
+      });
+
+      describe('and selectRow.bgColor is also defined as a function', () => {
+        const color = 'gray';
+        beforeEach(() => {
+          selectRow.bgColor = jest.fn().mockReturnValue(color);
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop with correct backgroundColor', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('style')).toEqual({
+            ...selectedStyle,
+            backgroundColor: color
+          });
+        });
+
+        it('should call selectRow.bgColor function correctly', () => {
+          expect(selectRow.bgColor).toHaveBeenCalledTimes(1);
+          expect(selectRow.bgColor).toHaveBeenCalledWith(row, rowIndex);
+        });
+      });
+    });
+  });
+
+  describe('if current row is selected', () => {
+    const selectedClassName = 'select-classname';
+    describe('when selectRow.style is defined as an object', () => {
+      beforeEach(() => {
+        selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], classes: selectedClassName };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
+          </SelectionContext.Provider>
+        );
+      });
+
+      it('should inject className prop correctly', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('className')).toEqual(selectedClassName);
+      });
+
+      describe('and props.className is also defined', () => {
+        const componentClassName = 'component-classname';
+        beforeEach(() => {
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+                className={ componentClassName }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop correctly', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('className')).toEqual(`${componentClassName} ${selectedClassName}`);
+        });
+      });
+    });
+
+    describe('when selectRow.style is defined as a function', () => {
+      beforeEach(() => {
+        selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], classes: jest.fn().mockReturnValue(selectedClassName) };
+        wrapper = mount(
+          <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
+          </SelectionContext.Provider>
+        );
+      });
+
+      it('should inject className prop correctly', () => {
+        expect(wrapper.find(BaseComponent)).toHaveLength(1);
+        expect(wrapper.find(BaseComponent).prop('className')).toEqual(selectedClassName);
+      });
+
+      it('should call selectRow.classes function correctly', () => {
+        expect(selectRow.classes).toHaveBeenCalledTimes(1);
+        expect(selectRow.classes).toHaveBeenCalledWith(row, rowIndex);
+      });
+
+      describe('and props.className is also defined', () => {
+        const componentClassName = 'component-classname';
+        beforeEach(() => {
+          wrapper = mount(
+            <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+                className={ componentClassName }
+              />
+            </SelectionContext.Provider>
+          );
+        });
+
+        it('should inject style prop correctly', () => {
+          expect(wrapper.find(BaseComponent)).toHaveLength(1);
+          expect(wrapper.find(BaseComponent).prop('className')).toEqual(`${componentClassName} ${selectedClassName}`);
+        });
+      });
+    });
+  });
+});

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

@@ -4,8 +4,6 @@ import { shallow } from 'enzyme';
 
 import Cell from '../src/cell';
 import Row from '../src/row';
-import Const from '../src/const';
-import SelectionCell from '../src//row-selection/selection-cell';
 import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
 
 let defaultColumns = [{
@@ -102,395 +100,50 @@ describe('Row', () => {
     });
   });
 
-  describe('when cellEdit prop is defined', () => {
-    let columns;
-    let cellEdit;
-
+  describe('when CellComponent prop is defined', () => {
+    const CellComponent = () => null;
     beforeEach(() => {
-      columns = defaultColumns;
-      cellEdit = {
-        mode: 'click',
-        CLICK_TO_CELL_EDIT: 'click',
-        DBCLICK_TO_CELL_EDIT: 'dbclick'
-      };
       wrapper = shallow(
         <Row
           { ...mockBodyResolvedProps }
-          row={ row }
           rowIndex={ rowIndex }
-          columns={ columns }
-          keyField={ keyField }
-          cellEdit={ cellEdit }
-        />
-      );
+          columns={ defaultColumns }
+          row={ row }
+          CellComponent={ CellComponent }
+        />);
     });
 
-    afterEach(() => {
-      columns = undefined;
-      cellEdit = undefined;
-    });
-
-    it('Cell component should receive correct editable props', () => {
+    it('should render CellComponent successfully', () => {
       expect(wrapper.length).toBe(1);
-      for (let i = 0; i < columns.length; i += 1) {
-        const column = columns[i];
-        if (column.dataField === keyField) {
-          expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
-        } else {
-          expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
-        }
-      }
+      expect(wrapper.find(CellComponent)).toHaveLength(defaultColumns.length);
+    });
+  });
+
+  describe('when editingRowIdx and editingColIdx prop is defined', () => {
+    const editingRowIdx = rowIndex;
+    const editingColIdx = 1;
+    const EditingCellComponent = () => null;
+    beforeEach(() => {
+      wrapper = shallow(
+        <Row
+          { ...mockBodyResolvedProps }
+          rowIndex={ rowIndex }
+          columns={ defaultColumns }
+          row={ row }
+          EditingCellComponent={ EditingCellComponent }
+          editingRowIdx={ editingRowIdx }
+          editingColIdx={ editingColIdx }
+        />);
     });
 
-    it('Cell component should receive correct clickToEdit props', () => {
+    it('should render EditingCell component correctly', () => {
+      const EditingCell = wrapper.find(EditingCellComponent);
       expect(wrapper.length).toBe(1);
-      for (let i = 0; i < columns.length; i += 1) {
-        expect(wrapper.find(Cell).get(i).props.clickToEdit).toBeTruthy();
-      }
-    });
-
-    it('Cell component should receive correct dbclickToEdit props', () => {
-      expect(wrapper.length).toBe(1);
-      for (let i = 0; i < columns.length; i += 1) {
-        expect(wrapper.find(Cell).get(i).props.dbclickToEdit).toBeFalsy();
-      }
-    });
-
-    describe('when props.cellEdit.mode is dbclick', () => {
-      beforeEach(() => {
-        cellEdit.mode = cellEdit.DBCLICK_TO_CELL_EDIT;
-        wrapper = shallow(
-          <Row
-            { ...mockBodyResolvedProps }
-            row={ row }
-            rowIndex={ rowIndex }
-            columns={ columns }
-            keyField={ keyField }
-            cellEdit={ cellEdit }
-          />
-        );
-      });
-
-      it('Cell component should receive correct clickToEdit props', () => {
-        expect(wrapper.length).toBe(1);
-        for (let i = 0; i < columns.length; i += 1) {
-          expect(wrapper.find(Cell).get(i).props.clickToEdit).toBeFalsy();
-        }
-      });
-
-      it('Cell component should receive correct dbclickToEdit props', () => {
-        expect(wrapper.length).toBe(1);
-        for (let i = 0; i < columns.length; i += 1) {
-          expect(wrapper.find(Cell).get(i).props.dbclickToEdit).toBeTruthy();
-        }
-      });
-    });
-
-    describe('and column.editable defined false', () => {
-      const nonEditableColIndex = 1;
-      beforeEach(() => {
-        columns[nonEditableColIndex].editable = false;
-        wrapper = shallow(
-          <Row
-            { ...mockBodyResolvedProps }
-            row={ row }
-            rowIndex={ rowIndex }
-            columns={ columns }
-            keyField={ keyField }
-            cellEdit={ cellEdit }
-          />
-        );
-      });
-
-      it('Cell component should receive correct editable props', () => {
-        expect(wrapper.length).toBe(1);
-        for (let i = 0; i < columns.length; i += 1) {
-          const column = columns[i];
-          if (i === nonEditableColIndex || column.dataField === keyField) {
-            expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
-          } else {
-            expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
-          }
-        }
-      });
-    });
-
-    describe('and column.editable defined as function', () => {
-      const nonEditableColIndex = 1;
-      let editableCallBack;
-
-      afterEach(() => {
-        editableCallBack.reset();
-      });
-
-      describe('which return false', () => {
-        beforeEach(() => {
-          editableCallBack = sinon.stub().returns(false);
-          columns[nonEditableColIndex].editable = editableCallBack;
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              row={ row }
-              rowIndex={ rowIndex }
-              columns={ columns }
-              keyField={ keyField }
-              cellEdit={ cellEdit }
-            />
-          );
-        });
-
-        it('column.editable callback function should be called once', () => {
-          expect(editableCallBack.callCount).toBe(1);
-        });
-
-        it('Cell component should receive correct editable props', () => {
-          expect(wrapper.length).toBe(1);
-          for (let i = 0; i < columns.length; i += 1) {
-            const column = columns[i];
-            if (i === nonEditableColIndex || column.dataField === keyField) {
-              expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
-            } else {
-              expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
-            }
-          }
-        });
-      });
-
-      describe('which return true', () => {
-        beforeEach(() => {
-          editableCallBack = sinon.stub().returns(true);
-          columns[nonEditableColIndex].editable = editableCallBack;
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              row={ row }
-              rowIndex={ rowIndex }
-              columns={ columns }
-              keyField={ keyField }
-              cellEdit={ cellEdit }
-            />
-          );
-        });
-
-        it('column.editable callback function should be called once', () => {
-          expect(editableCallBack.callCount).toBe(1);
-        });
-
-        it('Cell component should receive correct editable props', () => {
-          expect(wrapper.length).toBe(1);
-          for (let i = 0; i < columns.length; i += 1) {
-            const column = columns[i];
-            if (column.dataField === keyField) {
-              expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
-            } else {
-              expect(wrapper.find(Cell).get(i).props.editable).toBeTruthy();
-            }
-          }
-        });
-      });
-    });
-
-    // Means user defined cellEdit.nonEditableRows
-    // and some rows will be treated as noneditable by this rules
-    describe('when editable prop is false', () => {
-      beforeEach(() => {
-        wrapper = shallow(
-          <Row
-            { ...mockBodyResolvedProps }
-            row={ row }
-            rowIndex={ rowIndex }
-            columns={ columns }
-            keyField={ keyField }
-            cellEdit={ cellEdit }
-            editable={ false }
-          />
-        );
-      });
-
-      it('All the Cell components should be noneditable', () => {
-        expect(wrapper.length).toBe(1);
-        for (let i = 0; i < columns.length; i += 1) {
-          expect(wrapper.find(Cell).get(i).props.editable).toBeFalsy();
-        }
-      });
-    });
-
-    // Means a cell now is undering editing
-    describe('when cellEdit.ridx and cellEdit.cidx is defined', () => {
-      const EditingCell = () => null;
-      describe('and cellEdit.ridx is match to current row index', () => {
-        const editingColIndex = 1;
-        beforeEach(() => {
-          cellEdit.ridx = rowIndex;
-          cellEdit.cidx = editingColIndex;
-          cellEdit.onUpdate = sinon.stub();
-          cellEdit.onEscape = sinon.stub();
-          cellEdit.EditingCell = EditingCell;
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              row={ row }
-              rowIndex={ rowIndex }
-              columns={ columns }
-              keyField={ keyField }
-              cellEdit={ cellEdit }
-              editable={ false }
-            />
-          );
-        });
-
-        it('should render EditingCell correctly', () => {
-          const complexComponents = wrapper.find('tr').children().findWhere(
-            n => n.type().name === 'Cell' || n.type().name === 'EditingCell');
-
-          expect(wrapper.length).toBe(1);
-          expect(wrapper.find(EditingCell).length).toBe(1);
-          expect(complexComponents.at(editingColIndex).type()).toEqual(EditingCell);
-        });
-
-        describe('if column.editCellStyle defined as object', () => {
-          const definedStyleColIndex = editingColIndex;
-
-          beforeEach(() => {
-            columns[definedStyleColIndex].editCellStyle = { backgroundColor: 'red' };
-            wrapper = shallow(
-              <Row
-                { ...mockBodyResolvedProps }
-                row={ row }
-                rowIndex={ rowIndex }
-                columns={ columns }
-                keyField={ keyField }
-                cellEdit={ cellEdit }
-              />
-            );
-          });
-
-          it('should also rendering EditingCell with correct style object', () => {
-            expect(wrapper.find(EditingCell).length).toBe(1);
-            expect(wrapper.find(EditingCell).props().style)
-              .toEqual(columns[definedStyleColIndex].editCellStyle);
-          });
-        });
-
-        describe('if column.editCellStyle defined as function', () => {
-          const definedStyleColIndex = editingColIndex;
-          const customStyle = { backgroundColor: 'red' };
-          let editCellStyleCallBack;
-
-          beforeEach(() => {
-            editCellStyleCallBack = sinon.stub().returns(customStyle);
-            columns[definedStyleColIndex].editCellStyle = editCellStyleCallBack;
-            wrapper = shallow(
-              <Row
-                { ...mockBodyResolvedProps }
-                row={ row }
-                rowIndex={ rowIndex }
-                columns={ columns }
-                keyField={ keyField }
-                cellEdit={ cellEdit }
-              />
-            );
-          });
-
-          it('should calling custom column.editCellStyle callback correctly', () => {
-            expect(editCellStyleCallBack.callCount).toBe(1);
-            expect(
-              editCellStyleCallBack.calledWith(
-                row[columns[editingColIndex].dataField], row, rowIndex, editingColIndex)
-            ).toBe(true);
-          });
-
-          it('should also rendering EditingCell with correct style object', () => {
-            expect(wrapper.find(EditingCell).length).toBe(1);
-            expect(wrapper.find(EditingCell).props().style).toEqual(customStyle);
-          });
-        });
-
-        describe('if column.editCellClasses defined as string', () => {
-          const definedStyleColIndex = editingColIndex;
-
-          beforeEach(() => {
-            columns[definedStyleColIndex].editCellClasses = 'custom-class';
-            wrapper = shallow(
-              <Row
-                { ...mockBodyResolvedProps }
-                row={ row }
-                rowIndex={ rowIndex }
-                columns={ columns }
-                keyField={ keyField }
-                cellEdit={ cellEdit }
-              />
-            );
-          });
-
-          it('should also rendering EditingCell with correct class', () => {
-            expect(wrapper.find(EditingCell).length).toBe(1);
-            expect(wrapper.find(EditingCell).props().className)
-              .toEqual(columns[definedStyleColIndex].editCellClasses);
-          });
-        });
-
-        describe('if column.editCellClasses defined as function', () => {
-          const definedStyleColIndex = editingColIndex;
-          const customClass = 'custom-class';
-          let editCellClassesCallBack;
-
-          beforeEach(() => {
-            editCellClassesCallBack = sinon.stub().returns(customClass);
-            columns[definedStyleColIndex].editCellClasses = editCellClassesCallBack;
-            wrapper = shallow(
-              <Row
-                { ...mockBodyResolvedProps }
-                row={ row }
-                rowIndex={ rowIndex }
-                columns={ columns }
-                keyField={ keyField }
-                cellEdit={ cellEdit }
-              />
-            );
-          });
-
-          it('should calling custom column.editCellStyle callback correctly', () => {
-            expect(editCellClassesCallBack.callCount).toBe(1);
-            expect(
-              editCellClassesCallBack.calledWith(
-                row[columns[editingColIndex].dataField], row, rowIndex, editingColIndex)
-            ).toBe(true);
-          });
-
-          it('should also rendering EditingCell with correct class', () => {
-            expect(wrapper.find(EditingCell).length).toBe(1);
-            expect(wrapper.find(EditingCell).props().className).toEqual(customClass);
-          });
-        });
-      });
-
-      describe('and cellEdit.ridx is not match to current row index', () => {
-        const editingColIndex = 1;
-        beforeEach(() => {
-          cellEdit.ridx = 3;
-          cellEdit.cidx = editingColIndex;
-          cellEdit.onUpdate = sinon.stub();
-          cellEdit.onEscape = sinon.stub();
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              row={ row }
-              rowIndex={ 1 }
-              columns={ columns }
-              keyField={ keyField }
-              cellEdit={ cellEdit }
-              editable={ false }
-            />
-          );
-        });
-
-        it('should not render any EditingCell component', () => {
-          expect(wrapper.length).toBe(1);
-          expect(wrapper.find(EditingCell).length).toBe(0);
-          expect(wrapper.find(Cell).length).toBe(columns.length);
-        });
-      });
+      expect(EditingCell).toHaveLength(1);
+      expect(EditingCell.prop('row')).toEqual(row);
+      expect(EditingCell.prop('rowIndex')).toEqual(editingRowIdx);
+      expect(EditingCell.prop('column')).toEqual(defaultColumns[editingColIdx]);
+      expect(EditingCell.prop('columnIndex')).toEqual(editingColIdx);
     });
   });
 
@@ -542,348 +195,6 @@ describe('Row', () => {
     });
   });
 
-  describe('selectRow', () => {
-    let selectRow;
-
-    describe('when selectRow.mode is ROW_SELECT_DISABLED (row is not able to select)', () => {
-      beforeEach(() => {
-        wrapper = shallow(
-          <Row
-            { ...mockBodyResolvedProps }
-            rowIndex={ rowIndex }
-            columns={ defaultColumns }
-            row={ row }
-          />
-        );
-      });
-
-      it('should not render <SelectionCell />', () => {
-        expect(wrapper.find(SelectionCell).length).toBe(0);
-      });
-    });
-
-    describe('when selectRow.mode was defined  (single or multiple selection)', () => {
-      describe('if selectRow.mode is radio (single selection)', () => {
-        beforeEach(() => {
-          selectRow = { mode: 'radio' };
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              rowIndex={ rowIndex }
-              columns={ defaultColumns }
-              row={ row }
-              selectRow={ selectRow }
-              selected
-              selectable
-            />);
-        });
-
-        it('should render <SelectionCell />', () => {
-          expect(wrapper.find(SelectionCell).length).toBe(1);
-        });
-
-        it('should render <SelectionCell /> with correct props', () => {
-          expect(wrapper.find(SelectionCell).props().selected).toBeTruthy();
-          expect(wrapper.find(SelectionCell).props().disabled).toBeFalsy();
-          expect(wrapper.find(SelectionCell).props().mode).toEqual(selectRow.mode);
-        });
-
-        describe('when selectRow.hideSelectColumn is true', () => {
-          beforeEach(() => {
-            selectRow = { mode: 'radio', hideSelectColumn: true };
-            wrapper = shallow(
-              <Row
-                { ...mockBodyResolvedProps }
-                rowIndex={ rowIndex }
-                columns={ defaultColumns }
-                row={ row }
-                selectRow={ selectRow }
-              />);
-          });
-
-          it('should not render <SelectionCell />', () => {
-            expect(wrapper.find(SelectionCell).length).toBe(0);
-          });
-        });
-      });
-
-      describe('if selectRow.mode is checkbox (multiple selection)', () => {
-        beforeEach(() => {
-          selectRow = { mode: 'checkbox' };
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              rowIndex={ rowIndex }
-              columns={ defaultColumns }
-              row={ row }
-              selectRow={ selectRow }
-              selected
-              selectable
-            />);
-        });
-
-        it('should render <SelectionCell />', () => {
-          expect(wrapper.find(SelectionCell).length).toBe(1);
-        });
-
-        it('should render <SelectionCell /> with correct props', () => {
-          expect(wrapper.find(SelectionCell).props().selected).toBeTruthy();
-          expect(wrapper.find(SelectionCell).props().disabled).toBeFalsy();
-          expect(wrapper.find(SelectionCell).props().mode).toEqual(selectRow.mode);
-        });
-
-        describe('when selectRow.hideSelectColumn is true', () => {
-          beforeEach(() => {
-            selectRow = { mode: 'checkbox', hideSelectColumn: true };
-            wrapper = shallow(
-              <Row
-                { ...mockBodyResolvedProps }
-                rowIndex={ rowIndex }
-                columns={ defaultColumns }
-                row={ row }
-                selectRow={ selectRow }
-              />);
-          });
-
-          it('should not render <SelectionCell />', () => {
-            expect(wrapper.find(SelectionCell).length).toBe(0);
-          });
-        });
-      });
-
-      describe('if selectable prop is false', () => {
-        beforeEach(() => {
-          selectRow = { mode: 'checkbox' };
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              rowIndex={ rowIndex }
-              columns={ defaultColumns }
-              row={ row }
-              keyField={ keyField }
-              selectRow={ selectRow }
-              selectable={ false }
-            />);
-        });
-
-        it('should render SelectionCell component with correct disable prop correctly', () => {
-          expect(wrapper.find(SelectionCell).length).toBe(1);
-          expect(wrapper.find(SelectionCell).prop('disabled')).toBeTruthy();
-        });
-      });
-
-      describe('if selectable prop is true', () => {
-        beforeEach(() => {
-          selectRow = { mode: 'checkbox' };
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              rowIndex={ rowIndex }
-              columns={ defaultColumns }
-              row={ row }
-              keyField={ keyField }
-              selectRow={ selectRow }
-              selectable
-            />);
-        });
-
-        it('should render SelectionCell component with correct disable prop correctly', () => {
-          expect(wrapper.find(SelectionCell).length).toBe(1);
-          expect(wrapper.find(SelectionCell).prop('disabled')).toBeFalsy();
-        });
-      });
-
-      describe('if selectRow.clickToSelect is true', () => {
-        beforeEach(() => {
-          selectRow = { mode: 'checkbox' };
-          selectRow.clickToSelect = true;
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              rowIndex={ rowIndex }
-              columns={ defaultColumns }
-              row={ row }
-              selectRow={ selectRow }
-              selected
-              selectable
-            />);
-        });
-
-        it('should render Row component successfully with onClick event', () => {
-          expect(wrapper.length).toBe(1);
-          expect(wrapper.find('tr').prop('onClick')).toBeDefined();
-        });
-      });
-    });
-  });
-
-  describe('handleRowClick', () => {
-    let selectRow;
-    let onRowSelectCallBack;
-
-    describe('selectable prop is false', () => {
-      beforeEach(() => {
-        onRowSelectCallBack = sinon.stub();
-        selectRow = {
-          mode: 'checkbox',
-          clickToSelect: true,
-          onRowSelect: onRowSelectCallBack
-        };
-        wrapper = shallow(
-          <Row
-            { ...mockBodyResolvedProps }
-            rowIndex={ rowIndex }
-            columns={ defaultColumns }
-            row={ row }
-            selectRow={ selectRow }
-            selected
-            selectable={ false }
-          />);
-        wrapper.find('tr').simulate('click');
-      });
-
-      it('should not calling selectRow.onRowSelect callback', () => {
-        expect(onRowSelectCallBack.callCount).toEqual(0);
-      });
-    });
-
-    describe('selectable prop is true', () => {
-      describe('and selected prop is true', () => {
-        beforeEach(() => {
-          onRowSelectCallBack = sinon.stub();
-          selectRow = {
-            mode: 'checkbox',
-            clickToSelect: true,
-            onRowSelect: onRowSelectCallBack
-          };
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              keyField={ keyField }
-              rowIndex={ rowIndex }
-              columns={ defaultColumns }
-              row={ row }
-              selectRow={ selectRow }
-              selected
-              selectable
-            />);
-          wrapper.find('tr').simulate('click');
-        });
-
-        it('should calling selectRow.onRowSelect callback', () => {
-          expect(onRowSelectCallBack.callCount).toEqual(1);
-        });
-
-        it('should calling selectRow.onRowSelect with correct argument', () => {
-          expect(onRowSelectCallBack.calledWith(row[keyField], false, rowIndex)).toBeTruthy();
-        });
-      });
-
-      describe('and selected prop is false', () => {
-        beforeEach(() => {
-          onRowSelectCallBack = sinon.stub();
-          selectRow = {
-            mode: 'checkbox',
-            clickToSelect: true,
-            onRowSelect: onRowSelectCallBack
-          };
-          wrapper = shallow(
-            <Row
-              { ...mockBodyResolvedProps }
-              keyField={ keyField }
-              rowIndex={ rowIndex }
-              columns={ defaultColumns }
-              row={ row }
-              selectRow={ selectRow }
-              selected={ false }
-              selectable
-            />);
-          wrapper.find('tr').simulate('click');
-        });
-
-        it('should calling selectRow.onRowSelect callback', () => {
-          expect(onRowSelectCallBack.callCount).toEqual(1);
-        });
-
-        it('should calling selectRow.onRowSelect with correct argument', () => {
-          expect(onRowSelectCallBack.calledWith(row[keyField], true, rowIndex)).toBeTruthy();
-        });
-      });
-    });
-
-    describe('if cellEdit.mode is dbclick and selectRow.clickToEdit is true', () => {
-      beforeEach(() => {
-        onRowSelectCallBack = sinon.stub();
-        const cellEdit = {
-          mode: Const.DBCLICK_TO_CELL_EDIT,
-          ridx: undefined,
-          cidx: undefined,
-          onStart: sinon.stub()
-        };
-        selectRow = {
-          mode: 'checkbox',
-          clickToSelect: true,
-          clickToEdit: true,
-          onRowSelect: onRowSelectCallBack
-        };
-        wrapper = shallow(
-          <Row
-            { ...mockBodyResolvedProps }
-            keyField={ keyField }
-            rowIndex={ rowIndex }
-            columns={ defaultColumns }
-            row={ row }
-            selectRow={ selectRow }
-            cellEdit={ cellEdit }
-            selected
-            selectable
-          />);
-        // console.log(wrapper.instance());
-        const rowClick = wrapper.instance().createClickEventHandler();
-        rowClick();
-        rowClick();
-      });
-
-      it('should increase clickNum as 2', () => {
-        expect(wrapper.instance().clickNum).toEqual(2);
-      });
-    });
-
-    describe('when attrs.onClick prop is defined', () => {
-      const customClickCallBack = sinon.stub();
-      const attrs = { onClick: customClickCallBack };
-
-      beforeEach(() => {
-        onRowSelectCallBack = sinon.stub();
-        selectRow = {
-          mode: 'checkbox',
-          clickToSelect: true,
-          onRowSelect: onRowSelectCallBack
-        };
-        wrapper = shallow(
-          <Row
-            { ...mockBodyResolvedProps }
-            rowIndex={ rowIndex }
-            columns={ defaultColumns }
-            row={ row }
-            selectRow={ selectRow }
-            attrs={ attrs }
-            selected
-            selectable
-          />);
-        wrapper.find('tr').simulate('click');
-      });
-
-      it('should calling attrs.onClick callback', () => {
-        expect(customClickCallBack.callCount).toEqual(1);
-      });
-
-      it('should calling selectRow.onRowSelect callback', () => {
-        expect(onRowSelectCallBack.callCount).toEqual(1);
-      });
-    });
-  });
-
   describe('when column.style prop is defined', () => {
     let columns;
     const columnIndex = 1;

packages/react-bootstrap-table2/test/test-helpers/mock/body-resolved-props.js

@@ -1,16 +1,25 @@
 import Const from '../../../src/const';
 
-const { ROW_SELECT_DISABLED, UNABLE_TO_CELL_EDIT } = Const;
+const { ROW_SELECT_DISABLED } = Const;
 
 export const rowSelectionResolvedProps = {
-  mode: ROW_SELECT_DISABLED
+  mode: ROW_SELECT_DISABLED,
+  selected: [],
+  hideSelectColumn: true
+};
+
+export const expandRowResolvedProps = {
+  renderer: undefined,
+  expanded: []
 };
 
 export const cellEditResolvedProps = {
-  mode: UNABLE_TO_CELL_EDIT
+  mode: null,
+  nonEditableRows: []
 };
 
 export default {
   cellEdit: cellEditResolvedProps,
+  expandRow: expandRowResolvedProps,
   selectRow: rowSelectionResolvedProps
 };

packages/react-bootstrap-table2/test/test-helpers/mock/header-resolved-props.js

@@ -3,9 +3,17 @@ import Const from '../../../src/const';
 const { ROW_SELECT_DISABLED } = Const;
 
 export const rowSelectionResolvedProps = {
-  mode: ROW_SELECT_DISABLED
+  mode: ROW_SELECT_DISABLED,
+  selected: [],
+  hideSelectColumn: true
+};
+
+export const expandRowResolvedProps = {
+  renderer: undefined,
+  expanded: []
 };
 
 export default {
-  selectRow: rowSelectionResolvedProps
+  selectRow: rowSelectionResolvedProps,
+  expandRow: expandRowResolvedProps
 };

yarn.lock

@@ -332,6 +332,14 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
+array.prototype.flat@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.10.0"
+    function-bind "^1.1.1"
+
 arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -2692,24 +2700,26 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-enzyme-adapter-react-16@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz#a8f4278b47e082fbca14f5bfb1ee50ee650717b4"
-  dependencies:
-    enzyme-adapter-utils "^1.3.0"
-    lodash "^4.17.4"
-    object.assign "^4.0.4"
-    object.values "^1.0.4"
-    prop-types "^15.6.0"
-    react-reconciler "^0.7.0"
-    react-test-renderer "^16.0.0-0"
-
-enzyme-adapter-utils@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.4.0.tgz#c403b81e8eb9953658569e539780964bdc98de62"
+enzyme-adapter-react-16.3@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16.3/-/enzyme-adapter-react-16.3-1.0.0.tgz#d3992301aba46c8cceab21c1d201e85f01c93bfc"
   dependencies:
+    enzyme-adapter-utils "^1.5.0"
+    function.prototype.name "^1.1.0"
     object.assign "^4.1.0"
-    prop-types "^15.6.0"
+    object.values "^1.0.4"
+    prop-types "^15.6.2"
+    react-is "^16.4.1"
+    react-reconciler "^0.7.0"
+    react-test-renderer "~16.3.0-0"
+
+enzyme-adapter-utils@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.5.0.tgz#a020ab3ae79bb1c85e1d51f48f35e995e0eed810"
+  dependencies:
+    function.prototype.name "^1.1.0"
+    object.assign "^4.1.0"
+    prop-types "^15.6.2"
 
 enzyme-to-json@3.3.4:
   version "3.3.4"
@@ -2717,20 +2727,21 @@ enzyme-to-json@3.3.4:
   dependencies:
     lodash "^4.17.4"
 
-enzyme@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
+enzyme@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.4.0.tgz#085c66fe647d8c9c4becd1fee3042c040cda88a6"
   dependencies:
+    array.prototype.flat "^1.2.1"
     cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.0.3"
-    has "^1.0.1"
+    function.prototype.name "^1.1.0"
+    has "^1.0.3"
     is-boolean-object "^1.0.0"
-    is-callable "^1.1.3"
+    is-callable "^1.1.4"
     is-number-object "^1.0.3"
     is-string "^1.0.4"
     is-subset "^0.1.1"
     lodash "^4.17.4"
-    object-inspect "^1.5.0"
+    object-inspect "^1.6.0"
     object-is "^1.0.1"
     object.assign "^4.1.0"
     object.entries "^1.0.4"
@@ -2750,6 +2761,16 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+es-abstract@^1.10.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
 es-abstract@^1.6.1, es-abstract@^1.7.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
@@ -3499,7 +3520,7 @@ function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-function.prototype.name@^1.0.3:
+function.prototype.name@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
   dependencies:
@@ -3973,6 +3994,12 @@ has@^1.0.1:
   dependencies:
     function-bind "^1.0.2"
 
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  dependencies:
+    function-bind "^1.1.1"
+
 hash-base@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
@@ -4323,6 +4350,10 @@ is-callable@^1.1.1, is-callable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
 
+is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+
 is-ci@^1.0.10:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
@@ -6002,7 +6033,7 @@ object-hash@^1.1.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.2.0.tgz#e96af0e96981996a1d47f88ead8f74f1ebc4422b"
 
-object-inspect@^1.5.0:
+object-inspect@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
 
@@ -6761,6 +6792,13 @@ prop-types@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -6929,6 +6967,10 @@ react-dom@16.3.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-is@^16.3.2, react-is@^16.4.1:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"
+
 react-reconciler@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
@@ -6945,13 +6987,14 @@ react-test-renderer@16.0.0:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
 
-react-test-renderer@^16.0.0-0:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.2.0.tgz#bddf259a6b8fcd8555f012afc8eacc238872a211"
+react-test-renderer@~16.3.0-0:
+  version "16.3.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.2.tgz#3d1ed74fda8db42521fdf03328e933312214749a"
   dependencies:
     fbjs "^0.8.16"
     object-assign "^4.1.1"
     prop-types "^15.6.0"
+    react-is "^16.3.2"
 
 react@16.3.2:
   version "16.3.2"