mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
20181225 release
This commit is contained in:
AllenFang
parent
ccb755fd28
commit
14c15a5dfb
@ -39,4 +39,190 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
|
||||
|
||||
## Customization
|
||||
|
||||
See [pagination props](./pagination-props.html)
|
||||
### 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
|
||||
<PaginationProvider
|
||||
pagination={ paginationFactory(options) }
|
||||
>
|
||||
{
|
||||
({
|
||||
paginationProps,
|
||||
paginationTableProps
|
||||
}) => (
|
||||
.....
|
||||
)
|
||||
}
|
||||
</PaginationProvider>
|
||||
```
|
||||
|
||||
`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
|
||||
<PaginationProvider
|
||||
pagination={ paginationFactory(options) }
|
||||
>
|
||||
{
|
||||
({
|
||||
paginationProps,
|
||||
paginationTableProps
|
||||
}) => (
|
||||
<div>
|
||||
<BootstrapTable
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
{ ...paginationTableProps }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</PaginationProvider>
|
||||
```
|
||||
|
||||
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';
|
||||
|
||||
<PaginationProvider
|
||||
pagination={ paginationFactory(options) }
|
||||
>
|
||||
{
|
||||
({
|
||||
paginationProps,
|
||||
paginationTableProps
|
||||
}) => (
|
||||
<div>
|
||||
<SizePerPageDropdownStandalone
|
||||
{ ...paginationProps }
|
||||
/>
|
||||
<BootstrapTable
|
||||
keyField="id"
|
||||
data={ products }
|
||||
columns={ columns }
|
||||
{ ...paginationTableProps }
|
||||
/>
|
||||
<PaginationListStandalone
|
||||
{ ...paginationProps }
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</PaginationProvider>
|
||||
```
|
||||
|
||||
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.
|
||||
@ -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).
|
||||
|
||||
@ -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 (
|
||||
<li className="page-item">
|
||||
<a href="#" onClick={ handleClick } ....>{ page }</a>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const options = {
|
||||
pageButtonRenderer
|
||||
};
|
||||
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
|
||||
```
|
||||
|
||||
|
||||
## 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 (
|
||||
<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) } />
|
||||
```
|
||||
|
||||
## 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
|
||||
}) => (
|
||||
<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
|
||||
};
|
||||
|
||||
<BootstrapTable keyField="id" data={ products } columns={ columns } pagination={ paginationFactory(options) } />
|
||||
```
|
||||
|
||||
## 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
|
||||
}) => (
|
||||
<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) } />
|
||||
```
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
24
website/blog/2018-12-24-version.bump.md
Normal file
24
website/blog/2018-12-24-version.bump.md
Normal file
@ -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.
|
||||
Loading…
Reference in New Issue
Block a user