add story remote pagination

Author: AllenFang

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 />);