fix #140

Implement remote pagination

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

@@ -0,0 +1,133 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table2';
+import paginator 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-table2';
+import paginator from 'react-bootstrap-table2-paginator';
+// ...
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+  <div>
+    <BootstrapTable
+      remote
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginator({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
+
+class Container extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      page: 1,
+      data: products.slice(0, 10),
+      sizePerPage: 10
+    };
+  }
+
+  handleTableChange = ({ 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>
+    <BootstrapTable
+      remote
+      keyField="id"
+      data={ data }
+      columns={ columns }
+      pagination={ paginator({ page, sizePerPage, totalSize }) }
+      onTableChange={ onTableChange }
+    />
+    <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 = ({ 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/stories/index.js

@@ -72,6 +72,7 @@ import HideSelectionColumnTable from 'examples/row-selection/hide-selection-colu
 import PaginationTable from 'examples/pagination';
 import PaginationHooksTable from 'examples/pagination/pagination-hooks';
 import CustomPaginationTable from 'examples/pagination/custom-pagination';
+import RemotePaginationTable from 'examples/pagination/remote-pagination';
 
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -153,4 +154,5 @@ storiesOf('Row Selection', module)
 storiesOf('Pagination', module)
   .add('Basic Pagination Table', () => <PaginationTable />)
   .add('Pagination Hooks', () => <PaginationHooksTable />)
-  .add('Custom Pagination', () => <CustomPaginationTable />);
+  .add('Custom Pagination', () => <CustomPaginationTable />)
+  .add('Remote Pagination', () => <RemotePaginationTable />);

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

@@ -17,17 +17,46 @@ const wrapperFactory = baseElement =>
       this.handleChangePage = this.handleChangePage.bind(this);
       this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
 
+      let currPage;
+      let currSizePerPage;
       const options = props.pagination.options || {};
-      const currPage = options.pageStartIndex || Const.PAGE_START_INDEX;
       const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
-      const currSizePerPage = typeof sizePerPageList[0] === 'object' ? sizePerPageList[0].value : sizePerPageList[0];
+
+      // initialize current page
+      if (typeof options.page !== 'undefined') {
+        currPage = options.page;
+      } else if (typeof options.pageStartIndex !== 'undefined') {
+        currPage = options.pageStartIndex;
+      } else {
+        currPage = Const.PAGE_START_INDEX;
+      }
+
+      // initialize current sizePerPage
+      if (typeof options.sizePerPage !== 'undefined') {
+        currSizePerPage = options.sizePerPage;
+      } else if (typeof sizePerPageList[0] === 'object') {
+        currSizePerPage = sizePerPageList[0].value;
+      } else {
+        currSizePerPage = sizePerPageList[0];
+      }
+
       this.state = { currPage, currSizePerPage };
     }
 
+    isRemote() {
+      const { remote } = this.props;
+      return remote === true || (typeof remote === 'object' && remote.pagination);
+    }
+
     handleChangePage(currPage) {
-      const { pagination: { options } } = this.props;
+      const { currSizePerPage } = this.state;
+      const { pagination: { options }, onRemotePageChange } = this.props;
       if (options.onPageChange) {
-        options.onPageChange(currPage, this.state.currSizePerPage);
+        options.onPageChange(currPage, currSizePerPage);
+      }
+      if (this.isRemote()) {
+        onRemotePageChange(currPage, currSizePerPage);
+        return;
       }
       this.setState(() => {
         return {
@@ -37,10 +66,14 @@ const wrapperFactory = baseElement =>
     }
 
     handleChangeSizePerPage(currSizePerPage, currPage) {
-      const { pagination: { options } } = this.props;
+      const { pagination: { options }, onRemotePageChange } = this.props;
       if (options.onSizePerPageChange) {
         options.onSizePerPageChange(currSizePerPage, currPage);
       }
+      if (this.isRemote()) {
+        onRemotePageChange(currPage, currSizePerPage);
+        return;
+      }
       this.setState(() => {
         return {
           currPage,
@@ -60,25 +93,31 @@ const wrapperFactory = baseElement =>
         Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
       const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
         Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
+      const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+        Const.PAGE_START_INDEX : options.pageStartIndex;
+
+      const data = this.isRemote() ?
+        this.props.data :
+        store.getByCurrPage(currPage, currSizePerPage, pageStartIndex);
 
       const base = baseElement({
         ...this.props,
         key: 'table',
-        data: store.getByCurrPage(currPage, currSizePerPage)
+        data
       });
 
       return [
         base,
         <Pagination
           key="pagination"
-          dataSize={ this.props.store.getDataSize() }
+          dataSize={ options.totalSize || store.getDataSize() }
           currPage={ currPage }
           currSizePerPage={ currSizePerPage }
           onPageChange={ this.handleChangePage }
           onSizePerPageChange={ this.handleChangeSizePerPage }
           sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
           paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
-          pageStartIndex={ options.pageStartIndex || Const.PAGE_START_INDEX }
+          pageStartIndex={ pageStartIndex }
           withFirstAndLast={ withFirstAndLast }
           alwaysShowAllBtns={ alwaysShowAllBtns }
           hideSizePerPage={ hideSizePerPage }

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

@@ -39,15 +39,21 @@ describe('Wrapper', () => {
 
   const pureTable = props => (<BootstrapTable { ...props } />);
 
+  const createPaginationWrapper = (props, renderFragment = true) => {
+    PaginationWrapper = wrapperFactory(pureTable);
+    wrapper = shallow(<PaginationWrapper { ...props } />);
+    instance = wrapper.instance();
+    if (renderFragment) {
+      const fragment = instance.render();
+      wrapper = shallow(<div>{ fragment }</div>);
+    }
+  };
+
   describe('default pagination', () => {
     const props = createTableProps();
 
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering correctly', () => {
@@ -92,15 +98,64 @@ describe('Wrapper', () => {
     });
   });
 
+  describe('when options.page is defined', () => {
+    const page = 3;
+    const props = createTableProps({ options: { page } });
+    beforeEach(() => {
+      createPaginationWrapper(props);
+    });
+
+    it('should setting correct state.currPage', () => {
+      expect(instance.state.currPage).toEqual(page);
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(wrapper.length).toBe(1);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('currPage')).toEqual(page);
+    });
+  });
+
+  describe('when options.sizePerPage is defined', () => {
+    const sizePerPage = 30;
+    const props = createTableProps({ options: { sizePerPage } });
+    beforeEach(() => {
+      createPaginationWrapper(props);
+    });
+
+    it('should setting correct state.currPage', () => {
+      expect(instance.state.currSizePerPage).toEqual(sizePerPage);
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(wrapper.length).toBe(1);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
+    });
+  });
+
+  describe('when options.totalSize is defined', () => {
+    const totalSize = 100;
+    const props = createTableProps({ options: { totalSize } });
+    beforeEach(() => {
+      createPaginationWrapper(props);
+    });
+
+    it('should rendering Pagination correctly', () => {
+      const pagination = wrapper.find(Pagination);
+      expect(wrapper.length).toBe(1);
+      expect(pagination.length).toBe(1);
+      expect(pagination.prop('dataSize')).toEqual(totalSize);
+    });
+  });
+
   describe('when options.pageStartIndex is defined', () => {
     const pageStartIndex = -1;
     const props = createTableProps({ options: { pageStartIndex } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should setting correct state.currPage', () => {
@@ -119,11 +174,7 @@ describe('Wrapper', () => {
     const sizePerPageList = [10, 40];
     const props = createTableProps({ options: { sizePerPageList } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -138,11 +189,7 @@ describe('Wrapper', () => {
     const paginationSize = 10;
     const props = createTableProps({ options: { paginationSize } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -157,11 +204,7 @@ describe('Wrapper', () => {
     const withFirstAndLast = false;
     const props = createTableProps({ options: { withFirstAndLast } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -176,11 +219,7 @@ describe('Wrapper', () => {
     const alwaysShowAllBtns = true;
     const props = createTableProps({ options: { alwaysShowAllBtns } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -195,11 +234,7 @@ describe('Wrapper', () => {
     const firstPageText = '1st';
     const props = createTableProps({ options: { firstPageText } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -214,11 +249,7 @@ describe('Wrapper', () => {
     const prePageText = 'PRE';
     const props = createTableProps({ options: { prePageText } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -233,11 +264,7 @@ describe('Wrapper', () => {
     const nextPageText = 'NEXT';
     const props = createTableProps({ options: { nextPageText } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -252,11 +279,7 @@ describe('Wrapper', () => {
     const lastPageText = 'nth';
     const props = createTableProps({ options: { lastPageText } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -271,11 +294,7 @@ describe('Wrapper', () => {
     const firstPageTitle = '1st';
     const props = createTableProps({ options: { firstPageTitle } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -290,11 +309,7 @@ describe('Wrapper', () => {
     const prePageTitle = 'PRE';
     const props = createTableProps({ options: { prePageTitle } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -309,11 +324,7 @@ describe('Wrapper', () => {
     const nextPageTitle = 'NEXT';
     const props = createTableProps({ options: { nextPageTitle } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -328,11 +339,7 @@ describe('Wrapper', () => {
     const lastPageTitle = 'nth';
     const props = createTableProps({ options: { lastPageTitle } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -347,11 +354,7 @@ describe('Wrapper', () => {
     const hideSizePerPage = true;
     const props = createTableProps({ options: { hideSizePerPage } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -366,11 +369,7 @@ describe('Wrapper', () => {
     const hidePageListOnlyOnePage = true;
     const props = createTableProps({ options: { hidePageListOnlyOnePage } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
-      const fragment = instance.render();
-      wrapper = shallow(<div>{ fragment }</div>);
+      createPaginationWrapper(props);
     });
 
     it('should rendering Pagination correctly', () => {
@@ -385,9 +384,7 @@ describe('Wrapper', () => {
     const newPage = 3;
     const props = createTableProps({ options: { onPageChange: sinon.stub() } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
+      createPaginationWrapper(props, false);
       instance.handleChangePage(newPage);
     });
 
@@ -404,6 +401,25 @@ describe('Wrapper', () => {
       expect(onPageChange.calledOnce).toBeTruthy();
       expect(onPageChange.calledWith(newPage, instance.state.currSizePerPage)).toBeTruthy();
     });
+
+    describe('when pagination remote is enable', () => {
+      beforeEach(() => {
+        props.remote = true;
+        props.onRemotePageChange = sinon.stub();
+        createPaginationWrapper(props, false);
+        instance.handleChangePage(newPage);
+      });
+
+      it('should not setting state.currPage', () => {
+        expect(instance.state.currPage).not.toEqual(newPage);
+      });
+
+      it('should calling options.onRemotePageChange correctly', () => {
+        expect(props.onRemotePageChange.calledOnce).toBeTruthy();
+        expect(props.onRemotePageChange.calledWith(
+          newPage, instance.state.currSizePerPage)).toBeTruthy();
+      });
+    });
   });
 
   describe('handleChangeSizePerPage', () => {
@@ -411,9 +427,7 @@ describe('Wrapper', () => {
     const newSizePerPage = 30;
     const props = createTableProps({ options: { onSizePerPageChange: sinon.stub() } });
     beforeEach(() => {
-      PaginationWrapper = wrapperFactory(pureTable);
-      wrapper = shallow(<PaginationWrapper { ...props } />);
-      instance = wrapper.instance();
+      createPaginationWrapper(props, false);
       instance.handleChangeSizePerPage(newSizePerPage, newPage);
     });
 
@@ -431,5 +445,85 @@ describe('Wrapper', () => {
       expect(onSizePerPageChange.calledOnce).toBeTruthy();
       expect(onSizePerPageChange.calledWith(newSizePerPage, newPage)).toBeTruthy();
     });
+
+    describe('when pagination remote is enable', () => {
+      beforeEach(() => {
+        props.remote = true;
+        props.onRemotePageChange = sinon.stub();
+        createPaginationWrapper(props, false);
+        instance.handleChangeSizePerPage(newSizePerPage, newPage);
+      });
+
+      it('should not setting state.currPage', () => {
+        expect(instance.state.currPage).not.toEqual(newPage);
+        expect(instance.state.currSizePerPage).not.toEqual(newSizePerPage);
+      });
+
+      it('should calling options.onRemotePageChange correctly', () => {
+        expect(props.onRemotePageChange.calledOnce).toBeTruthy();
+        expect(props.onRemotePageChange.calledWith(newPage, newSizePerPage)).toBeTruthy();
+      });
+    });
+  });
+
+  describe('isRemote', () => {
+    let result;
+    describe('when options.remote is true', () => {
+      const props = createTableProps();
+      props.remote = true;
+
+      beforeEach(() => {
+        createPaginationWrapper(props, false);
+        result = instance.isRemote();
+      });
+
+      it('should return true', () => {
+        expect(result).toBeTruthy();
+      });
+    });
+
+    describe('when options.remote is false', () => {
+      const props = createTableProps();
+      props.remote = false;
+
+      beforeEach(() => {
+        createPaginationWrapper(props, false);
+        result = instance.isRemote();
+      });
+
+      it('should return false', () => {
+        expect(result).toBeFalsy();
+      });
+    });
+
+    describe('when options.remote.pagination is defined as true', () => {
+      const props = createTableProps();
+      props.remote = {};
+      props.remote.pagination = true;
+
+      beforeEach(() => {
+        createPaginationWrapper(props, false);
+        result = instance.isRemote();
+      });
+
+      it('should return true', () => {
+        expect(result).toBeTruthy();
+      });
+    });
+
+    describe('when options.remote.pagination is defined as false', () => {
+      const props = createTableProps();
+      props.remote = {};
+      props.remote.pagination = false;
+
+      beforeEach(() => {
+        createPaginationWrapper(props, false);
+        result = instance.isRemote();
+      });
+
+      it('should return false', () => {
+        expect(result).toBeFalsy();
+      });
+    });
   });
 });

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

@@ -100,6 +100,9 @@ BootstrapTable.propTypes = {
   keyField: PropTypes.string.isRequired,
   data: PropTypes.array.isRequired,
   columns: PropTypes.array.isRequired,
+  remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    pagination: PropTypes.bool
+  })]),
   store: PropTypes.object,
   noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   striped: PropTypes.bool,
@@ -153,10 +156,12 @@ BootstrapTable.propTypes = {
   defaultSorted: PropTypes.arrayOf(PropTypes.shape({
     dataField: PropTypes.string.isRequired,
     order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
-  }))
+  })),
+  onTableChange: PropTypes.func
 };
 
 BootstrapTable.defaultProps = {
+  remote: false,
   striped: false,
   bordered: true,
   hover: false,

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

@@ -18,12 +18,18 @@ const withDataStore = Base =>
       super(props);
       this.store = new Store(props);
       this.handleUpdateCell = this.handleUpdateCell.bind(this);
+      this.onRemotePageChange = this.onRemotePageChange.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
       this.store.set(nextProps.data);
     }
 
+    onRemotePageChange(page, sizePerPage) {
+      const newState = { page, sizePerPage };
+      this.props.onTableChange(newState);
+    }
+
     handleUpdateCell(rowId, dataField, newValue) {
       const { cellEdit } = this.props;
       // handle cell editing internal
@@ -66,7 +72,10 @@ const withDataStore = Base =>
       } else if (this.props.columns.filter(col => col.sort).length > 0) {
         return wrapWithSort(baseProps);
       } else if (this.props.pagination) {
-        return wrapWithPagination(baseProps);
+        return wrapWithPagination({
+          ...baseProps,
+          onRemotePageChange: this.onRemotePageChange
+        });
       }
 
       return React.createElement(Base, baseProps);

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

@@ -40,14 +40,19 @@ export default class Store {
     return this.data;
   }
 
-  getByCurrPage(page, sizePerPage) {
-    const end = (page * sizePerPage) - 1;
+  getByCurrPage(page, sizePerPage, pageStartIndex) {
+    const getNormalizedPage = () => {
+      const offset = Math.abs(1 - pageStartIndex);
+      return page + offset;
+    };
+    const end = (getNormalizedPage() * sizePerPage) - 1;
     const start = end - (sizePerPage - 1);
+    const dataSize = this.getDataSize();
 
     const result = [];
     for (let i = start; i <= end; i += 1) {
       result.push(this.data[i]);
-      if (i + 1 === this.getDataSize()) break;
+      if (i + 1 === dataSize) break;
     }
     return result;
   }

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

@@ -20,13 +20,9 @@ export const pureTable = props =>
   React.createElement(BootstrapTable, { ...props });
 
 export const wrapWithPagination = (props) => {
-  if (props.pagination) {
-    const { wrapper } = props.pagination;
-    const PaginationBase = wrapper(pureTable);
-    return React.createElement(PaginationBase, { ...props });
-  }
-
-  return pureTable(props);
+  const { wrapper } = props.pagination;
+  const PaginationBase = wrapper(pureTable);
+  return React.createElement(PaginationBase, { ...props });
 };
 export const paginationElement = props => pureTable(props);
 

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

@@ -152,6 +152,33 @@ describe('withDataStore', () => {
     });
   });
 
+  describe('when pagination prop is defined', () => {
+    const PaginationWrapper = () => <div>test</div>;
+    const pagination = {
+      wrapper: jest.fn().mockReturnValue(PaginationWrapper)
+    };
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <BootstrapTable
+          keyField={ keyField }
+          data={ data }
+          columns={ columns }
+          pagination={ pagination }
+        />
+      );
+    });
+
+    it('should render Pagination wrapper successfully', () => {
+      expect(wrapper.find(PaginationWrapper).length).toBe(1);
+    });
+
+    it('should injecting correct props to Pagination wrapper', () => {
+      const component = wrapper.find(PaginationWrapper);
+      expect(component.props().onRemotePageChange).toBeDefined();
+    });
+  });
+
   describe('when any column.sort is defined', () => {
     beforeEach(() => {
       const columnsWithSort = [{
@@ -172,4 +199,27 @@ describe('withDataStore', () => {
       expect(wrapper.find(SortWrapper).length).toBe(1);
     });
   });
+
+  describe('onRemotePageChange', () => {
+    const page = 2;
+    const sizePerPage = 25;
+    const onTableChangeCallBack = sinon.stub();
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <BootstrapTable
+          keyField={ keyField }
+          data={ data }
+          columns={ columns }
+          onTableChange={ onTableChangeCallBack }
+        />
+      );
+      wrapper.instance().onRemotePageChange(page, sizePerPage);
+    });
+
+    it('should calling onTableChange correctly', () => {
+      expect(onTableChangeCallBack.calledOnce).toBeTruthy();
+      expect(onTableChangeCallBack.calledWith({ page, sizePerPage })).toBeTruthy();
+    });
+  });
 });

packages/react-bootstrap-table2/test/store/base.test.js

@@ -212,4 +212,34 @@ describe('Store Base', () => {
       expect(store.isAnySelectedRow()).not.toBeTruthy();
     });
   });
+
+  describe('getByCurrPage', () => {
+    beforeEach(() => {
+      data = [];
+      for (let i = 0; i < 100; i += 1) {
+        data.push({ id: i, name: `test_name${i}` });
+      }
+      store = new Base({ data, keyField: 'id' });
+    });
+
+    it('should always return correct data', () => {
+      [
+        // [page, sizePerPage, pageStartIndex]
+        [1, 10, 1],
+        [1, 25, 1],
+        [1, 30, 1],
+        [3, 30, 1],
+        [4, 30, 1],
+        [10, 10, 1],
+        [0, 10, 0],
+        [1, 10, 0],
+        [9, 10, 0]
+      ].forEach(([page, sizePerPage, pageStartIndex]) => {
+        const rows = store.getByCurrPage(page, sizePerPage, pageStartIndex);
+        expect(rows).toBeDefined();
+        expect(Array.isArray(rows)).toBeTruthy();
+        expect(rows.every(row => !!row)).toBeTruthy();
+      });
+    });
+  });
 });