Implement Pagination

enzyme-setup.js

@@ -0,0 +1,8 @@
+import Adapter from 'enzyme-adapter-react-16';
+import { configure } from 'enzyme';
+
+const configureEnzyme = () => {
+  configure({ adapter: new Adapter() });
+};
+
+configureEnzyme();

package.json

@@ -24,45 +24,46 @@
   },
   "homepage": "https://github.com/react-bootstrap-table/react-bootstrap-table2#readme",
   "devDependencies": {
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "css-loader": "^0.28.1",
-    "enzyme": "^2.9.1",
-    "eslint": "^4.5.0",
+    "babel-core": "6.25.0",
+    "babel-eslint": "7.2.3",
+    "babel-jest": "20.0.3",
+    "babel-loader": "7.1.1",
+    "babel-preset-es2015": "6.24.1",
+    "babel-preset-react": "6.24.1",
+    "babel-preset-stage-0": "6.24.1",
+    "babel-register": "6.24.1",
+    "css-loader": "0.28.1",
+    "enzyme": "3.1.1",
+    "enzyme-adapter-react-16": "1.0.4",
+    "eslint": "4.5.0",
     "eslint-config-airbnb": "15.1.0",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.7.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-import": "2.7.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "^7.2.1",
-    "html-webpack-plugin": "^2.30.1",
-    "jest": "^20.0.4",
-    "jsdom": "^11.2.0",
-    "jsdom-global": "^3.0.2",
-    "lerna": "^2.0.0",
-    "node-sass": "^4.5.3",
-    "react-test-renderer": "^15.6.1",
-    "sass-loader": "^6.0.6",
-    "sinon": "^3.2.1",
-    "style-loader": "^0.17.0",
-    "webpack": "^3.5.4",
-    "webpack-dev-server": "^2.7.1"
+    "eslint-plugin-react": "7.2.1",
+    "html-webpack-plugin": "2.30.1",
+    "jest": "20.0.4",
+    "jsdom": "11.2.0",
+    "jsdom-global": "3.0.2",
+    "lerna": "2.0.0",
+    "node-sass": "4.5.3",
+    "react-test-renderer": "16.0.0",
+    "sass-loader": "6.0.6",
+    "sinon": "3.2.1",
+    "style-loader": "0.17.0",
+    "webpack": "3.5.4",
+    "webpack-dev-server": "2.7.1"
   },
   "dependencies": {
-    "classnames": "^2.2.5",
-    "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "classnames": "2.2.5",
+    "prop-types": "15.5.10",
+    "react": "16.0.0",
+    "react-dom": "16.0.0"
   },
   "peerDependencies": {
     "prop-types": "^15.0.0",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -71,6 +72,12 @@
     "roots": [
       "<rootDir>/packages"
     ],
+    "setupFiles": [
+      "<rootDir>/enzyme-setup.js"
+    ],
+    "modulePaths": [
+      "<rootDir>/packages/react-bootstrap-table2"
+    ],
     "testEnvironment": "node",
     "testMatch": [
       "**/test/**/*.test.js"

packages/react-bootstrap-table2-example/.storybook/webpack.config.js

@@ -1,7 +1,9 @@
 const path = require('path');
 
 const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
+const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/src');
 const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
+const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -23,14 +25,14 @@ const loaders = [{
   test: /\.js?$/,
   use: ['babel-loader'],
   exclude: /node_modules/,
-  include: [sourcePath, storyPath],
+  include: [sourcePath, paginationSourcePath, storyPath],
 }, {
   test: /\.css$/,
   use: ['style-loader', 'css-loader'],
 }, {
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath],
+  include: [storyPath, sourceStylePath, paginationStylePath],
 }, {
   test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader?limit=100000',

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

@@ -0,0 +1,82 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+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 options = {
+  paginationSize: 4,
+  pageStartIndex: 0,
+  // alwaysShowAllBtns: true, // Always show next and previous button
+  // withFirstAndLast: false, // Hide the going to First and Last page button
+  // hideSizePerPage: true, // Hide the sizePerPage dropdown always
+  // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
+  firstPageText: 'First',
+  prePageText: 'Back',
+  nextPageText: 'Next',
+  lastPageText: 'Last',
+  nextPageTitle: 'First page',
+  prePageTitle: 'Pre page',
+  firstPageTitle: 'Next page',
+  lastPageTitle: 'Last page',
+  sizePerPageList: [{
+    text: '5', value: 5
+  }, {
+    text: '10', value: 10
+  }, {
+    text: 'All', value: products.length
+  }] // A numeric array is also available. the purpose of above example is custom the text
+};
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator(options) } />
+`;
+const options = {
+  paginationSize: 4,
+  pageStartIndex: 0,
+  // alwaysShowAllBtns: true // Always show next and previous button
+  // withFirstAndLast: false // Hide the going to First and Last page button
+  // hideSizePerPage: true, // Hide the sizePerPage dropdown always
+  // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
+  firstPageText: 'First',
+  prePageText: 'Back',
+  nextPageText: 'Next',
+  lastPageText: 'Last',
+  nextPageTitle: 'First page',
+  prePageTitle: 'Pre page',
+  firstPageTitle: 'Next page',
+  lastPageTitle: 'Last page',
+  sizePerPageList: [{
+    text: '5', value: 5
+  }, {
+    text: '10', value: 10
+  }, {
+    text: 'All', value: products.length
+  }] // A numeric array is also available. the purpose of above example is custom the text
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginator(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,45 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+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 columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } pagination={ paginator() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginator() } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,82 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+
+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 columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const options = {
+  onSizePerPageChange: (sizePerPage, page) => {
+    console.log('Size per page change!!!');
+    console.log('Newest size per page:' + sizePerPage);
+    console.log('Newest page:' + page);
+  },
+  onPageChange: (page, sizePerPage) => {
+    console.log('Page change!!!');
+    console.log('Newest size per page:' + sizePerPage);
+    console.log('Newest page:' + page);
+  }
+};
+
+<BootstrapTable
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  pagination={ paginator(options) }
+/>
+`;
+
+const options = {
+  onSizePerPageChange: (sizePerPage, page) => {
+    console.log('Size per page change!!!');
+    console.log(`Newest size per page: ${sizePerPage}`);
+    console.log(`Newest page: ${page}`);
+  },
+  onPageChange: (page, sizePerPage) => {
+    console.log('Page change!!!');
+    console.log(`Newest size per page: ${sizePerPage}`);
+    console.log(`Newest page: ${page}`);
+  }
+};
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      pagination={ paginator(options) }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -17,7 +17,8 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.7",
-    "react-bootstrap-table2": "0.0.1"
+    "react-bootstrap-table2": "0.0.1",
+    "react-bootstrap-table2-paginator": "0.0.1"
   },
   "devDependencies": {
     "@storybook/addon-console": "^1.0.0",

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

@@ -68,11 +68,17 @@ import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
 import SelectionHooks from 'examples/row-selection/selection-hooks';
 import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
 
+// pagination
+import PaginationTable from 'examples/pagination';
+import PaginationHooksTable from 'examples/pagination/pagination-hooks';
+import CustomPaginationTable from 'examples/pagination/custom-pagination';
+
 // css style
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'stories/stylesheet/tomorrow.min.css';
 import 'stories/stylesheet/storybook.scss';
 import 'react-bootstrap-table2/style/react-bootstrap-table.scss';
+import 'react-bootstrap-table2-paginator/style/react-bootstrap-table-paginator.scss';
 
 // import { action } from '@storybook/addon-actions';
 
@@ -143,3 +149,8 @@ storiesOf('Row Selection', module)
   .add('Not Selectabled Rows', () => <NonSelectableRowsTable />)
   .add('Selection Hooks', () => <SelectionHooks />)
   .add('Hide Selection Column', () => <HideSelectionColumnTable />);
+
+storiesOf('Pagination', module)
+  .add('Basic Pagination Table', () => <PaginationTable />)
+  .add('Pagination Hooks', () => <PaginationHooksTable />)
+  .add('Custom Pagination', () => <CustomPaginationTable />);

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

@@ -0,0 +1,11 @@
+{
+  "name": "react-bootstrap-table2-paginator",
+  "version": "0.0.1",
+  "description": "it's the pagination addon for react-bootstrap-table2",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}