Need help with pagination?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

react-component
505 Stars 201 Forks MIT License 589 Commits 34 Opened issues

Description

React Pagination

Services available

!
?

Need anything else?

Contributors list

rc-pagination


React Pagination Component.

NPM version build status Test coverage codecov Dependencies DevDependencies npm download

Development

npm install
npm start

Example

http://localhost:9001

online example: http://react-component.github.io/pagination/

Install

rc-pagination

Usage

import Pagination from 'rc-pagination';

ReactDOM.render(, container);

API

| Parameter | Description | Type | Default | | ---------------------------- | --------------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------- | | disabled | disable pagination | Bool | - | | defaultCurrent | uncontrolled current page | Number | 1 | | current | current page | Number | undefined | | total | items total count | Number | 0 | | defaultPageSize | default items per page | Number | 10 | | pageSize | items per page | Number | 10 | | onChange | page change callback | Function(current, pageSize) | - | | showSizeChanger | show pageSize changer | Bool |

false
when total less then
totalBoundaryShowSizeChanger
,
true
when otherwise | | totalBoundaryShowSizeChanger | when total larger than it,
showSizeChanger
will be true | number | 50 | | pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '50', '100'] | | onShowSizeChange | pageSize change callback | Function(current, size) | - | | hideOnSinglePage | hide on single page | Bool | false | | showPrevNextJumpers | show jump-prev, jump-next | Bool | true | | showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} | | showTotal | show total records and range | Function(total, [from, to]) | - | | className | className of pagination | String | - | | simple | when set, show simple pager | Object | null | | locale | to set l10n config | Object | zh_CN | | style | the style of pagination | Object | {} | | showLessItems | show less page items | Bool | false | | showTitle | show page items title | Bool | true | | itemRender | custom page item renderer | Function(current, type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', element): React.ReactNode |
(current, type, element) => element
| | prevIcon | specifict the default previous icon | ReactNode | (props: PaginationProps) => ReactNode | | | nextIcon | specifict the default previous icon | ReactNode | (props: PaginationProps) => ReactNode | | | jumpPrevIcon | specifict the default previous icon | ReactNode | (props: PaginationProps) => ReactNode | | | jumpNextIcon | specifict the default previous icon | ReactNode | (props: PaginationProps) => ReactNode | |

License

rc-pagination is released under the MIT license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.