Publish

- react-bootstrap-table2-example@1.0.14
 - react-bootstrap-table2-filter@1.1.1
 - react-bootstrap-table2-paginator@2.0.1
 - react-bootstrap-table2-toolkit@1.1.2
 - react-bootstrap-table-next@2.0.1

docs/row-expand.md

@@ -15,6 +15,7 @@
 * [showExpandColumn](#showExpandColumn)
 * [onlyOneExpanding](#onlyOneExpanding)
 * [expandByColumnOnly](#expandByColumnOnly)
+* [expandColumnPosition](#expandColumnPosition)
 * [expandColumnRenderer](#expandColumnRenderer)
 * [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
 
@@ -153,3 +154,14 @@ const expandRow = {
   expandByColumnOnly: true
 };
 ```
+
+### <a name='expandColumnPosition'>expandRow.expandColumnPosition - [String]</a>
+Default is `left`. You can give this as `right` for rendering expand column in the right side.
+
+```js
+const expandRow = {
+  renderer: (row) => ...,
+  showExpandColumn: true,
+  expandColumnPosition: 'right'
+};
+```

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

@@ -0,0 +1,57 @@
+/* eslint no-console: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter({
+    onFilter: filterVal => console.log(`Filter Value: ${filterVal}`)
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  filter: textFilter({
+    onFilter: filterVal => console.log(\`Filter Value: $\{filterVal}\`)
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,190 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+// ...
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <PaginationProvider
+      pagination={
+        paginationFactory({
+          custom: true,
+          page,
+          sizePerPage,
+          totalSize
+        })
+      }
+    >
+      {
+        ({
+          paginationProps,
+          paginationTableProps
+        }) => (
+          <div>
+            <div>
+              <p>Current Page: { paginationProps.page }</p>
+              <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+            </div>
+            <div>
+              <PaginationListStandalone
+                { ...paginationProps }
+              />
+            </div>
+            <BootstrapTable
+              remote
+              keyField="id"
+              data={ data }
+              columns={ columns }
+              onTableChange={ onTableChange }
+              { ...paginationTableProps }
+            />
+          </div>
+        )
+      }
+    </PaginationProvider>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = (type, { page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+`;
+
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <PaginationProvider
+      pagination={
+        paginationFactory({
+          custom: true,
+          page,
+          sizePerPage,
+          totalSize
+        })
+      }
+    >
+      {
+        ({
+          paginationProps,
+          paginationTableProps
+        }) => (
+          <div>
+            <div>
+              <p>Current Page: { paginationProps.page }</p>
+              <p>Current SizePerPage: { paginationProps.sizePerPage }</p>
+            </div>
+            <div>
+              <PaginationListStandalone
+                { ...paginationProps }
+              />
+            </div>
+            <BootstrapTable
+              remote
+              keyField="id"
+              data={ data }
+              columns={ columns }
+              onTableChange={ onTableChange }
+              { ...paginationTableProps }
+            />
+          </div>
+        )
+      }
+    </PaginationProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+RemotePagination.propTypes = {
+  data: PropTypes.array.isRequired,
+  page: PropTypes.number.isRequired,
+  totalSize: PropTypes.number.isRequired,
+  sizePerPage: PropTypes.number.isRequired,
+  onTableChange: PropTypes.func.isRequired
+};
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = (type, { page, sizePerPage }) => {
+    const currentIndex = (page - 1) * sizePerPage;
+    setTimeout(() => {
+      this.setState(() => ({
+        page,
+        data: products.slice(currentIndex, currentIndex + sizePerPage),
+        sizePerPage
+      }));
+    }, 2000);
+  }
+
+  render() {
+    const { data, sizePerPage, page } = this.state;
+    return (
+      <RemotePagination
+        data={ data }
+        page={ page }
+        sizePerPage={ sizePerPage }
+        totalSize={ products.length }
+        onTableChange={ this.handleTableChange }
+      />
+    );
+  }
+}
+
+export default Container;

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

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

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

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

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

@@ -74,6 +74,7 @@ import ProgrammaticallyMultiSelectFilter from 'examples/column-filter/programmat
 import CustomFilter from 'examples/column-filter/custom-filter';
 import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
 import ClearAllFilters from 'examples/column-filter/clear-all-filters';
+import FilterHooks from 'examples/column-filter/filter-hooks';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -141,6 +142,7 @@ import ExpandColumn from 'examples/row-expand/expand-column';
 import OnlyExpandByColumn from 'examples/row-expand/expand-by-column-only.js';
 import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
 import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
+import ExpandColumnPosition from 'examples/row-expand/expand-column-position';
 import ExpandHooks from 'examples/row-expand/expand-hooks';
 
 // pagination
@@ -154,6 +156,7 @@ import CustomPageListTable from 'examples/pagination/custom-page-list';
 import StandalonePaginationList from 'examples/pagination/standalone-pagination-list';
 import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page';
 import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination';
+import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination';
 
 // search
 import SearchTable from 'examples/search';
@@ -273,7 +276,8 @@ storiesOf('Column Filter', module)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
   .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
-  .add('Clear All Filters', () => <ClearAllFilters />);
+  .add('Clear All Filters', () => <ClearAllFilters />)
+  .add('Filter Hooks', () => <FilterHooks />);
 
 storiesOf('Work on Rows', module)
   .addDecorator(bootstrapStyle())
@@ -346,6 +350,7 @@ storiesOf('Row Expand', module)
   .add('Only Expand by Indicator', () => <OnlyExpandByColumn />)
   .add('Expand Only One Row at The Same Time', () => <ExpandOnlyOne />)
   .add('Custom Expand Indicator', () => <CustomExpandColumn />)
+  .add('Expand Column Position', () => <ExpandColumnPosition />)
   .add('Expand Hooks', () => <ExpandHooks />);
 
 storiesOf('Pagination', module)
@@ -359,7 +364,8 @@ storiesOf('Pagination', module)
   .add('Custom SizePerPage', () => <CustomSizePerPageTable />)
   .add('Standalone Pagination List', () => <StandalonePaginationList />)
   .add('Standalone SizePerPage Dropdown', () => <StandaloneSizePerPage />)
-  .add('Fully Custom Pagination', () => <FullyCustomPaginationTable />);
+  .add('Fully Custom Pagination', () => <FullyCustomPaginationTable />)
+  .add('Remote Fully Custom Pagination', () => <RemoteStandalonePaginationTable />);
 
 storiesOf('Table Search', module)
   .addDecorator(bootstrapStyle())

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

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

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

@@ -64,6 +64,10 @@ export default (
           return;
         }
 
+        if (filter.props.onFilter) {
+          filter.props.onFilter(filterVal);
+        }
+
         this.forceUpdate();
       };
     }

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

@@ -44,7 +44,8 @@ describe('FilterContext', () => {
   const handleFilterChange = jest.fn();
 
   function shallowContext(
-    enableRemote = false
+    enableRemote = false,
+    tableColumns = columns
   ) {
     mockBase.mockReset();
     handleFilterChange.mockReset();
@@ -56,7 +57,7 @@ describe('FilterContext', () => {
 
     return (
       <FilterContext.Provider
-        columns={ columns }
+        columns={ tableColumns }
         data={ data }
       >
         <FilterContext.Consumer>
@@ -225,6 +226,32 @@ describe('FilterContext', () => {
       });
     });
 
+    describe('if filter.props.onFilter is defined', () => {
+      const filterVal = '3';
+      const onFilter = jest.fn();
+      const customColumns = columns.map((column, i) => {
+        if (i === 1) {
+          return {
+            ...column,
+            filter: textFilter({ onFilter })
+          };
+        }
+        return column;
+      });
+
+      beforeEach(() => {
+        wrapper = shallow(shallowContext(false, customColumns));
+        wrapper.render();
+        instance = wrapper.instance();
+      });
+
+      it('should call filter.props.onFilter correctly', () => {
+        instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+        expect(onFilter).toHaveBeenCalledTimes(1);
+        expect(onFilter).toHaveBeenCalledWith(filterVal);
+      });
+    });
+
     describe('combination', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext());

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

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table2-paginator",
-  "version": "2.0.0",
+  "version": "2.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

@@ -135,8 +135,8 @@ export default ExtendBase =>
     calculateSizePerPageStatus() {
       const { sizePerPageList } = this.props;
       return sizePerPageList.map((_sizePerPage) => {
-        const pageText = _sizePerPage.text || _sizePerPage;
+        const pageText = typeof _sizePerPage.text !== 'undefined' ? _sizePerPage.text : _sizePerPage;
-        const pageNumber = _sizePerPage.value || _sizePerPage;
+        const pageNumber = typeof _sizePerPage.value !== 'undefined' ? _sizePerPage.value : _sizePerPage;
         return {
           text: `${pageText}`,
           page: pageNumber

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

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

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

@@ -25,13 +25,19 @@ export default Base =>
       let data;
       if (typeof source !== 'undefined') {
         data = source;
+      } else if (options.exportAll) {
+        data = this.props.data;
       } else {
-        data = options.exportAll ? this.props.data : this.getData();
+        const payload = {};
+        this.tableExposedAPIEmitter.emit('get.table.data', payload);
+        data = payload.result;
       }
 
       // filter data
       if (options.onlyExportSelection) {
-        const selections = this.getSelected();
+        const payload = {};
+        this.tableExposedAPIEmitter.emit('get.selected.rows', payload);
+        const selections = payload.result;
         data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
       }
       const content = transform(data, meta, this._.get, options);

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

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

packages/react-bootstrap-table2/package.json

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

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

@@ -14,13 +14,10 @@ class BootstrapTable extends PropsBaseResolver(Component) {
   constructor(props) {
     super(props);
     this.validateProps();
-    if (props.registerExposedAPI) {
-      props.registerExposedAPI(this.getData);
-    }
   }
 
   // Exposed APIs
-  getData() {
+  getData = () => {
     return this.visibleRows();
   }
 
@@ -161,7 +158,11 @@ BootstrapTable.propTypes = {
     onlyOneExpanding: PropTypes.bool,
     expandByColumnOnly: PropTypes.bool,
     expandColumnRenderer: PropTypes.func,
-    expandHeaderColumnRenderer: PropTypes.func
+    expandHeaderColumnRenderer: PropTypes.func,
+    expandColumnPosition: PropTypes.oneOf([
+      Const.INDICATOR_POSITION_LEFT,
+      Const.INDICATOR_POSITION_RIGHT
+    ])
   }),
   rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   rowEvents: PropTypes.object,

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

@@ -6,5 +6,7 @@ export default {
   ROW_SELECT_DISABLED: 'ROW_SELECT_DISABLED',
   CHECKBOX_STATUS_CHECKED: 'checked',
   CHECKBOX_STATUS_INDETERMINATE: 'indeterminate',
-  CHECKBOX_STATUS_UNCHECKED: 'unchecked'
+  CHECKBOX_STATUS_UNCHECKED: 'unchecked',
+  INDICATOR_POSITION_LEFT: 'left',
+  INDICATOR_POSITION_RIGHT: 'right'
 };

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

@@ -1,6 +1,8 @@
 /* eslint no-return-assign: 0 */
+/* eslint no-param-reassign: 0 */
 /* eslint class-methods-use-this: 0 */
 import React, { Component } from 'react';
+import EventEmitter from 'events';
 import _ from '../utils';
 import createDataContext from './data-context';
 import createSortContext from './sort-context';
@@ -16,6 +18,13 @@ const withContext = Base =>
       super(props);
       this.DataContext = createDataContext();
 
+      if (props.registerExposedAPI) {
+        const exposedAPIEmitter = new EventEmitter();
+        exposedAPIEmitter.on('get.table.data', payload => payload.result = this.table.getData());
+        exposedAPIEmitter.on('get.selected.rows', payload => payload.result = this.selectionContext.getSelected());
+        props.registerExposedAPI(exposedAPIEmitter);
+      }
+
       if (props.columns.filter(col => col.sort).length > 0) {
         this.SortContext = createSortContext(
           dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
@@ -255,9 +264,8 @@ const withContext = Base =>
     }
 
     render() {
-      const { keyField, columns, bootstrap4, registerExposedAPI } = this.props;
+      const { keyField, columns, bootstrap4 } = this.props;
       const baseProps = { keyField, columns };
-      if (registerExposedAPI) baseProps.registerExposedAPI = registerExposedAPI;
 
       let base = this.renderBase();
 

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

@@ -14,14 +14,6 @@ class SelectionProvider extends React.Component {
     keyField: PropTypes.string.isRequired
   }
 
-  constructor(props) {
-    super(props);
-    if (props.registerExposedAPI) {
-      const getSelected = () => this.getSelected();
-      props.registerExposedAPI(getSelected);
-    }
-  }
-
   state = { selected: this.props.selectRow.selected || [] };
 
   componentWillReceiveProps(nextProps) {

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

@@ -7,6 +7,7 @@ import SelectionHeaderCell from './row-selection/selection-header-cell';
 import ExpandHeaderCell from './row-expand/expand-header-cell';
 import withHeaderSelection from './row-selection/selection-header-cell-consumer';
 import withHeaderExpansion from './row-expand/expand-header-cell-consumer';
+import Const from './const';
 
 const Header = (props) => {
   const {
@@ -32,15 +33,11 @@ const Header = (props) => {
     SelectionHeaderCellComp = withHeaderSelection(SelectionHeaderCell);
   }
 
-  return (
+  const isRenderExpandColumnInLeft = (
-    <thead>
+    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
-      <tr className={ className }>
+  ) => expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
-        <ExpansionHeaderCellComp />
+
-        {
+  const childrens = [
-          !selectRow.hideSelectColumn ?
-            <SelectionHeaderCellComp /> : null
-        }
-        {
     columns.map((column, i) => {
       if (!column.hidden) {
         const currSort = column.dataField === sortField;
@@ -61,7 +58,24 @@ const Header = (props) => {
       }
       return false;
     })
+  ];
+
+  if (!selectRow.hideSelectColumn) {
+    childrens.unshift(<SelectionHeaderCellComp key="selection" />);
   }
+
+  if (expandRow.showExpandColumn) {
+    if (isRenderExpandColumnInLeft(expandRow.expandColumnPosition)) {
+      childrens.unshift(<ExpansionHeaderCellComp key="expansion" />);
+    } else {
+      childrens.push(<ExpansionHeaderCellComp key="expansion" />);
+    }
+  }
+
+  return (
+    <thead>
+      <tr className={ className }>
+        { childrens }
       </tr>
     </thead>
   );

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

@@ -1,3 +1,4 @@
+/* eslint class-methods-use-this: 0 */
 /* eslint react/prop-types: 0 */
 /* eslint no-plusplus: 0 */
 import React from 'react';
@@ -8,6 +9,7 @@ import SelectionCell from '../row-selection/selection-cell';
 import shouldUpdater from './should-updater';
 import eventDelegater from './event-delegater';
 import RowPureContent from './row-pure-content';
+import Const from '../const';
 
 export default class RowAggregator extends shouldUpdater(eventDelegater(React.Component)) {
   static propTypes = {
@@ -43,6 +45,12 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
     return this.shouldUpdateRowContent;
   }
 
+  isRenderExpandColumnInLeft(
+    expandColumnPosition = Const.INDICATOR_POSITION_LEFT
+  ) {
+    return expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+  }
+
   render() {
     const {
       row,
@@ -64,7 +72,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
     } = this.props;
     const key = _.get(row, keyField);
     const { hideSelectColumn, clickToSelect } = selectRow;
-    const { showExpandColumn } = expandRow;
+    const { showExpandColumn, expandColumnPosition } = expandRow;
 
     const newAttrs = this.delegate({ ...attrs });
     if (clickToSelect || !!expandRow.renderer) {
@@ -73,39 +81,9 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
 
     let tabIndexStart = (rowIndex * visibleColumnSize) + 1;
 
-    return (
+    const childrens = [(
-      <tr
-        style={ style }
-        className={ className }
-        { ...newAttrs }
-      >
-        {
-          showExpandColumn ? (
-            <ExpandCell
-              { ...expandRow }
-              rowKey={ key }
-              rowIndex={ rowIndex }
-              expanded={ expanded }
-              expandable={ expandable }
-              tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
-            />
-          ) : null
-        }
-        {
-          !hideSelectColumn
-            ? (
-              <SelectionCell
-                { ...selectRow }
-                rowKey={ key }
-                rowIndex={ rowIndex }
-                selected={ selected }
-                disabled={ !selectable }
-                tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
-              />
-            )
-            : null
-        }
       <RowPureContent
+        key="row"
         row={ row }
         columns={ columns }
         keyField={ keyField }
@@ -114,6 +92,48 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
         tabIndexStart={ tabIndexCell ? tabIndexStart : -1 }
         { ...rest }
       />
+    )];
+
+    if (!hideSelectColumn) {
+      childrens.unshift((
+        <SelectionCell
+          { ...selectRow }
+          key="selection-cell"
+          rowKey={ key }
+          rowIndex={ rowIndex }
+          selected={ selected }
+          disabled={ !selectable }
+          tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
+        />
+      ));
+    }
+
+    if (showExpandColumn) {
+      const expandCell = (
+        <ExpandCell
+          { ...expandRow }
+          key="expand-cell"
+          rowKey={ key }
+          rowIndex={ rowIndex }
+          expanded={ expanded }
+          expandable={ expandable }
+          tabIndex={ tabIndexCell ? tabIndexStart++ : -1 }
+        />
+      );
+      if (this.isRenderExpandColumnInLeft(expandColumnPosition)) {
+        childrens.unshift(expandCell);
+      } else {
+        childrens.push(expandCell);
+      }
+    }
+
+    return (
+      <tr
+        style={ style }
+        className={ className }
+        { ...newAttrs }
+      >
+        { childrens }
       </tr>
     );
   }

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

@@ -20,6 +20,19 @@ export default ExtendBase =>
       );
     }
 
+    // Only use for simple-row
+    shouldUpdateByColumnsForSimpleCheck(nextProps) {
+      if (this.props.columns.length !== nextProps.columns.length) {
+        return true;
+      }
+      for (let i = 0; i < this.props.columns.length; i += 1) {
+        if (this.props.columns[i].hidden !== nextProps.columns[i].hidden) {
+          return true;
+        }
+      }
+      return false;
+    }
+
     shouldUpdatedByNormalProps(nextProps) {
       const shouldUpdate =
         this.props.rowIndex !== nextProps.rowIndex ||

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

@@ -15,7 +15,8 @@ class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
 
   shouldComponentUpdate(nextProps) {
     this.shouldUpdateRowContent = false;
-    this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+    this.shouldUpdateRowContent =
+      this.shouldUpdateChild(nextProps) || this.shouldUpdateByColumnsForSimpleCheck(nextProps);
     if (this.shouldUpdateRowContent) return true;
 
     return this.shouldUpdatedBySelfProps(nextProps);

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

@@ -60,26 +60,6 @@ describe('BootstrapTable', () => {
     });
   });
 
-  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/contexts/index.test.js

@@ -225,4 +225,31 @@ describe('Context', () => {
       expect(wrapper.instance().PaginationContext).toBeDefined();
     });
   });
+
+  describe('if registerExposedAPI props is defined', () => {
+    const registerExposedAPI = jest.fn();
+    beforeEach(() => {
+      const PaginationContext = React.createContext();
+      const paginator = {
+        createContext: jest.fn().mockReturnValue({
+          Provider: PaginationContext.Provider,
+          Consumer: PaginationContext.Consumer
+        })
+      };
+      wrapper = shallow(
+        <BootstrapTable
+          keyField={ keyField }
+          data={ data }
+          columns={ columns }
+          pagination={ paginator }
+          registerExposedAPI={ registerExposedAPI }
+        />
+      );
+      wrapper.render();
+    });
+
+    it('should call props.registerExposedAPI correctly', () => {
+      expect(registerExposedAPI).toHaveBeenCalledTimes(1);
+    });
+  });
 });

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

@@ -254,5 +254,33 @@ describe('Header', () => {
         expect(wrapper.find(ExpandHeaderCell).length).toBe(1);
       });
     });
+
+    describe('if props.expandRow.showExpandColumn is true but props.expandRow.expandColumnPosition is "right"', () => {
+      beforeEach(() => {
+        const expandRow = {
+          renderer: jest.fn(),
+          showExpandColumn: true,
+          expandColumnPosition: Const.INDICATOR_POSITION_RIGHT
+        };
+        wrapper = mount(
+          <ExpansionContext.Provider
+            data={ data }
+            keyField={ keyField }
+            expandRow={ expandRow }
+          >
+            <Header
+              { ...mockHeaderResolvedProps }
+              columns={ columns }
+              expandRow={ expandRow }
+            />
+          </ExpansionContext.Provider>
+        );
+      });
+
+      it('should render expansion column correctly', () => {
+        const header = wrapper.find(Header).children();
+        expect(header.children().children().last().find(ExpandHeaderCell)).toHaveLength(1);
+      });
+    });
   });
 });

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

@@ -9,6 +9,7 @@ import bindExpansion from '../../src/row-expand/row-consumer';
 import ExpandCell from '../../src/row-expand/expand-cell';
 import SelectionCell from '../../src/row-selection/selection-cell';
 import RowAggregator from '../../src/row/aggregate-row';
+import Const from '../../src/const';
 
 describe('Row Aggregator', () => {
   let wrapper;
@@ -157,6 +158,27 @@ describe('Row Aggregator', () => {
         expect(expandCell.props().expanded).toEqual(rowAggregator.props().expanded);
       });
     });
+
+    describe('if props.expandRow.showExpandColumn is true but props.expandRow.expandColumnPosition is "right"', () => {
+      beforeEach(() => {
+        const expandRow = {
+          renderer: jest.fn(),
+          showExpandColumn: true,
+          expandColumnPosition: Const.INDICATOR_POSITION_RIGHT
+        };
+        wrapper = mount(
+          <ExpansionContext.Provider data={ data } keyField={ keyField } expandRow={ expandRow }>
+            <RowAggregatorWithExpansion { ...getBaseProps() } />
+          </ExpansionContext.Provider>
+        );
+      });
+
+      it('should render expansion column correctly', () => {
+        rowAggregator = wrapper.find(RowAggregator);
+        expect(rowAggregator).toHaveLength(1);
+        expect(rowAggregator.children().children().last().type()).toEqual(ExpandCell);
+      });
+    });
   });
 
   describe('createClickEventHandler', () => {

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

@@ -104,6 +104,50 @@ describe('Row shouldUpdater', () => {
     });
   });
 
+  describe('shouldUpdateByColumnsForSimpleCheck', () => {
+    describe('when nextProps.columns.length is not eq props.columns.length', () => {
+      beforeEach(() => {
+        props = {
+          columns: [{ dataField: 'price', text: 'Price' }]
+        };
+        wrapper = shallow(<DummyComponent { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, columns: [...props.columns, { dataField: 'name', text: 'Name' }] };
+        expect(wrapper.instance().shouldUpdateByColumnsForSimpleCheck(nextProps)).toBeTruthy();
+      });
+    });
+
+    describe('when any nextProps.columns.hidden is change', () => {
+      beforeEach(() => {
+        props = {
+          columns: [{ dataField: 'price', text: 'Price' }]
+        };
+        wrapper = shallow(<DummyComponent { ...props } />);
+      });
+
+      it('should return true', () => {
+        nextProps = { ...props, columns: [{ dataField: 'price', text: 'Price', hidden: true }] };
+        expect(wrapper.instance().shouldUpdateByColumnsForSimpleCheck(nextProps)).toBeTruthy();
+      });
+    });
+
+    describe('if any nextProps.columns.hidden is not change and column length is same', () => {
+      beforeEach(() => {
+        props = {
+          columns: [{ dataField: 'price', text: 'Price' }]
+        };
+        wrapper = shallow(<DummyComponent { ...props } />);
+      });
+
+      it('should return false', () => {
+        nextProps = { ...props, columns: [...props.columns] };
+        expect(wrapper.instance().shouldUpdateByColumnsForSimpleCheck(nextProps)).toBeFalsy();
+      });
+    });
+  });
+
   describe('shouldUpdatedByNormalProps', () => {
     describe('when nextProps.rowIndex is not eq props.rowIndex', () => {
       beforeEach(() => {