Publish

- react-bootstrap-table2-example@1.0.1
 - react-bootstrap-table2-paginator@1.0.1
 - react-bootstrap-table2-toolkit@1.0.1
 - react-bootstrap-table-next@1.1.0

docs/columns.md

@@ -95,6 +95,10 @@ dataField: 'address.city'
 * `rowIndex`
 * [`formatExtraData`](#formatExtraData)
 
+> Attention:
+> Don't use any state data or any external data in formatter function, please pass them via [`formatExtraData`](#formatExtraData).
+> In addition, please make formatter function as pure function as possible as you can.
+
 ## <a name='headerFormatter'>column.headerFormatter - [Function]</a>
 `headerFormatter` allow you to customize the header column and only accept a callback function which take three arguments and a JSX/String are expected for return.
 

package.json

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(5000);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      selectRow={ { mode: 'checkbox' } }
+      cellEdit={ cellEditFactory({
+        mode: 'click'
+      }) }
+    />
+  </div>
+);

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

@@ -41,7 +41,7 @@ const columns = [{
 
 export default () => (
   <div>
-    <h3>Try to hover on Product Name header column</h3>
+    <h3>Try to hover on Product ID Cell</h3>
     <BootstrapTable keyField="id" data={ products } columns={ columns } />
     <Code>{ sourceCode }</Code>
   </div>

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

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

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

@@ -11,6 +11,7 @@ import StripHoverCondensedTable from 'examples/basic/striped-hover-condensed-tab
 import NoDataTable from 'examples/basic/no-data-table';
 import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
+import LargeTable from 'examples/basic/large-table';
 
 // work on columns
 import NestedDataTable from 'examples/columns/nested-data-table';
@@ -174,7 +175,8 @@ storiesOf('Basic Table', module)
   .add('borderless table', () => <BorderlessTable />)
   .add('Indication For Empty Table', () => <NoDataTable />)
   .add('Customized id and class table', () => <CustomizedIdClassesTable />)
-  .add('Table with caption', () => <CaptionTable />);
+  .add('Table with caption', () => <CaptionTable />)
+  .add('Large Table', () => <LargeTable />);
 
 storiesOf('Work on Columns', module)
   .add('Display Nested Data', () => <NestedDataTable />)

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

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

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

@@ -40,8 +40,8 @@ export default ExtendBase =>
 
       let from = ((currPage - pageStartIndex) * currSizePerPage);
       from = dataSize === 0 ? 0 : from + 1;
-      let to = Math.min((currSizePerPage * (currPage + offset) - 1), dataSize);
+      let to = Math.min(currSizePerPage * (currPage + offset), dataSize);
-      if (to >= dataSize) to -= 1;
+      if (to > dataSize) to = dataSize;
 
       return [from, to];
     }

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

@@ -119,7 +119,34 @@ describe('PageResolver', () => {
 
     it('should return correct array with from and to value', () => {
       const instance = wrapper.instance();
-      expect(instance.calculateFromTo()).toEqual([1, props.currSizePerPage - 1]);
+      expect(instance.calculateFromTo()).toEqual([1, props.currSizePerPage]);
+    });
+
+    describe('if data is empty', () => {
+      beforeEach(() => {
+        props.dataSize = 87;
+        props.currPage = 9;
+        const mockElement = React.createElement(MockComponent, props, null);
+        wrapper = shallow(mockElement);
+      });
+
+      it('should return correct array with from and to value', () => {
+        const instance = wrapper.instance();
+        expect(instance.calculateFromTo()).toEqual([81, props.dataSize]);
+      });
+    });
+
+    describe('if current page is last page', () => {
+      beforeEach(() => {
+        props.dataSize = 0;
+        const mockElement = React.createElement(MockComponent, props, null);
+        wrapper = shallow(mockElement);
+      });
+
+      it('should return correct array with from and to value', () => {
+        const instance = wrapper.instance();
+        expect(instance.calculateFromTo()).toEqual([0, 0]);
+      });
     });
   });
 

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

@@ -121,3 +121,6 @@ Default is `false`. Give true to avoid to attach the csv header.
 
 #### noAutoBOM - [bool]
 Default is `true`.
+
+#### exportAll - [bool]
+Default is `true`. `false` will only export current data which display on table.

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

@@ -48,7 +48,9 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
   }
 
   onSearch(searchText) {
-    this.setState({ searchText });
+    if (searchText !== this.state.searchText) {
+      this.setState({ searchText });
+    }
   }
 
   /**
@@ -69,7 +71,8 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
       columns: this.props.columns,
       data: this.props.data,
       bootstrap4: this.props.bootstrap4,
-      setDependencyModules: this.setDependencyModules
+      setDependencyModules: this.setDependencyModules,
+      registerExposedAPI: this.registerExposedAPI
     };
     if (this.props.search) {
       baseProps.search = {

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

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

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

@@ -4,13 +4,14 @@ const csvDefaultOptions = {
   fileName: 'spreadsheet.csv',
   separator: ',',
   ignoreHeader: false,
-  noAutoBOM: true
+  noAutoBOM: true,
+  exportAll: true
 };
 
 export default Base =>
   class CSVOperation extends Base {
     handleExportCSV = () => {
-      const { columns, data, exportCSV } = this.props;
+      const { columns, exportCSV } = this.props;
       const meta = getMetaInfo(columns);
       const options = exportCSV === true ?
         csvDefaultOptions :
@@ -18,6 +19,8 @@ export default Base =>
           ...csvDefaultOptions,
           ...exportCSV
         };
+
+      const data = options.exportAll ? this.props.data : this.getData();
       const content = transform(data, meta, this._.get, options);
       save(content, options);
     }

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

@@ -20,25 +20,10 @@ export default (options = {
       searchText: PropTypes.string
     }
 
-    constructor(props) {
-      super(props);
-      this.needToSearch = true;
-    }
-
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.searchText !== this.props.searchText) {
-        this.needToSearch = true;
-      } else {
-        this.needToSearch = false;
-      }
-    }
-
     search() {
       const { data, columns } = this.props;
       let { searchText } = this.props;
 
-      if (!this.needToSearch) return data;
-
       if (isRemoteSearch()) {
         handleRemoteSearchChange(searchText);
         return data;

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

@@ -1,4 +1,10 @@
 import Operation from './src/op';
 
 export default Base =>
-  class StatelessOperation extends Operation.csvOperation(Base) {};
+  class StatelessOperation extends Operation.csvOperation(Base) {
+    registerExposedAPI = (...exposedFuncs) => {
+      exposedFuncs.forEach((func) => {
+        this[func.name] = func;
+      });
+    }
+  };

packages/react-bootstrap-table2/package.json

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

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

@@ -15,6 +15,15 @@ class BootstrapTable extends PropsBaseResolver(Component) {
   constructor(props) {
     super(props);
     this.validateProps();
+    if (props.registerExposedAPI) {
+      const getData = () => this.getData();
+      props.registerExposedAPI(getData);
+    }
+  }
+
+  // Exposed APIs
+  getData = () => {
+    return this.props.data;
   }
 
   render() {
@@ -161,7 +170,7 @@ BootstrapTable.propTypes = {
   }),
   onRowExpand: PropTypes.func,
   onAllRowExpand: PropTypes.func,
-  isAnyExpands: PropTypes.func,
+  isAnyExpands: PropTypes.bool,
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,
   rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

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

@@ -10,6 +10,25 @@ class Cell extends Component {
     this.handleEditingCell = this.handleEditingCell.bind(this);
   }
 
+  shouldComponentUpdate(nextProps) {
+    const shouldUpdate =
+      _.get(this.props.row, this.props.column.dataField)
+        !== _.get(nextProps.row, nextProps.column.dataField) ||
+      this.props.column.hidden !== nextProps.column.hidden ||
+      this.props.rowIndex !== nextProps.rowIndex ||
+      this.props.columnIndex !== nextProps.columnIndex ||
+      this.props.className !== nextProps.className ||
+      this.props.title !== nextProps.title ||
+      this.props.editable !== nextProps.editable ||
+      this.props.clickToEdit !== nextProps.clickToEdit ||
+      this.props.dbclickToEdit !== nextProps.dbclickToEdit ||
+      !_.isEqual(this.props.style, nextProps.style) ||
+      !_.isEqual(this.props.column.formatExtraData, nextProps.column.formatExtraData) ||
+      !_.isEqual(this.props.column.events, nextProps.column.events) ||
+      !_.isEqual(this.props.column.attrs, nextProps.column.attrs);
+    return shouldUpdate;
+  }
+
   handleEditingCell(e) {
     const { column, onStart, rowIndex, columnIndex, clickToEdit, dbclickToEdit } = this.props;
     const { events } = column;
@@ -33,62 +52,32 @@ class Cell extends Component {
       rowIndex,
       column,
       columnIndex,
+      onStart,
       editable,
       clickToEdit,
-      dbclickToEdit
+      dbclickToEdit,
+      ...rest
     } = this.props;
     const {
       dataField,
       formatter,
-      formatExtraData,
+      formatExtraData
-      style,
-      classes,
-      title,
-      events,
-      align,
-      attrs
     } = column;
-    let cellTitle;
+    const attrs = { ...rest };
-    let cellStyle = {};
     let content = _.get(row, dataField);
 
-    const cellAttrs = {
-      ..._.isFunction(attrs) ? attrs(content, row, rowIndex, columnIndex) : attrs,
-      ...events
-    };
-
-    const cellClasses = _.isFunction(classes)
-      ? classes(content, row, rowIndex, columnIndex)
-      : classes;
-
-    if (style) {
-      cellStyle = _.isFunction(style) ? style(content, row, rowIndex, columnIndex) : style;
-    }
-
-    if (title) {
-      cellTitle = _.isFunction(title) ? title(content, row, rowIndex, columnIndex) : content;
-      cellAttrs.title = cellTitle;
-    }
-
     if (formatter) {
       content = column.formatter(content, row, rowIndex, formatExtraData);
     }
 
-    if (align) {
-      cellStyle.textAlign =
-        _.isFunction(align) ? align(content, row, rowIndex, columnIndex) : align;
-    }
-
-    if (cellClasses) cellAttrs.className = cellClasses;
-
-    if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
     if (clickToEdit && editable) {
-      cellAttrs.onClick = this.handleEditingCell;
+      attrs.onClick = this.handleEditingCell;
     } else if (dbclickToEdit && editable) {
-      cellAttrs.onDoubleClick = this.handleEditingCell;
+      attrs.onDoubleClick = this.handleEditingCell;
     }
+
     return (
-      <td { ...cellAttrs }>
+      <td { ...attrs }>
         { typeof content === 'boolean' ? `${content}` : content }
       </td>
     );

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

@@ -102,6 +102,45 @@ class Row extends eventDelegater(Component) {
                   />
                 );
               }
+              // 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}` }
@@ -113,6 +152,7 @@ class Row extends eventDelegater(Component) {
                   editable={ editable }
                   clickToEdit={ mode === CLICK_TO_CELL_EDIT }
                   dbclickToEdit={ mode === DBCLICK_TO_CELL_EDIT }
+                  { ...cellAttrs }
                 />
               );
             }

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

@@ -1,6 +1,7 @@
 /* eslint no-empty: 0 */
 /* eslint no-param-reassign: 0 */
 /* eslint prefer-rest-params: 0 */
+import _ from 'underscore';
 
 function splitNested(str) {
   return [str]
@@ -38,22 +39,8 @@ function set(target, field, value, safe = false) {
   }, target);
 }
 
