Pagination

Divide data into pages

Import

import { Pagination } from '@windmill/react-ui'

Base

The base Pagination component needs four required props: totalResults, resultsPerPage, onChange and label.

Showing 1-10 of 120
live editor

Total results

The Pagination component know how many results to render using the totalResults prop.

Results per page

The resultsPerPage defines how many results will be shown and how many pages should be created.

onChange

The onChange prop gives you the ability to decide what actions should be done when the event of a page change occurs.

Label

The label 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?

Props overview

PropDescriptionTypeDefault
totalResultsrequired define the length of the datanumber
resultsPerPagerequired define how many results are shown in a pagenumber
onChangerequired define an action to be called when a page changesfunction
labelrequired the aria-label/name of the componentstring

Customizing

See Customization to learn how to change defaultTheme styles.