diff --git a/packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/remote-pagination.js
new file mode 100644
index 0000000..ccae5c7
--- /dev/null
+++ b/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 }) => (
+
+
+ { sourceCode }
+
+);
+
+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 (
+
+ );
+ }
+}
+`;
+
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+
+
+ { sourceCode }
+
+);
+
+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 (
+
+ );
+ }
+}
+
+export default Container;
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 78a1c0e..71746da 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/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', () => )
.add('Pagination Hooks', () => )
- .add('Custom Pagination', () => );
+ .add('Custom Pagination', () => )
+ .add('Remote Pagination', () => );
diff --git a/packages/react-bootstrap-table2-paginator/src/wrapper.js b/packages/react-bootstrap-table2-paginator/src/wrapper.js
index fcc6cb7..0adc3c9 100644
--- a/packages/react-bootstrap-table2-paginator/src/wrapper.js
+++ b/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,
{
const pureTable = props => ();
+ const createPaginationWrapper = (props, renderFragment = true) => {
+ PaginationWrapper = wrapperFactory(pureTable);
+ wrapper = shallow();
+ instance = wrapper.instance();
+ if (renderFragment) {
+ const fragment = instance.render();
+ wrapper = shallow({ fragment }
);
+ }
+ };
+
describe('default pagination', () => {
const props = createTableProps();
beforeEach(() => {
- PaginationWrapper = wrapperFactory(pureTable);
- wrapper = shallow();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- instance = wrapper.instance();
- const fragment = instance.render();
- wrapper = shallow({ fragment }
);
+ 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();
- 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();
- 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();
+ });
+ });
});
});
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 9d6293a..fa5aee3 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/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,
diff --git a/packages/react-bootstrap-table2/src/container.js b/packages/react-bootstrap-table2/src/container.js
index d321998..0236b9c 100644
--- a/packages/react-bootstrap-table2/src/container.js
+++ b/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);
diff --git a/packages/react-bootstrap-table2/src/store/base.js b/packages/react-bootstrap-table2/src/store/base.js
index e9ac9f5..d3b6a30 100644
--- a/packages/react-bootstrap-table2/src/store/base.js
+++ b/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;
}
diff --git a/packages/react-bootstrap-table2/src/table-factory.js b/packages/react-bootstrap-table2/src/table-factory.js
index 9936b15..7ebfbd7 100644
--- a/packages/react-bootstrap-table2/src/table-factory.js
+++ b/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);
diff --git a/packages/react-bootstrap-table2/test/container.test.js b/packages/react-bootstrap-table2/test/container.test.js
index dc6cbd2..4bb2f3c 100644
--- a/packages/react-bootstrap-table2/test/container.test.js
+++ b/packages/react-bootstrap-table2/test/container.test.js
@@ -152,6 +152,33 @@ describe('withDataStore', () => {
});
});
+ describe('when pagination prop is defined', () => {
+ const PaginationWrapper = () => test
;
+ const pagination = {
+ wrapper: jest.fn().mockReturnValue(PaginationWrapper)
+ };
+
+ beforeEach(() => {
+ wrapper = shallow(
+
+ );
+ });
+
+ 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(
+
+ );
+ wrapper.instance().onRemotePageChange(page, sizePerPage);
+ });
+
+ it('should calling onTableChange correctly', () => {
+ expect(onTableChangeCallBack.calledOnce).toBeTruthy();
+ expect(onTableChangeCallBack.calledWith({ page, sizePerPage })).toBeTruthy();
+ });
+ });
});
diff --git a/packages/react-bootstrap-table2/test/store/base.test.js b/packages/react-bootstrap-table2/test/store/base.test.js
index c60260f..28dea64 100644
--- a/packages/react-bootstrap-table2/test/store/base.test.js
+++ b/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();
+ });
+ });
+ });
});