diff --git a/docs/basic-pagination.md b/docs/basic-pagination.md
index 8442580..a6f32d8 100644
--- a/docs/basic-pagination.md
+++ b/docs/basic-pagination.md
@@ -39,4 +39,190 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
## Customization
-See [pagination props](./pagination-props.html)
\ No newline at end of file
+### Basic Customization
+
+`react-bootstrap-table2` give some simple ways to customize something like text, styling etc, following is all the props we support for basic customization:
+
+* [paginationSize](./pagination-props.html#paginationpaginationsize-number)
+* [sizePerPageList](./pagination-props.html#paginationsizeperpagelist-array)
+* [withFirstAndLast](./pagination-props.html#paginationwithfirstandlast-bool)
+* [alwaysShowAllBtns](./pagination-props.html#paginationalwaysshowallbtns-bool)
+* [firstPageText](./pagination-props.html#paginationfirstpagetext-any)
+* [prePageText](./pagination-props.html#paginationprepagetext-any)
+* [nextPageText](./pagination-props.html#paginationnextpagetext-any)
+* [lastPageText](./pagination-props.html#paginationlastpagetext-any)
+* [firstPageTitle](./pagination-props.html#paginationfirstpagetitle-any)
+* [prePageTitle](./pagination-props.html#paginationprepagetitle-any)
+* [nextPageTitle](./pagination-props.html#paginationnextpagetitle-any)
+* [lastPageTitle](./pagination-props.html#paginationlastpagetitle-any)
+* [hideSizePerPage](./pagination-props.html#paginationhidesizeperpage-bool)
+* [hidePageListOnlyOnePage](./pagination-props.html#paginationhidepagelistonlyonepage-bool)
+* [showTotal](./pagination-props.html#paginationshowtotal-bool)
+
+You can check [this online demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) for above props usage.
+
+### Advance Customization
+
+Sometime, you may feel above props is not satisfied with your requirement, don't worry, we provide following renderer for each part of pagination:
+
+* [pageListRenderer](./pagination-props.html#paginationpagelistrenderer-function)
+* [pageButtonRenderer](./pagination-props.html#paginationpagebuttonrenderer-function)
+* [sizePerPageRenderer](./pagination-props.html#paginationsizeperpagerenderer-function)
+* [sizePerPageOptionRenderer](./pagination-props.html#paginationsizeperpageoptionrenderer-function)
+* [paginationTotalRenderer](./pagination-props.html#paginationpaginationtotalrenderer-function)
+
+### Completely Customization
+
+If you want to customize the pagination component completely, you may get interesting on following solution:
+
+* Standalone
+* Non-standalone
+
+`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
+
+#### Import PaginationProvider
+
+```js
+import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
+
+```
+
+#### Declare custom and totalSize in pagination option:
+
+```js
+const paginationOption = {
+ custom: true,
+ totalSize: products.length
+};
+```
+
+#### Render PaginationProvider
+
+```js
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+ .....
+ )
+ }
+
+```
+
+`PaginationProvider` actually is a wrapper for the consumer of react context so that you are able to get the props from context then render to your compoennt and `BootstrapTable`:
+
+* `paginationProps`: this include everything about pagination, you will use it when you render standalone component or your custom component.
+* `paginationTableProps`: you don't need to know about this, but you have to give it as props when render `BootstrapTable`.
+
+So far, your customization pagination should look like it:
+```js
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+
+ )
+ }
+
+```
+
+Now, you have two choices
+* Use built-in standalne components
+* Customize everything by yourself
+
+#### Use Standalone Component
+`react-bootstrap-table2-paginator` provider two standalone components:
+
+* Size Per Page Dropdwn Standalone
+* Pagination List Standalone
+
+When render each standalone, you just need to pass the `paginationProps` props to standalone component:
+
+```js
+import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+
+
+
+ )
+ }
+
+```
+
+That's it!! The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
+
+#### Customization Everything
+
+If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Therefore, following is all the props in `paginationProps` object:
+
+```js
+page,
+sizePerPage,
+pageStartIndex,
+hidePageListOnlyOnePage,
+hideSizePerPage,
+alwaysShowAllBtns,
+withFirstAndLast,
+dataSize,
+sizePerPageList,
+paginationSize,
+showTotal,
+pageListRenderer,
+pageButtonRenderer,
+sizePerPageRenderer,
+paginationTotalRenderer,
+sizePerPageOptionRenderer,
+firstPageText,
+prePageText,
+nextPageText,
+lastPageText,
+prePageTitle,
+nextPageTitle,
+firstPageTitle,
+lastPageTitle,
+onPageChange,
+onSizePerPageChange
+```
+
+In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important propertoes for you:
+
+* `page`: Current page.
+* `sizePerPage`: Current size per page.
+* `onPageChange`: Call it when you nede to change page. This function accept one number argument which indicate the new page
+* `onSizePerPageChange`: Call it when you nede to change size per page. This function accept two number argument which indicate the new sizePerPage and new page
+
+[This](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Fully%20Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) is a online example for showing how to custom pagination completely.
\ No newline at end of file
diff --git a/docs/migration.md b/docs/migration.md
index 9d94010..27db4e6 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -119,8 +119,7 @@ Please see [available pagination configurations](./pagination-props.html).
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.
-
+Until newest `react-bootstrap-table2-paginator@2.0.0`, we allow you to custom any part of pagination component more flexible.
## Table Search
Please see [Work with table search](./basic-search.html).
diff --git a/docs/pagination-props.md b/docs/pagination-props.md
index e53f94d..f996275 100644
--- a/docs/pagination-props.md
+++ b/docs/pagination-props.md
@@ -20,6 +20,7 @@ const pagination = paginationFactory({
**NONE**
## Optional
+* [custom](#paginationcustom-bool)
* [page](#paginationpage-number)
* [sizePerPage](#paginationsizeperpage-number)
* [totalSize](#paginationtotalsize-number)
@@ -41,9 +42,17 @@ const pagination = paginationFactory({
* [onPageChange](#paginationonpagechange-function)
* [onSizePerPageChange](#paginationonsizeperpagechange-function)
* [showTotal](#paginationshowtotal-bool)
+* [pageButtonRenderer](#paginationpagebuttonrenderer-function)
+* [pageListRenderer](#paginationpagelistrenderer-function)
+* [sizePerPageRenderer](#paginationsizeperpagerenderer-function)
+* [sizePerPageOptionRenderer](#paginationsizeperpageoptionrenderer-function)
* [paginationTotalRenderer](#paginationpaginationtotalrenderer-function)
-----
+## pagination.custom - [Bool]
+Default is false, you will enable it only when you need to implement a [customization completely](./basic-pagination.html#completely-customization).
+
+
## pagination.page - [Number]
Use `pagination.page` specify the current page when table render.
@@ -55,7 +64,15 @@ Use `pagination.sizePerPage` specify the current size per page when table render
> It's necessary value when [remote](./table-props.html#remote-bool-object) pagination is enabled.
## pagination.totalSize - [Number]
-It's only work for [remote](./table-props.html#remote-bool-object) mode, because `react-bootstrap-table2` will never know the totally data size actually. Remeber to assign `totalSize` when you enable the remote pagination.
+This props will be necessary value for below two cases:
+
+### remote mode
+
+Because `react-bootstrap-table2` will never know the totally data size actually. Remeber to assign `totalSize` when you enable the remote pagination.
+
+### Customization
+When you need to implement a [customization completely](./basic-pagination.html#completely-customization). You have to give props.
+
## pagination.pageStartIndex - [Number]
Default is **1**, which means the first page index is start from 1. If your first page want to start from **0**, you can control it via `pageStartIndex`.
@@ -115,6 +132,156 @@ You can hide the pagination when there's only one page in table. Default is `fal
## pagination.showTotal - [Bool]
Default is `false`, if enable will display a text to indicate the row range of current page.
+## pagination.pageButtonRenderer - [Function]
+Custom the page button inside the pagination list. This callback function have one argument which is an object and contain following props:
+
+* `page`: Page number
+* `active`: If this page is current page or not.
+* `disable`: If this page is disabled or not.
+* `title`: Page title
+* `onPageChange`: Call it when you need to change page
+
+Following is a minimal example:
+```js
+const pageButtonRenderer = ({
+ page,
+ active,
+ disable,
+ title,
+ onPageChange
+}) => {
+ const handleClick = (e) => {
+ e.preventDefault();
+ onPageChange(page);
+ };
+ // ....
+ return (
+
+ );
+};
+
+const options = {
+ pageButtonRenderer
+};
+
+
+```
+
+
+## pagination.pageListRenderer - [Function]
+Custom the pagination list component, this callback function have one argument which is an object and contain following props:
+
+* `pages`: Current page
+* `onPageChange`: Call it when you need to change page
+
+Below is a minimal example:
+```js
+const pageListRenderer = ({
+ pages,
+ onPageChange
+}) => {
+ // just exclude <, <<, >>, >
+ const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+ return (
+
+ );
+};
+
+const options = {
+ pageListRenderer
+};
+
+
+```
+
+## pagination.sizePerPageRenderer - [Function]
+Custom the size per page dropdown component, this callback function have one argument which is an object and contain following props:
+
+* `options`: Dropdown option.
+* `currSizePerPage`: Current size per page.
+* `onSizePerPageChange`: Call it when you need to change size per page.
+
+
+Below is a minimal example:
+```js
+const sizePerPageRenderer = ({
+ options,
+ currSizePerPage,
+ onSizePerPageChange
+}) => (
+
+ {
+ options.map(option => (
+
+ ))
+ }
+
+);
+
+const options = {
+ sizePerPageRenderer
+};
+
+
+```
+
+## pagination.sizePerPageOptionRenderer - [Function]
+Custom the option of size per page dropdown component, this callback function have one argument which is an object and contain following props:
+
+* `text`: The text of option.
+* `page`: The size per page of option.
+* `onSizePerPageChange`: Call it when you need to change size per page.
+
+Below is a minimal example:
+```js
+const sizePerPageOptionRenderer = ({
+ text,
+ page,
+ onSizePerPageChange
+}) => (
+
+);
+
+const options = {
+ sizePerPageOptionRenderer
+};
+
+
+```
+
## pagination.paginationTotalRenderer - [Function]
Custom the total information, this callbacok function have three arguments: `from`, `to` and `size`. Following is an example:
@@ -126,7 +293,6 @@ const customTotal = (from, to, size) => (
);
```
-
## pagination.onPageChange - [Function]
Accept a callback function and will be called when page changed. This callback function get below arguments:
diff --git a/website/blog/2018-12-24-version.bump.md b/website/blog/2018-12-24-version.bump.md
new file mode 100644
index 0000000..0121280
--- /dev/null
+++ b/website/blog/2018-12-24-version.bump.md
@@ -0,0 +1,24 @@
+---
+title: New Release (2018-12-25)
+author: Allen Fang
+authorURL: https://twitter.com/allenfang_tw
+---
+
+## Changed Packages
+
+We got following package version bump in this release:
+
+* `react-bootstrap-table-next@2.0.0`
+* `react-bootstrap-table2-paginator@2.0.0`
+
+
+## Changelog
+
+### Bug fixes
+N/A
+
+### Features
+N/A
+
+### Enhancements
+* Impove the flexibility about customizing pagination components.
\ No newline at end of file