-function isFunction(obj) {
-  return obj && (typeof obj === 'function');
-}
-
-/**
- * Checks if `value` is the Object. the `Object` except `Function` and `Array.`
- *
- * @param {*} obj - The value gonna check
- */
-function isObject(obj) {
-  const type = typeof obj;
-  return obj !== null && type === 'object' && obj.constructor === Object;
-}
-
 function isEmptyObject(obj) {
-  if (!isObject(obj)) return false;
+  if (!_.isObject(obj)) return false;
 
   const hasOwnProperty = Object.prototype.hasOwnProperty;
   const keys = Object.keys(obj);
@@ -91,18 +78,9 @@ function debounce(func, wait, immediate) {
     timeout = setTimeout(later, wait || 0);
 
     if (callNow) {
-      func.appy(this, arguments);
+      func.apply(this, arguments);
     }
   };
 }
 
-export default {
+export default Object.assign(_, { get, set, isDefined, isEmptyObject, sleep, debounce });
-  get,
-  set,
-  isFunction,
-  isObject,
-  isEmptyObject,
-  isDefined,
-  sleep,
-  debounce
-};

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

@@ -46,6 +46,40 @@ describe('BootstrapTable', () => {
     });
   });
 
+  describe('getData', () => {
+    let instance;
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <BootstrapTable keyField="id" columns={ columns } data={ data } />);
+      instance = wrapper.instance();
+    });
+
+    it('should return props.data', () => {
+      expect(instance.getData()).toEqual(data);
+    });
+  });
+
+  describe('when props.registerExposedAPI is defined', () => {
+    const registerExposedAPI = jest.fn();
+    beforeEach(() => {
+      registerExposedAPI.mockClear();
+      wrapper = shallow(
+        <BootstrapTable
+          keyField="id"
+          columns={ columns }
+          data={ data }
+          registerExposedAPI={ registerExposedAPI }
+        />
+      );
+    });
+
+    it('should call props.registerExposedAPI correctly', () => {
+      expect(registerExposedAPI).toHaveBeenCalledTimes(1);
+      expect(registerExposedAPI.mock.calls[0][0].name).toEqual('getData');
+    });
+  });
+
   describe('when props.classes was defined', () => {
     const classes = 'foo';
 

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

@@ -79,362 +79,6 @@ describe('Cell', () => {
     });
   });
 
