Pagination
Prev/Next pagination bar with page number buttons and a results range summary. Used internally by DataTable.
Basic
Showing 21–30 of 87
…
vue
<script setup>
const page = ref(1)
</script>
<Pagination v-model="page" :total="87" :per-page="10" />Few pages
Showing 1–10 of 30
vue
<Pagination v-model="page" :total="30" :per-page="10" />Empty state
No results
vue
<Pagination v-model="page" :total="0" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | — | Current page (1-indexed) — use with v-model |
total | number | — | Total record count |
perPage | number | 20 | Records per page |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | number | Emitted when any page button, prev, or next is clicked |