Site settings
Change the appearance of the site to suit your preferences
Pagination
The Pagination component provides a user interface for navigating through a set of pages, typically used for displaying large datasets or splitting content into multiple pages.
A basic pagination.
<Pagination count={20} pageSize={2} defaultPage={1}> <PaginationPrevTrigger /> <PaginationItems /> <PaginationNextTrigger /> </Pagination>
Controlled, using page and onPageChange
() => { const [page, setPage] = React.useState(1) return ( <Pagination count={20} pageSize={2} page={page} onPageChange={(e) => setPage(e.page)} > <PaginationPrevTrigger /> <PaginationItems /> <PaginationNextTrigger /> </Pagination> ) }
As link, using the getHref prop
<Pagination count={20} pageSize={2} defaultPage={3} getHref={(page) => `?page=${page}`} > <PaginationPrevTrigger /> <PaginationItems /> <PaginationNextTrigger /> </Pagination>