-
Notifications
You must be signed in to change notification settings - Fork 0
Pagination
Nariman Bortov edited this page Jul 6, 2023
·
4 revisions
import { Pagination } from '@narimanb/wreactui'
The base Pagination
component have four props: totalResults
, resultsPerPage
, onChange
and ariaLabel
.
Code
<Pagination
totalResults={120}
resultsPerPage={10}
onChange={() => {}}
/>
The Pagination
component know how many results to render using the totalResults
prop.
The resultsPerPage
defines how many results will be shown and how many pages should be created.
The onChange
prop gives you the ability to decide what actions should be done when the event of a page change occurs.
The ariaLabel
prop maps to an aria-label
attribute inside the Pagination
component, so screen readers can announce a descriptive message that explains what are you trying to paginate. Is this a table, posts, images, etc. pagination?
Prop | Description | Type | Default |
---|---|---|---|
totalResults |
required define the length of the data |
number |
|
resultsPerPage |
required define how many results are shown in a page |
number |
|
onChange |
required define an action to be called when a page changes |
function |
|
ariaLabel |
the aria-label /name of the component |
string |
Navigation |
Original source: Estevan Maito https://windmillui.com/react-ui