1.0.1 • Published 1 year ago
@seragam-ui/pagination v1.0.1
@seragam-ui/pagination
<Pagination />
is used as a trigger to fetch some big data into a smaller one using pagination concept.
Installation
yarn add @seragam-ui/pagination
# or
npm i @seragam-ui/pagination
How to Use
Basic Usage
<Pagination />
has one mandatory property:
totalCount
: depends on your needs.
The other properties that commonly used are:
pageSize
: has default value10
.currentPage
: has default value1
.
Example:
import { Pagination } from '@seragam-ui/pagination'
const App = () => {
return <Pagination totalCount={100} pageSize={10} currentPage={1} />
}
Show Total Page Text
To use this type of <Pagination />
, you can use property:
showTotal
: this props is a function that has three params- First param acts as total count of pages. (
totalCount
) - Second param acts as first number of data inside current page. (
getLowerRangeCopy
) - Third param acts as last number of data inside current page. (
getUpperRangeCopy
)
- First param acts as total count of pages. (
Example:
import { Pagination } from '@seragam-ui/pagination'
const App = () => {
return (
<Pagination
totalCount={100}
pageSize={10}
currentPage={1}
showTotal={(totalCount, getLowerRangeCopy, getUpperRangeCopy) => {
// For this example, the varibale name of totalCount, getLowerRangeCopy, getUpperRangeCopy are being used
// The name of the params can be changed accordingly as long as the meaning of the variable is clear enough and the order is correct
return `Menampilkan ${getLowerRangeCopy} - ${getUpperRangeCopy} dari ${totalCount} data`,
}}
// The page result more or less will be like this:
// Menampilkan 1 - 11 dari 100 data < 1 2 3 4 5 ... 10 >
/>
)
}
1.0.1
1 year ago