-  describe('when column.style prop is defined', () => {
-    let column;
-    const columnIndex = 1;
-    const rowIndex = 1;
-
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID'
-      };
-    });
-
-    describe('when style is an object', () => {
-      beforeEach(() => {
-        column.style = { backgroundColor: 'red' };
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      it('should render successfully', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('style')).toEqual(column.style);
-      });
-    });
-
-    describe('when style is a function', () => {
-      const returnStyle = { backgroundColor: 'red' };
-      let styleCallBack;
-
-      beforeEach(() => {
-        styleCallBack = sinon.stub()
-          .withArgs(row[column.dataField], row, rowIndex, columnIndex)
-          .returns(returnStyle);
-        column.style = styleCallBack;
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      afterEach(() => { styleCallBack.reset(); });
-
-      it('should render successfully', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('style')).toEqual(returnStyle);
-      });
-
-      it('should call custom style function correctly', () => {
-        expect(styleCallBack.callCount).toBe(1);
-        expect(
-          styleCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
-        ).toBe(true);
-      });
-    });
-  });
-
-  describe('when column.classes prop is defined', () => {
-    let column;
-    const columnIndex = 1;
-    const rowIndex = 1;
-
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID'
-      };
-    });
-
-    describe('when classes is an object', () => {
-      beforeEach(() => {
-        column.classes = 'td-test-class';
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      it('should render successfully', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.hasClass(column.classes)).toBe(true);
-      });
-    });
-
-    describe('when classes is a function', () => {
-      const returnClasses = 'td-test-class';
-      let classesCallBack;
-
-      beforeEach(() => {
-        classesCallBack = sinon.stub()
-          .withArgs(row[column.dataField], row, rowIndex, columnIndex)
-          .returns(returnClasses);
-        column.classes = classesCallBack;
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      afterEach(() => { classesCallBack.reset(); });
-
-      it('should render successfully', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.hasClass(returnClasses)).toBe(true);
-      });
-
-      it('should call custom classes function correctly', () => {
-        expect(classesCallBack.callCount).toBe(1);
-        expect(
-          classesCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
-        ).toBe(true);
-      });
-    });
-  });
-
-  describe('when column.title prop is defined', () => {
-    let column;
-    const columnIndex = 1;
-    const rowIndex = 1;
-
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID'
-      };
-    });
-
-    describe('when title is boolean', () => {
-      beforeEach(() => {
-        column.title = true;
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      it('should render title as cell value as default', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('title')).toEqual(row[column.dataField]);
-      });
-    });
-
-    describe('when title is custom function', () => {
-      const customTitle = 'test_title';
-      let titleCallBack;
-
-      beforeEach(() => {
-        titleCallBack = sinon.stub()
-          .withArgs(row[column.dataField], row, rowIndex, columnIndex)
-          .returns(customTitle);
-        column.title = titleCallBack;
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      it('should render title correctly by custom title function', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('title')).toBe(customTitle);
-      });
-
-      it('should call custom title function correctly', () => {
-        expect(titleCallBack.callCount).toBe(1);
-        expect(
-          titleCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
-        ).toBe(true);
-      });
-    });
-  });
-
-  describe('when column.events prop is defined', () => {
-    let column;
-    const columnIndex = 1;
-    const rowIndex = 1;
-
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID',
-        events: {
-          onClick: sinon.stub()
-        }
-      };
-
-      wrapper = shallow(
-        <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-    });
-
-    it('should attachs DOM event successfully', () => {
-      expect(wrapper.length).toBe(1);
-      expect(wrapper.find('td').prop('onClick')).toBeDefined();
-    });
-
-    it('event hook should be called when triggering', () => {
-      wrapper.find('td').simulate('click');
-      expect(column.events.onClick.callCount).toBe(1);
-    });
-  });
-
-  describe('when column.align prop is defined', () => {
-    let column;
-    const columnIndex = 1;
-    const rowIndex = 1;
-
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID'
-      };
-    });
-
-    describe('when align is string', () => {
-      beforeEach(() => {
-        column.align = 'center';
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      it('should render style.textAlign correctly', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('style').textAlign).toEqual(column.align);
-      });
-    });
-
-    describe('when align is custom function', () => {
-      const customAlign = 'center';
-      let alignCallBack;
-
-      beforeEach(() => {
-        alignCallBack = sinon.stub()
-          .withArgs(row[column.dataField], row, rowIndex, columnIndex)
-          .returns(customAlign);
-        column.align = alignCallBack;
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      it('should render style.textAlign correctly', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('style').textAlign).toEqual(customAlign);
-      });
-
-      it('should call custom headerAlign function correctly', () => {
-        expect(alignCallBack.callCount).toBe(1);
-        expect(
-          alignCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
-        ).toBe(true);
-      });
-    });
-  });
-
-  describe('when column.attrs prop is defined', () => {
-    let column;
-    const columnIndex = 1;
-    const rowIndex = 1;
-
-    beforeEach(() => {
-      column = {
-        dataField: 'id',
-        text: 'ID'
-      };
-    });
-
-    describe('when attrs is an object', () => {
-      it('should render column.attrs correctly', () => {
-        column.attrs = {
-          'data-test': 'test',
-          title: 'title',
-          className: 'attrs-class',
-          style: {
-            backgroundColor: 'attrs-style-test',
-            display: 'none',
-            textAlign: 'right'
-          }
-        };
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
-
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('data-test')).toEqual(column.attrs['data-test']);
-        expect(wrapper.find('td').prop('title')).toEqual(column.attrs.title);
-        expect(wrapper.hasClass(column.attrs.className)).toBe(true);
-        expect(wrapper.find('td').prop('style')).toEqual(column.attrs.style);
-        expect(wrapper.find('td').prop('style').textAlign).toEqual(column.attrs.style.textAlign);
-      });
-
-      describe('when column.title prop is defined', () => {
-        it('attrs.title should be overwrited', () => {
-          column.title = true;
-          column.attrs = { title: 'title' };
-
-          wrapper = shallow(
-            <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
-
-          expect(wrapper.find('td').prop('title')).toEqual(row[column.dataField]);
-        });
-      });
-
-      describe('when column.classes prop is defined', () => {
-        it('attrs.class should be overwrited', () => {
-          column.classes = 'td-test-class';
-          column.attrs = { className: 'attrs-class' };
-
-          wrapper = shallow(
-            <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
-
-          expect(wrapper.hasClass(column.classes)).toBe(true);
-        });
-      });
-
-      describe('when column.style prop is defined', () => {
-        it('attrs.style should be overwrited', () => {
-          column.style = { backgroundColor: 'red' };
-          column.attrs = { style: { backgroundColor: 'attrs-style-test' } };
-
-          wrapper = shallow(
-            <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
-
-          expect(wrapper.find('td').prop('style')).toEqual(column.style);
-        });
-      });
-
-      describe('when column.align prop is defined', () => {
-        it('attrs.style.textAlign should be overwrited', () => {
-          column.align = 'center';
-          column.attrs = { style: { textAlign: 'right' } };
-
-          wrapper = shallow(
-            <Cell row={ row } columnIndex={ columnIndex } rowIndex={ 1 } column={ column } />);
-
-          expect(wrapper.find('td').prop('style').textAlign).toEqual(column.align);
-        });
-      });
-    });
-
-    describe('when attrs is custom function', () => {
-      let attrsCallBack;
-      const customAttrs = {
-        title: 'title',
-        'data-test': 'test'
-      };
-
-      beforeEach(() => {
-        attrsCallBack = sinon.stub()
-          .withArgs(row[column.dataField], row, rowIndex, columnIndex)
-          .returns(customAttrs);
-        column.attrs = attrsCallBack;
-        wrapper = shallow(
-          <Cell row={ row } columnIndex={ columnIndex } rowIndex={ rowIndex } column={ column } />);
-      });
-
-      it('should render style.attrs correctly', () => {
-        expect(wrapper.length).toBe(1);
-        expect(wrapper.find('td').prop('data-test')).toEqual(customAttrs['data-test']);
-        expect(wrapper.find('td').prop('title')).toEqual(customAttrs.title);
-      });
-
-      it('should call custom attrs function correctly', () => {
-        expect(attrsCallBack.callCount).toBe(1);
-        expect(
-          attrsCallBack.calledWith(row[column.dataField], row, rowIndex, columnIndex)
-        ).toBe(true);
-      });
-    });
-  });
-
   describe('when editable prop is true', () => {
     let onStartCallBack;
     const rowIndex = 1;
@@ -528,4 +172,259 @@ describe('Cell', () => {
       });
     });
   });
