Pagination

Renders a Controlled Mantine Pagination component next to a select controlling the number of displayed items per page, inside a Flex

• Import

  import { Pagination } from '@smile/haring-react';
• Extends Flex
• Source View Source Code
• Package @smile/haring-react
• Storybook Storybook

Storybook Docs

Props

Name	Type	Default	Description
page *	number	-	Controlled value of the current page
totalPages *	number	-	Total number of pages
itemsPerPage *	number	-	Controlled value of the items per page Select
itemsPerPageAriaLabel	string	-	Aria label of the items per page Select
itemsPerPageOptions	IOptions<number>	[]	Array of options for the items per page Select
isTransparent	boolean	false	Displays a background behind the component
onItemsPerPageChange	(value: number) => void	-	Called when Select is changed
onPageChange	(value: number) => void	-	Called when Pagination page is changed
paginationProps	PaginationProps	-	Props for the Mantine Pagination component
selectProps	SelectProps	-	Props for the Mantine Select component
...	-	-	extends Flex props