@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 value 10.
• currentPage: has default value 1.

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)

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 >
    />
  )
}