Vitral 0.2
Data

Paginator

Moves through pages of data, with first, previous, numbered, next and last buttons, and a rows-per-page choice.

WAI-ARIA tested

Import

main.ts
import { Paginator } from '@vitral/vue';

Basic

120 records, ten per page, with a choice of page size.

first = 0, rows = 10
<script setup lang="ts">import { Paginator, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const first = ref(0);const rows = ref(10);const lastEvent = ref('');</script> <template>    <StackPanel spacing="1rem" style="width: 100%">        <Paginator            v-model:first="first"            v-model:rows="rows"            :total-records="120"            :rows-per-page-options="[10, 20, 50]"            @page="lastEvent = `page ${$event.page + 1} of ${$event.pageCount}, first row ${$event.first}`"        />        <small style="color: var(--vt-text-muted-color)">first = {{ first }}, rows = {{ rows }}{{ lastEvent ? ` — ${lastEvent}` : '' }}</small>    </StackPanel></template>

Current page report

The report follows the locale (`pageReport`); a template of your own can say it differently.

<script setup lang="ts">import { Paginator, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const first = ref(40);const rows = ref(20);</script> <template>    <StackPanel spacing="1rem" style="width: 100%">        <Paginator            v-model:first="first"            v-model:rows="rows"            :total-records="1287"            template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"            :rows-per-page-options="[20, 50, 100]"        />        <Paginator v-model:first="first" v-model:rows="rows" :total-records="1287" template="PrevPageLink PageLinks NextPageLink CurrentPageReport" current-page-report-template="Page {page} of {pageCount}" :page-link-size="7" />    </StackPanel></template>

Start and end content

<script setup lang="ts">import { Paginator, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const first = ref(0);</script> <template>    <StackPanel spacing="1rem" style="width: 100%">        <Paginator v-model:first="first" :rows="25" :total-records="340" template="PrevPageLink PageLinks NextPageLink" :page-link-size="3">            <template #start="{ page, pageCount }">                <small style="color: var(--vt-text-muted-color)">Invoices · page {{ page + 1 }} of {{ pageCount }}</small>            </template>            <template #end>                <small style="color: var(--vt-text-muted-color)">340 invoices</small>            </template>        </Paginator>    </StackPanel></template>

API

Read from packages/vue/src/components/Paginator/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
totalRecordsnumberRows in the whole data, across pages.
rowsPerPageOptionsnumber[]Choices for the rows-per-page select; it is left out without them.
pageLinkSizenumberHow many page links to show around the current one.
templatePaginatorTemplateItem[] | stringThe pieces to render, in order: a list, or a space-separated string.
currentPageReportTemplatestring`{first}`, `{last}`, `{total}`, `{page}`, `{pageCount}`, `{rows}`. Defaults to the locale's `pageReport`.
alwaysShowbooleanRender even when everything fits on one page.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
pageevent: PaginatorPageEvent—

Slots

NameSlot propsDescription
start(props: PaginatorPageEvent)Content before the controls: a summary, an export button.
end(props: PaginatorPageEvent)Content after the controls.