Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Pagination

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

Default

Rows per page

15

1 - 15 of 183

...

Vue

<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 lang="ts">
  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

Rows per page

15

1 - 15 of 183

Page 1 of 13

Vue

<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>

All 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

Vue

<!-- 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>

ts

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
}

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.

...

Vue

<template>
  <HLPagination
    :current-page="currentPage"
    :total-pages="18"
    :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>

Imports

Vue

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
perPage *	number	10	Number of items per page
pagesToDisplay	number	7	Number of page buttons to display
perPageText	string	'Rows per page'	Label for per-page dropdown
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	Whether to show page selection dropdown
showPerPageDropDown	boolean	false	Whether to show per page selection dropdown
totalPages *	number	undefined	Total number of pages is required when there is no perPage and itemCount

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