RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Pagination

This component provides a way to navigate through paginated data with customizable options.

Default

The default pagination shows page buttons alongside a per-page dropdown.

Rows per page

15

1 - 15 of 183

...

<template>
  <HLPagination
    :current-page="currentPage"
    :item-count="183"
    :per-page="currentPerPage"
    :pages-to-display="7"
    per-page-text="Rows per page"
    :per-page-dropdown-options="options"
    @update:page="changePage"
    @update:perPage="changePerPage"
  >
    <template #prev> Previous </template>
    <template #next> Next </template>
  </HLPagination>
</template>
<script setup>
  import { HLPagination } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const options = [
    { key: 10, label: '10' },
    { key: 20, label: '20' },
    { key: 50, label: '50' },
    { key: 100, label: '100' },
  ]
  const currentPage = ref(1)
  const currentPerPage = ref(15)
  const changePage = page => {
    currentPage.value = page
  }
  const changePerPage = perPage => {
    currentPerPage.value = perPage
  }
</script>

Collapsed

Set collapsed to replace the numbered page buttons with a compact prev / current-page / next control.

Rows per page

15

1 - 15 of 183

Page 1 of 13

<template>
  <HLPagination
    :current-page="currentPage"
    :item-count="183"
    :per-page="currentPerPage"
    :pages-to-display="7"
    per-page-text="Rows per page"
    :per-page-dropdown-options="options"
    @update:page="changePage"
    @update:perPage="changePerPage"
    collapsed
    show-current-range
    show-total-pages
  >
    <template #prev> Previous </template>
    <template #next> Next </template>
  </HLPagination>
</template>
<script setup>
  import { HLPagination } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const options = [
    { key: 10, label: '10' },
    { key: 20, label: '20' },
    { key: 50, label: '50' },
    { key: 100, label: '100' },
  ]
  const currentPage = ref(1)
  const currentPerPage = ref(15)
  const changePage = page => {
    currentPage.value = page
  }
  const changePerPage = perPage => {
    currentPerPage.value = perPage
  }
</script>

Jump to Page

Set is-page-drop-down to turn the current-page indicator into a searchable dropdown, so users can jump straight to a page instead of stepping through with prev / next. This is worth reaching for when the page count is large enough that clicking through is impractical.

INFO

is-page-drop-down only takes effect alongside collapsed — it replaces the static current-page button that the collapsed layout renders. It has no effect on the default numbered-button layout.

1

Page 1 of 42

<template>
  <!-- `collapsed` is required for `is-page-drop-down` to have any effect -->
  <HLPagination
    id="pagination-page-dropdown"
    :current-page="currentPage"
    :total-pages="42"
    :show-per-page-drop-down="false"
    @update:page="changePage"
    collapsed
    is-page-drop-down
    show-total-pages
  >
    <template #prev> Previous </template>
    <template #next> Next </template>
  </HLPagination>
</template>
<script setup>
  import { HLPagination } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const currentPage = ref(1)
  const changePage = page => {
    currentPage.value = page
  }
</script>

All Sizes

Pagination is available in sm and md sizes.

Small (sm):

Rows per page

15

1 - 15 of 183

...

Page 1 of 13

---

Medium (md):

Rows per page

15

1 - 15 of 183

...

Page 1 of 13

<template>
  <!-- Small (sm) -->
  <HLPagination
    :current-page="currentPage"
    :item-count="183"
    :per-page="currentPerPage"
    :per-page-dropdown-options="options"
    @update:page="changePage"
    @update:perPage="changePerPage"
    size="sm"
    show-current-range
    show-total-pages
  >
    <template #prev> Previous </template>
    <template #next> Next </template>
  </HLPagination>

  <!-- Medium (md) -->
  <HLPagination
    :current-page="currentPage"
    :item-count="183"
    :per-page="currentPerPage"
    :per-page-dropdown-options="options"
    @update:page="changePage"
    @update:perPage="changePerPage"
    size="md"
    show-current-range
    show-total-pages
  >
    <template #prev> Previous </template>
    <template #next> Next </template>
  </HLPagination>
</template>
<script setup>
  import { HLPagination } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const options = [
    { key: 10, label: '10' },
    { key: 20, label: '20' },
    { key: 50, label: '50' },
    { key: 100, label: '100' },
  ]
  const currentPage = ref(1)
  const currentPerPage = ref(15)
  const changePage = page => {
    currentPage.value = page
  }
  const changePerPage = perPage => {
    currentPerPage.value = perPage
  }
</script>

Only pages

When you want to show only the pages, you can use the show-per-page-drop-down prop to hide the per page dropdown and pass the total pages to the total-pages prop.

...

<template>
  <HLPagination
    :current-page="currentPage"
    :total-pages="13"
    :show-per-page-drop-down="false"
    :pages-to-display="7"
    @update:page="changePage"
    size="md"
    show-current-range
    :show-total-pages="false"
  >
    <template #prev> Previous </template>
    <template #next> Next </template>
  </HLPagination>
</template>
<script setup>
  import { HLPagination } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const currentPage = ref(1)
  const changePage = page => {
    currentPage.value = page
  }
</script>

Inline

When you want to show the pagination inline, you can use the inline prop to show the pagination inline.

1 of 18

<template>
  <HLPagination :current-page="currentPage" :total-pages="18" @update:page="changePage" inline show-total-pages> </HLPagination>
</template>
<script setup>
  import { HLPagination } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const currentPage = ref(1)
  const changePage = page => {
    currentPage.value = page
  }
</script>

Accessibility

• Keep the current page control flagged with aria-current="page" and disable unavailable buttons via aria-disabled="true".
• Reference range summaries (“Showing 1–10 of 50”) through aria-describedby on the nav wrapper.

Imports

import { HLPagination } from '@platform-ui/highrise'

Props

Prop	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the elemnt
currentPage	number	1	Current active page
itemCount	number | undefined	undefined	Total number of items. Provide together with perPage when not using totalPages
perPage	number	10	Number of items per page
pagesToDisplay	number	7	Number of page buttons to display
perPageText	string	undefined	Label for the per-page dropdown. When unset, falls back to the localized "Rows per page" string for the active locale
perPageDropdownOptions	Array<{ key: number; label: string }>	[]	Options for items per page dropdown
size	'md'| 'sm'	'md'	Size of pagination ('sm' or 'md')
collapsed	boolean	false	Whether to show collapsed version
showCurrentRange	boolean	true	Whether to show current range
showTotalPages	boolean	false	Whether to show total pages
isPageDropDown	boolean	false	Replaces the current-page indicator with a searchable page dropdown. Requires collapsed; ignored otherwise
showPerPageDropDown	boolean	true	Whether to show per page selection dropdown
totalPages	number	undefined	Total number of pages. Required when perPage and itemCount are not provided
inline	boolean	false	Whether to show pagination inline

Emits

Event	Parameters	Description
@update:page	(page: number)	Emitted when page changes
@update:perPage	(perPage: number)	Emitted when items per page changes

Slots

Name	Description
prev	Custom content for previous page button
next	Custom content for next page button