Skip to content
On this page

Pagination

Usage

Simple Usage

preview
vue
<template>
  <p-pagination v-model="model" :total="total" />
</template>

<script setup>
  const model = ref(1)
  const total = ref(100)
</script>

More Pages

Pages will automatically truncated if maximum display limit exceeded.

preview
vue
<template>
  <p-pagination v-model="model" :total="total" />
</template>

<script setup>
  const model   = ref(1)
  const total   = ref(200)
</script>

Variants

There are 3 navigation variants: none, short, far, default is short

preview
vue
<template>
  <p-pagination v-model="model" variant="none" :total="total" />
  <p-pagination v-model="model" variant="short" :total="total" />
  <p-pagination v-model="model" variant="far" :total="total" />
</template>

<script setup>
  const model = ref(1)
  const total = ref(100)
</script>

Show Detail

Add prop show-detail to show row calculation and per page options.

preview
vue
<template>
  <p-pagination
    v-model="model"
    v-model:per-page="perPage"
    :total="total"
    :per-page-options="perPageOptions"
    show-detail />
</template>

<script setup>
  const model          = ref(1)
  const total          = ref(50)
  const perPage        = ref(10)
  const perPageOptions = ref([5,10,15])
</script>

Add prop navigation-text to change previous and next icon to text, default is Previous and Next.
You can change the text label via prev-nav-label and next-nav-label prop.

preview
vue
<template>
  <p-pagination v-model="model" :total="total" navigation-text />
  <p-pagination
    v-model="model"
    :total="total"
    navigation-text
    prev-nav-label="Kembali"
    next-nav-label="Lanjut" />
</template>

<script setup>
  const model = ref(1)
  const total = ref(100)
</script>

Add prop navigation-only to show navigation without page items. Navigation only will auto aligned to right.

preview
vue
<template>
  <p-pagination v-model="model" navigation-only :total="total" />
  <p-pagination
    v-model="model"
    v-model:per-page="perPage"
    :per-page-options="perPageOptions"
    :total="total"
    navigation-only
    show-counter />
  <p-pagination
    v-model="model"
    v-model:per-page="perPage"
    :per-page-options="perPageOptions"
    :total="total"
    navigation-only
    show-per-page />
  <p-pagination
    v-model="model"
    v-model:per-page="perPage"
    :per-page-options="perPageOptions"
    :total="total"
    navigation-only
    show-detail />
</template>

<script setup>
  const model = ref(1)
  const total = ref(50)
  const perPage        = ref(10)
  const perPageOptions = ref([5,10,15])
</script>

Quick Jump

Add prop quick-jump to change mode to quick jump.

preview
vue
<template>
  <p-pagination v-model="model" :total="total" quick-jump />
  <p-pagination
    v-model="model"
    v-model:per-page="perPage"
    :per-page-options="perPageOptions"
    :total="total"
    quick-jump
    show-detail />
</template>

<script>
  const model          = ref(1)
  const total          = ref(100)
  const perPage        = ref(10)
  const perPageOptions = ref([5,10,15])
</script>

Customization Slots

Custom Navigation

preview
vue
<template>
 <p-pagination v-model="model" variant="far" :total="100">
    <template #first-navigation>
      <IconSkipBack />
    </template>
    <template #last-navigation>
      <IconSkipForward />
    </template>
    <template #prev-navigation>
      <IconPrevOutline/>
    </template>
    <template #next-navigation>
      <IconNextOutline/>
    </template>
 </p-pagination>
</template>

Custom Data Counter

preview
vue
<template>
  <p-pagination v-model="model" v-model:per-page="perPage" :total="total" show-detail>
    <template #pagination-count="{ range, total }">
      {{ range[0] }} to {{ range[1] }} from {{ total }}
    </template>
  </p-pagination>
</template>

Custom Page Count

preview
vue
<template>
  <p-pagination v-model="model" :total="total" quick-jump page-label="Halaman">
    <template #quick-jump-count="{ total }">
      dari {{ total }}
    </template>
  </p-pagination>
</template>

API

Props

PropsTypeDefaultDescription
modelValueNumber-v-model value. Specified as current page
quick-jumpBooleanfalseShorten pagination using select component
show-counterBooleanfalseShow the data items counters
show-per-pageBooleanfalseShow the per page options
show-detailBooleanfalseShow the data items counter and per page options
navigation-textBooleanfalseChange previous and next navigation icon to text label
navigation-onlyBooleanfalseHide pagination items and show the navigation only
per-pageNumber10Number of data items per page
per-page-optionsNumber[][10,20,30]Specify per page options
totalNumber0Total number of data items
display-limitNumber10Maximum display limit of visible page buttons. Included two ellipsis
variantStringshortSpecify navigation variant
page-labelStringPageLabel to place in the quick jump
prev-nav-labelStringPreviousLabel to place in the previous navigation button. Only works if navigation-text is provided
next-nav-labelStringNextLabel to place in the next navigation button. Only works if navigation-text is provided
first-nav-labelStringFirstLabel to place in the first navigation button
last-nav-labelStringLastLabel to place in the last navigation button
show-rows-labelStringShow rowsLabel to place in the per page options. Only works if show-detail is provided

Slots

NameScopedDescription
first-navigationNoContent to place in first navigation button when prop variant set to far
last-navigationNoContent to place in last navigation button when prop variant set to far
prev-navigationNoContent to place in previous navigation button when prop variant set to short or far
next-navigationNoContent to place in next navigation button when prop variant set to short or far
quick-jump-counttotalContent to place in quick jump page count when prop quick-jump is provided
pagination-countrange and totalContent to place in pagination counter when prop show-detail is provided

See Also

Released under the MIT License.