diff --git a/packages/react-bootstrap-table2-editor/test/cell-binder.test.js b/packages/react-bootstrap-table2-editor/test/cell-binder.test.js
new file mode 100644
index 0000000..dfe72ee
--- /dev/null
+++ b/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();
+    });
+  });
+});
diff --git a/packages/react-bootstrap-table2-editor/test/context.test.js b/packages/react-bootstrap-table2-editor/test/context.test.js
index 89af0ce..03cfd74 100644
--- a/packages/react-bootstrap-table2-editor/test/context.test.js
+++ b/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: []
       }]));
     });
   });
diff --git a/packages/react-bootstrap-table2-editor/test/editing-cell-binder.test.js b/packages/react-bootstrap-table2-editor/test/editing-cell-binder.test.js
new file mode 100644
index 0000000..fa8a392
--- /dev/null
+++ b/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
+      );
+    });
+  });
+});
diff --git a/packages/react-bootstrap-table2-editor/test/row-binder.test.js b/packages/react-bootstrap-table2-editor/test/row-binder.test.js
new file mode 100644
index 0000000..97490d6
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/packages/react-bootstrap-table2/test/body.test.js b/packages/react-bootstrap-table2/test/body.test.js
index ba71bda..e449877 100644
--- a/packages/react-bootstrap-table2/test/body.test.js
+++ b/packages/react-bootstrap-table2/test/body.test.js
@@ -254,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(
@@ -272,16 +276,15 @@ 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();
     });
   });
 
diff --git a/packages/react-bootstrap-table2/test/contexts/index.test.js b/packages/react-bootstrap-table2/test/contexts/index.test.js
index 4a2b1de..90e8a69 100644
--- a/packages/react-bootstrap-table2/test/contexts/index.test.js
+++ b/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
diff --git a/packages/react-bootstrap-table2/test/row-aggregator.test.js b/packages/react-bootstrap-table2/test/row-aggregator.test.js
index a98bc95..e09886a 100644
--- a/packages/react-bootstrap-table2/test/row-aggregator.test.js
+++ b/packages/react-bootstrap-table2/test/row-aggregator.test.js
@@ -40,6 +40,7 @@ describe('Row Aggregator', () => {
 
   const getBaseProps = () => ({
     row,
+    value: row[keyField],
     columns,
     keyField,
     rowIndex,
diff --git a/packages/react-bootstrap-table2/test/row-selection/row-binder.test.js b/packages/react-bootstrap-table2/test/row-selection/row-binder.test.js
index 7cc0a4c..0905eee 100644
--- a/packages/react-bootstrap-table2/test/row-selection/row-binder.test.js
+++ b/packages/react-bootstrap-table2/test/row-selection/row-binder.test.js
@@ -24,13 +24,19 @@ describe('Selection Row Binder', () => {
   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 } keyField={ keyField } rowIndex={ rowIndex } />
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
         </SelectionContext.Provider>
       );
     });
@@ -46,7 +52,12 @@ describe('Selection Row Binder', () => {
       selectRow = { mode: 'checkbox', selected: [] };
       wrapper = mount(
         <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-          <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
         </SelectionContext.Provider>
       );
     });
@@ -62,7 +73,12 @@ describe('Selection Row Binder', () => {
       selectRow = { mode: 'checkbox', nonSelectable: [] };
       wrapper = mount(
         <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-          <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
         </SelectionContext.Provider>
       );
     });
@@ -78,7 +94,12 @@ describe('Selection Row Binder', () => {
       selectRow = { mode: 'checkbox', nonSelectable: [data[rowIndex][keyField]] };
       wrapper = mount(
         <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-          <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+          <WithSelectionComponent
+            row={ row }
+            value={ value }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+          />
         </SelectionContext.Provider>
       );
     });
@@ -96,7 +117,12 @@ describe('Selection Row Binder', () => {
         selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], style: selectedStyle };
         wrapper = mount(
           <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-            <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
           </SelectionContext.Provider>
         );
       });
