diff --git a/packages/react-bootstrap-table2-example/examples/pagination/remote-standalone-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/remote-standalone-pagination.js
new file mode 100644
index 0000000..cb5609b
--- /dev/null
+++ b/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 }) => (
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+
+
+ )
+ }
+
+
+);
+
+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 (
+
+ );
+ }
+}
+`;
+
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+
+
+ )
+ }
+
+
{ 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 = (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 (
+
+ );
+ }
+}
+
+export default Container;
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index ef20d12..169a235 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -154,6 +154,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';
@@ -359,7 +360,8 @@ storiesOf('Pagination', module)
.add('Custom SizePerPage', () => )
.add('Standalone Pagination List', () => )
.add('Standalone SizePerPage Dropdown', () => )
- .add('Fully Custom Pagination', () => );
+ .add('Fully Custom Pagination', () => )
+ .add('Remote Fully Custom Pagination', () => );
storiesOf('Table Search', module)
.addDecorator(bootstrapStyle())