Easy to customize pagination

README.md

@@ -28,10 +28,6 @@ See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-ta
 
 See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
 
-## Roadmap
-
-See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
-
 ## Development
 
 Please check the [development guide](./docs/development.md).

docs/migration.md

@@ -113,8 +113,6 @@ Please see [available pagination configurations](https://react-bootstrap-table.g
 
 Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly.   
 
-No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
-
 ## Table Search
 Ｔhe usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
 

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

@@ -0,0 +1,106 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory 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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const pageButtonRenderer = ({
+  page,
+  active,
+  disable,
+  title,
+  onPageChange
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onPageChange(page);
+  };
+  const activeStyle = {};
+  if (active) {
+    activeStyle.backgroundColor = 'black';
+    activeStyle.color = 'white';
+  } else {
+    activeStyle.backgroundColor = 'gray';
+    activeStyle.color = 'black';
+  }
+  if (typeof page === 'string') {
+    activeStyle.backgroundColor = 'white';
+    activeStyle.color = 'black';
+  }
+  return (
+    <li className="page-item">
+      <a href="#" onClick={ handleClick } style={ activeStyle }>{ page }</a>
+    </li>
+  );
+};
+
+const options = {
+  pageButtonRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const pageButtonRenderer = ({
+  page,
+  active,
+  disable,
+  title,
+  onPageChange
+}) => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    onPageChange(page);
+  };
+  const activeStyle = {};
+  if (active) {
+    activeStyle.backgroundColor = 'black';
+    activeStyle.color = 'white';
+  } else {
+    activeStyle.backgroundColor = 'gray';
+    activeStyle.color = 'black';
+  }
+  if (typeof page === 'string') {
+    activeStyle.backgroundColor = 'white';
+    activeStyle.color = 'black';
+  }
+  return (
+    <li className="page-item">
+      <a href="#" onClick={ handleClick } style={ activeStyle }>{ page }</a>
+    </li>
+  );
+};
+
+const options = {
+  pageButtonRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,78 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory 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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const pageListRenderer = ({
+  pages,
+  onPageChange
+}) => {
+  const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+  return (
+    <div>
+      {
+        pageWithoutIndication.map(p => (
+          <button className="btn btn-success" onClick={ () => onPageChange(p.page) }>{ p.page }</button>
+        ))
+      }
+    </div>
+  );
+};
+
+const options = {
+  pageListRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const pageListRenderer = ({
+  pages,
+  onPageChange
+}) => {
+  const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+  return (
+    <div>
+      {
+        pageWithoutIndication.map(p => (
+          <button className="btn btn-success" onClick={ () => onPageChange(p.page) }>{ p.page }</button>
+        ))
+      }
+    </div>
+  );
+};
+
+const options = {
+  pageListRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js

@@ -0,0 +1,96 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory 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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const sizePerPageOptionRenderer = ({
+  text,
+  page,
+  onSizePerPageChange
+}) => (
+  <li
+    key={ text }
+    role="presentation"
+    className="dropdown-item"
+  >
+    <a
+      href="#"
+      tabIndex="-1"
+      role="menuitem"
+      data-page={ page }
+      onMouseDown={ (e) => {
+        e.preventDefault();
+        onSizePerPageChange(page);
+      } }
+      style={ { color: 'red' } }
+    >
+      { text }
+    </a>
+  </li>
+);
+
+const options = {
+  sizePerPageOptionRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+`;
+
+const sizePerPageOptionRenderer = ({
+  text,
+  page,
+  onSizePerPageChange
+}) => (
+  <li
+    key={ text }
+    role="presentation"
+    className="dropdown-item"
+  >
+    <a
+      href="#"
+      tabIndex="-1"
+      role="menuitem"
+      data-page={ page }
+      onMouseDown={ (e) => {
+        e.preventDefault();
+        onSizePerPageChange(page);
+      } }
+      style={ { color: 'red' } }
+    >
+      { text }
+    </a>
+  </li>
+);
+
+const options = {
+  sizePerPageOptionRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -0,0 +1,89 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory 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 from 'react-bootstrap-table2-paginator';
+// ...
+
+const sizePerPageRenderer = ({
+  options,
+  currSizePerPage,
+  onSizePerPageChange
+}) => (
+  <div className="btn-group" role="group">
+    {
+      options.map((option) => {
+        const isSelect = currSizePerPage === \`$\{option.page}\`;
+        return (
+          <button
+            key={ option.text }
+            type="button"
+            onClick={ () => onSizePerPageChange(option.page) }
+            className={ \`btn $\{isSelect ? 'btn-secondary' : 'btn-warning'}\` }
+          >
+            { option.text }
+          </button>
+        );
+      })
+    }
+  </div>
+);
+
+const options = {
+  sizePerPageRenderer
+};
+
+<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />s
+`;
+
+const sizePerPageRenderer = ({
+  options,
+  currSizePerPage,
+  onSizePerPageChange
+}) => (
+  <div className="btn-group" role="group">
+    {
+      options.map(option => (
+        <button
+          key={ option.text }
+          type="button"
+          onClick={ () => onSizePerPageChange(option.page) }
+          className={ `btn ${currSizePerPage === `${option.page}` ? 'btn-secondary' : 'btn-warning'}` }
+        >
+          { option.text }
+        </button>
+      ))
+    }
+  </div>
+);
+
+const options = {
+  sizePerPageRenderer
+};
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);