Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupComboboxIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Component Pagination

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

Example

<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

AttrTypeDefaultDocs

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

EventDetailDocs

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.

Open source