Divide data into pages


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


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.


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


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

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


See Customization to learn how to change defaultTheme styles.