Pagination
The way through a list too long for one screen: a row of page numbers with arrows at its ends.
| Version | When | By |
|---|---|---|
| v1.4.2 | 2 h ago | ada |
| v1.4.1 | 2 days ago | grace |
| v1.4.0 | 3 days ago | linus |
| v1.3.9 | 4 days ago | ada |
| v1.3.8 | 5 days ago | grace |
vue
<script setup lang="ts">
import { computed, ref } from 'vue'
const page = ref(1)
const size = 5
const rows = computed(() => deploys.slice((page.value - 1) * size, page.value * size))
</script>
<template>
<OTable :columns="columns" :rows="rows" row-key="version" />
<OPagination v-model:page="page" :total="deploys.length" :page-size="size" />
</template>It takes total, the number of items, not of pages, and works the pages out from page-size. It does not cut the list: show the rows of the current page yourself, as above, or ask the server for them.
Many pages
The first and the last page are always shown; the far ones fold into a gap. siblings is how many pages stand on each side of the current one.
vue
<OPagination v-model:page="page" :total="200" />
<OPagination v-model:page="page" :total="200" :siblings="2" />Disabled
vue
<OPagination :total="50" disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | required | How many items there are in all |
v-model:page | number | 1 | The current page, from 1 |
pageSize | number | 10 | Items on one page |
siblings | number | 1 | Pages on each side of the current one |
disabled | boolean | false | |
label | string | 'Pages' | What a screen reader calls it; make it differ if a page has two |
prevLabel | string | 'Previous page' | Name of the left arrow |
nextLabel | string | 'Next page' | Name of the right arrow |
Built on Reka UI Pagination.