Pager
Pagers allow users to navigate through items of the same table or list.
Version 1.1.2
Installation
To install @igloo-ui/pager
in your project, you will need to run the following command using npm:
npm install @igloo-ui/pager
If you prefer Yarn, use the following command instead:
yarn add @igloo-ui/pager
Usage
Then to use the component in your code, import it!
import Pager from '@igloo-ui/pager';
const [currentPage, setCurrentPage] = React.useState(1);
<Pager
pageSize={5}
totalCount={200}
currentPage={currentPage}
onPageChange={(page) => setCurrentPage(page)}
/>
Internationalization
The Pager component uses the @igloo-ui/provider
package to receive the correct locale. This should be wrapped around the entire application.
import IglooProvider from '@igloo-ui/provider';
<IglooProvider locale="fr-CA">
<Pager
pageSize={5}
totalCount={200}
currentPage={currentPage}
onPageChange={(page) => setCurrentPage(page)}
/>
</IglooProvider>
API
Pager
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | Add a specific class to the pager component |
currentPage | number | - | The number of the currently active page |
dataTest | string | - | Add a data-test tag for automated tests |
onPageChange | (pageNum: number) => void | - | Called when the page is changed |
pageSize | number | - | Specify the number of elements each page should contain |
showValueLabel | boolean | Whether or not to show the text to the right of the pager | |
siblingCount | number | Represents how many pages should be on each side of the current page | |
totalCount | number | - | The total amount of elements |
valueLabel | ReactNode | - | The label to show on the right of the pager |
usePagination
Prop | Type | Default | Description |
---|---|---|---|
currentPage | number | - | The number of the currently active page |
pageSize | number | - | The number of elements each page should contain |
siblingCount | number | - | Represents how many pages should be on each side of the current page. |
totalCount | number | - | The total amount of elements |