+
+  describe('shouldComponentUpdate', () => {
+    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 } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, row: { id: 1, name: 'CDE' } };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when column.hidden 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, column: { ...column, hidden: true } };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.rowIndex 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, rowIndex: 2 };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.columnIndex 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, columnIndex: 2 };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.className is change', () => {
+      const column = { dataField: 'name', text: 'Product Name' };
+      beforeEach(() => {
+        props = {
+          row,
+          columnIndex: 1,
+          rowIndex: 1,
+          column,
+          className: 'test'
+        };
+        wrapper = shallow(
+          <Cell { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, className: null };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.title is change', () => {
+      const column = { dataField: 'name', text: 'Product Name' };
+      beforeEach(() => {
+        props = {
+          row,
+          columnIndex: 1,
+          rowIndex: 1,
+          column,
+          title: 'test'
+        };
+        wrapper = shallow(
+          <Cell { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, title: '123' };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.title 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, editable: true };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.clickToEdit 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, clickToEdit: true };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.dbclickToEdit 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, dbclickToEdit: true };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when props.style is change', () => {
+      const column = { dataField: 'name', text: 'Product Name' };
+      beforeEach(() => {
+        props = {
+          row,
+          columnIndex: 1,
+          rowIndex: 1,
+          column,
+          style: {}
+        };
+        wrapper = shallow(
+          <Cell { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, style: { color: 'red' } };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when column.formatExtraData is change', () => {
+      const column = { dataField: 'name', text: 'Product Name', formatExtraData: { a: 1 } };
+      beforeEach(() => {
+        props = {
+          row,
+          columnIndex: 1,
+          rowIndex: 1,
+          column
+        };
+        wrapper = shallow(
+          <Cell { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, column: { ...column, formatExtraData: { b: 2 } } };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when column.events is change', () => {
+      const column = { dataField: 'name', text: 'Product Name', events: { a: jest.fn() } };
+      beforeEach(() => {
+        props = {
+          row,
+          columnIndex: 1,
+          rowIndex: 1,
+          column
+        };
+        wrapper = shallow(
+          <Cell { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, column: { ...column, events: { b: jest.fn() } } };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+
+    describe('when column.attrs is change', () => {
+      const column = { dataField: 'name', text: 'Product Name', attrs: { 'data-att': 1 } };
+      beforeEach(() => {
+        props = {
+          row,
+          columnIndex: 1,
+          rowIndex: 1,
+          column
+        };
+        wrapper = shallow(
+          <Cell { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, column: { ...column, attrs: null } };
+        expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+      });
+    });
+  });
 });

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

@@ -8,7 +8,7 @@ import Const from '../src/const';
 import SelectionCell from '../src//row-selection/selection-cell';
 import mockBodyResolvedProps from './test-helpers/mock/body-resolved-props';
 
-const defaultColumns = [{
+let defaultColumns = [{
   dataField: 'id',
   text: 'ID'
 }, {
@@ -31,6 +31,19 @@ describe('Row', () => {
     price: 1000
   };
 
+  beforeEach(() => {
+    defaultColumns = [{
+      dataField: 'id',
+      text: 'ID'
+    }, {
+      dataField: 'name',
+      text: 'Name'
+    }, {
+      dataField: 'price',
+      text: 'Price'
+    }];
+  });
+
   describe('simplest row', () => {
     beforeEach(() => {
       wrapper = shallow(
@@ -502,7 +515,7 @@ describe('Row', () => {
     });
   });
 
-  describe('when cloumn.hidden is true', () => {
+  describe('when column.hidden is true', () => {
     beforeEach(() => {
       const newColumns = [{
         dataField: 'id',
@@ -870,4 +883,445 @@ describe('Row', () => {
       });
     });
   });
+
+  describe('when column.style prop is defined', () => {
+    let columns;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      columns = [...defaultColumns];
+    });
+
+    describe('when style is an object', () => {
+      beforeEach(() => {
+        columns[columnIndex].style = { backgroundColor: 'red' };
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.style).toEqual(columns[columnIndex].style);
+      });
+    });
+
+    describe('when style is a function', () => {
+      const returnStyle = { backgroundColor: 'red' };
+      let styleCallBack;
+
+      beforeEach(() => {
+        styleCallBack = sinon.stub().returns(returnStyle);
+        columns[columnIndex].style = styleCallBack;
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      afterEach(() => { styleCallBack.reset(); });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.style).toEqual(returnStyle);
+      });
+
+      it('should call custom style function correctly', () => {
+        expect(styleCallBack.callCount).toBe(1);
+        expect(
+          styleCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
+      });
+    });
+  });
+
+  describe('when column.classes prop is defined', () => {
+    let columns;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      columns = [...defaultColumns];
+    });
+
+    describe('when classes is an object', () => {
+      beforeEach(() => {
+        columns[columnIndex].classes = 'td-test-class';
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.className)
+          .toEqual(columns[columnIndex].classes);
+      });
+    });
+
+    describe('when classes is a function', () => {
+      const returnClasses = 'td-test-class';
+      let classesCallBack;
+
+      beforeEach(() => {
+        classesCallBack = sinon.stub().returns(returnClasses);
+        columns[columnIndex].classes = classesCallBack;
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      afterEach(() => { classesCallBack.reset(); });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.className).toEqual(returnClasses);
+      });
+
+      it('should call custom classes function correctly', () => {
+        expect(classesCallBack.callCount).toBe(1);
+        expect(
+          classesCallBack.calledWith(
+            row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
+      });
+    });
+  });
+
+  describe('when column.title prop is defined', () => {
+    let columns;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      columns = [...defaultColumns];
+    });
+
+    describe('when title is an string', () => {
+      beforeEach(() => {
+        columns[columnIndex].title = true;
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.title)
+          .toEqual(row[columns[columnIndex].dataField]);
+      });
+    });
+
+    describe('when title is a function', () => {
+      const returnTitle = 'test title';
+      let titleCallBack;
+
+      beforeEach(() => {
+        titleCallBack = sinon.stub().returns(returnTitle);
+        columns[columnIndex].title = titleCallBack;
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      afterEach(() => { titleCallBack.reset(); });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.title).toEqual(returnTitle);
+      });
+
+      it('should call custom title function correctly', () => {
+        expect(titleCallBack.callCount).toBe(1);
+        expect(
+          titleCallBack.calledWith(
+            row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
+      });
+    });
+  });
+
+  describe('when column.events prop is defined', () => {
+    let columns;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      columns = [...defaultColumns];
+      columns[columnIndex].events = {
+        onClick: sinon.stub()
+      };
+
+      wrapper = shallow(
+        <Row
+          { ...mockBodyResolvedProps }
+          keyField={ keyField }
+          rowIndex={ rowIndex }
+          columns={ columns }
+          row={ row }
+        />
+      );
+    });
+
+    it('should attachs DOM event successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.find(Cell).get(columnIndex).props.onClick).toBeDefined();
+    });
+  });
+
+  describe('when column.align prop is defined', () => {
+    let columns;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      columns = [...defaultColumns];
+    });
+
+    describe('when align is a string', () => {
+      beforeEach(() => {
+        columns[columnIndex].align = 'right';
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign)
+          .toEqual(columns[columnIndex].align);
+      });
+    });
+
+    describe('when align is a function', () => {
+      const returnAlign = 'right';
+      let alignCallBack;
+
+      beforeEach(() => {
+        alignCallBack = sinon.stub().returns(returnAlign);
+        columns[columnIndex].align = alignCallBack;
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      afterEach(() => { alignCallBack.reset(); });
+
+      it('should render Cell correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign).toEqual(returnAlign);
+      });
+
+      it('should call custom align function correctly', () => {
+        expect(alignCallBack.callCount).toBe(1);
+        expect(
+          alignCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
+      });
+    });
+  });
+
+  describe('when column.attrs prop is defined', () => {
+    let columns;
+    const columnIndex = 1;
+
+    beforeEach(() => {
+      columns = [...defaultColumns];
+    });
+
+    describe('when attrs is an object', () => {
+      it('should render Cell correctly', () => {
+        columns[columnIndex].attrs = {
+          'data-test': 'test',
+          title: 'title',
+          className: 'attrs-class',
+          style: {
+            backgroundColor: 'attrs-style-test',
+            display: 'none',
+            textAlign: 'right'
+          }
+        };
+
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props['data-test'])
+          .toEqual(columns[columnIndex].attrs['data-test']);
+        expect(wrapper.find(Cell).get(columnIndex).props.title)
+          .toEqual(columns[columnIndex].attrs.title);
+        expect(wrapper.find(Cell).get(columnIndex).props.className)
+          .toEqual(columns[columnIndex].attrs.className);
+        expect(wrapper.find(Cell).get(columnIndex).props.style)
+          .toEqual(columns[columnIndex].attrs.style);
+      });
+
+      describe('when column.title prop is defined', () => {
+        it('attrs.title should be overwrited', () => {
+          columns[columnIndex].title = true;
+          columns[columnIndex].attrs = { title: 'title' };
+
+          wrapper = shallow(
+            <Row
+              { ...mockBodyResolvedProps }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+              columns={ columns }
+              row={ row }
+            />
+          );
+
+          expect(wrapper.find(Cell).get(columnIndex).props.title)
+            .toEqual(row[columns[columnIndex].dataField]);
+        });
+      });
+
+      describe('when column.classes prop is defined', () => {
+        it('attrs.className should be overwrited', () => {
+          columns[columnIndex].classes = 'td-test-class';
+          columns[columnIndex].attrs = { className: 'attrs-class' };
+
+          wrapper = shallow(
+            <Row
+              { ...mockBodyResolvedProps }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+              columns={ columns }
+              row={ row }
+            />
+          );
+
+          expect(wrapper.find(Cell).get(columnIndex).props.className)
+            .toEqual(columns[columnIndex].classes);
+        });
+      });
+
+      describe('when column.style prop is defined', () => {
+        it('attrs.style should be overwrited', () => {
+          columns[columnIndex].style = { backgroundColor: 'red' };
+          columns[columnIndex].attrs = { style: { backgroundColor: 'attrs-style-test' } };
+
+          wrapper = shallow(
+            <Row
+              { ...mockBodyResolvedProps }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+              columns={ columns }
+              row={ row }
+            />
+          );
+
+          expect(wrapper.find(Cell).get(columnIndex).props.style)
+            .toEqual(columns[columnIndex].style);
+        });
+      });
+
+      describe('when column.align prop is defined', () => {
+        it('attrs.style.textAlign should be overwrited', () => {
+          columns[columnIndex].align = 'center';
+          columns[columnIndex].attrs = { style: { textAlign: 'right' } };
+
+          wrapper = shallow(
+            <Row
+              { ...mockBodyResolvedProps }
+              keyField={ keyField }
+              rowIndex={ rowIndex }
+              columns={ columns }
+              row={ row }
+            />
+          );
+
+          expect(wrapper.find(Cell).get(columnIndex).props.style.textAlign)
+            .toEqual(columns[columnIndex].align);
+        });
+      });
+    });
+
+    describe('when attrs is custom function', () => {
+      let attrsCallBack;
+      const customAttrs = {
+        'data-test': 'test',
+        title: 'title'
+      };
+
+      beforeEach(() => {
+        attrsCallBack = sinon.stub().returns(customAttrs);
+        columns[columnIndex].attrs = attrsCallBack;
+        wrapper = shallow(
+          <Row
+            { ...mockBodyResolvedProps }
+            keyField={ keyField }
+            rowIndex={ rowIndex }
+            columns={ columns }
+            row={ row }
+          />
+        );
+      });
+
+      it('should render style.attrs correctly', () => {
+        expect(wrapper.length).toBe(1);
+        expect(wrapper.find(Cell).get(columnIndex).props['data-test'])
+          .toEqual(customAttrs['data-test']);
+        expect(wrapper.find(Cell).get(columnIndex).props.title)
+          .toEqual(customAttrs.title);
+      });
+
+      it('should call custom attrs function correctly', () => {
+        expect(attrsCallBack.callCount).toBe(1);
+        expect(
+          attrsCallBack.calledWith(row[columns[columnIndex].dataField], row, rowIndex, columnIndex)
+        ).toBe(true);
+      });
+    });
+  });
 });

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

@@ -58,32 +58,6 @@ describe('Utils', () => {
     });
   });
 
-  describe('isObject', () => {
-    describe('when given Object', () => {
-      it('should return true', () => {
-        expect(_.isObject({})).toBe(true);
-      });
-    });
-
-    describe('when given Function', () => {
-      it('should return false', () => {
-        expect(_.isObject(() => 'test')).toBe(false);
-      });
-    });
-
-    describe('when given Array', () => {
-      it('should return false', () => {
-        expect(_.isObject([])).toBe(false);
-      });
-    });
-
-    describe('when given null', () => {
-      it('should return false', () => {
-        expect(_.isObject(null)).toBe(false);
-      });
-    });
-  });
-
   describe('isEmptyObject', () => {
     describe('when given empty Object', () => {
       it('should return true', () => {
@@ -98,14 +72,14 @@ describe('Utils', () => {
     });
 
     describe('when given Function', () => {
-      it('should return false', () => {
+      it('should return true', () => {
-        expect(_.isEmptyObject(() => 'test')).toBe(false);
+        expect(_.isEmptyObject(() => 'test')).toBe(true);
       });
     });
 
     describe('when given Array', () => {
-      it('should return false', () => {
+      it('should return true', () => {
-        expect(_.isEmptyObject([])).toBe(false);
+        expect(_.isEmptyObject([])).toBe(true);
       });
     });
 

yarn.lock

@@ -8286,6 +8286,10 @@ unc-path-regex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
+underscore@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
+
 underscore@~1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"