Pagination
React pagination component consists of button-like styled links, that are arranged side by side in a horizontal list. Learn how to create nice looking pagination to navigate through pages easily.
Usage
Example
Script
const [currentPage, setActivePage] = useState(2)
return (
<div className={'mt-2'} >
<CPagination
activePage={currentPage}
pages={10}
onActivePageChange={(i) => setActivePage(i)}
></CPagination>
</div>
)
# Features
- Determine behavior, style and functionality of pagination
- Smart automatic items generation
# Pagination API
| Name | Required | Type | Default Value |
|---|---|---|---|
| className | string | ||
| user classes for the main HTML tag | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
| activePage | number | 1 | |
| current page number | |||
| dots | boolean | true | |
| show dots (...) | |||
| arrows | boolean | true | |
| show arrows | |||
| doubleArrows | boolean | true | |
| firstButton | (any | string) | <React.Fragment>«</React.Fragment> | |
| previousButton | (any | string) | <React.Fragment>‹</React.Fragment> | |
| nextButton | (any | string) | <React.Fragment>›</React.Fragment> | |
| lastButton | (any | string) | <React.Fragment>»</React.Fragment> | |
| size | (sm | lg) | ||
| size of pagination, valid values: 'sm', 'lg' | |||
| align | (start | center | end) | start | |
| addListClass | string | ||
| limit | number | 5 | |
| pages | number | 10 | |
| number of pages | |||
| onActivePageChange | true | Function | |