@@ -113,6 +139,7 @@ describe('Selection Row Binder', () => {
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
               <WithSelectionComponent
                 row={ row }
+                value={ value }
                 keyField={ keyField }
                 rowIndex={ rowIndex }
                 style={ componentStype }
@@ -135,7 +162,12 @@ describe('Selection Row Binder', () => {
           selectRow.bgColor = 'gray';
           wrapper = mount(
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-              <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
             </SelectionContext.Provider>
           );
         });
@@ -155,7 +187,12 @@ describe('Selection Row Binder', () => {
           selectRow.bgColor = jest.fn().mockReturnValue(color);
           wrapper = mount(
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-              <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
             </SelectionContext.Provider>
           );
         });
@@ -180,7 +217,12 @@ describe('Selection Row Binder', () => {
         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 } keyField={ keyField } rowIndex={ rowIndex } />
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
           </SelectionContext.Provider>
         );
       });
@@ -202,6 +244,7 @@ describe('Selection Row Binder', () => {
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
               <WithSelectionComponent
                 row={ row }
+                value={ value }
                 keyField={ keyField }
                 rowIndex={ rowIndex }
                 style={ componentStype }
@@ -224,7 +267,12 @@ describe('Selection Row Binder', () => {
           selectRow.bgColor = 'gray';
           wrapper = mount(
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-              <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
             </SelectionContext.Provider>
           );
         });
@@ -244,7 +292,12 @@ describe('Selection Row Binder', () => {
           selectRow.bgColor = jest.fn().mockReturnValue(color);
           wrapper = mount(
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-              <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+              <WithSelectionComponent
+                row={ row }
+                value={ value }
+                keyField={ keyField }
+                rowIndex={ rowIndex }
+              />
             </SelectionContext.Provider>
           );
         });
@@ -272,7 +325,12 @@ describe('Selection Row Binder', () => {
         selectRow = { mode: 'checkbox', selected: [data[rowIndex][keyField]], classes: selectedClassName };
         wrapper = mount(
           <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
-            <WithSelectionComponent row={ row } keyField={ keyField } rowIndex={ rowIndex } />
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
           </SelectionContext.Provider>
         );
       });
@@ -289,6 +347,7 @@ describe('Selection Row Binder', () => {
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
               <WithSelectionComponent
                 row={ row }
+                value={ value }
                 keyField={ keyField }
                 rowIndex={ rowIndex }
                 className={ componentClassName }
@@ -309,7 +368,12 @@ describe('Selection Row Binder', () => {
         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 } keyField={ keyField } rowIndex={ rowIndex } />
+            <WithSelectionComponent
+              row={ row }
+              value={ value }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+            />
           </SelectionContext.Provider>
         );
       });
@@ -331,6 +395,7 @@ describe('Selection Row Binder', () => {
             <SelectionContext.Provider data={ data } keyField={ keyField } selectRow={ selectRow }>
               <WithSelectionComponent
                 row={ row }
+                value={ value }
                 keyField={ keyField }
                 rowIndex={ rowIndex }
                 className={ componentClassName }
diff --git a/packages/react-bootstrap-table2/test/row.test.js b/packages/react-bootstrap-table2/test/row.test.js
index 43bd193..bb0fd5b 100644
--- a/packages/react-bootstrap-table2/test/row.test.js
+++ b/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);
     });
   });
 
diff --git a/packages/react-bootstrap-table2/test/test-helpers/mock/body-resolved-props.js b/packages/react-bootstrap-table2/test/test-helpers/mock/body-resolved-props.js
index 4d1d6eb..faee815 100644
--- a/packages/react-bootstrap-table2/test/test-helpers/mock/body-resolved-props.js
+++ b/packages/react-bootstrap-table2/test/test-helpers/mock/body-resolved-props.js
@@ -1,6 +1,6 @@
 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,
@@ -14,7 +14,8 @@ export const expandRowResolvedProps = {
 };
 
 export const cellEditResolvedProps = {
-  mode: UNABLE_TO_CELL_EDIT
+  mode: null,
+  nonEditableRows: []
 };
 
 export default {