Component Pagination

This component lets users navigate through pages by clicking numbered links to each page. This lets them move to different pages.

Get the UI kit

Example

View code

<som-pagination id="pagination" page="2" total-items="100" view="page"></som-pagination>
<som-pagination id="pagination" total-items="100" items-per-page="20"></som-pagination>

Props

Attr	Type	Default	Docs
borders	boolean	true	This boolean adds borders to grid view.
items-per-page	number	10	This property shows the number of items to display per page
page	number	0	This property shows the current active page (starting index is `0`).
table-name	string	''	This property describes the table associated with the pagination. It is used to describe the pagination actions for screen readers.
total-items	number		This property shows the total number of items in the grid
view	"grid" \| "page"	'grid'	This property determines the UI in which the pagination component will be rendered. Use `grid` for add the element to `som-grid` and use `page` when adding it to non-grid use cases.

Events

Event	Detail	Docs
pageChanged	any	This event will be triggered anytime the page is changed.

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.