Pagination
Move between pages with Previous, Next and page numbers below a list or table.
<script setup lang="ts">import { ref } from 'vue'import { UiPagination } from 'grani' const page = ref(1)</script> <template> <UiPagination v-model:page="page" :page-size="10" :total="50" class="text-center" /></template>
Also called pager, page navigation.
Usage
<UiPagination v-model:page="page" :page-size="pageSize" :total="total"/>
With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| page*number | Current page, from 1 (v-model:page). | |
| State | ||
| loadingboolean= false | false | A page is on its way: the pressed arrow shows a spinner and keeps the focus, the numbers are held, and a press asks nothing. Pass the list's loading flag. |
| Behavior | ||
| pageSize*number | Records per page; the page count is derived from it and total. Changing it is not this component's job. | |
| total*number | Total records. | |
| compactboolean= false | false | "N / M" instead of page numbers, for a narrow row. |
| siblingsnumber= 1 | 1 | Pages shown on each side of the current one. |
| boundarynumber= 1 | 1 | Pages always shown at each end. |
| Look | ||
| sizexs | sm | md | Control size shared by every button in the row. Unset, the app's size (createGrani({ size })), sm by default. | |
| Form and access | ||
| disabledboolean= false | false | The row cannot page at all: the arrows are off, the numbers are held. A load is loading. |
Anything else lands on the root element: native attributes, aria-*, data-testid.
When to use another component
| When you need | Take |
|---|---|
| A list that loads and owns its page | Data table around the table |
| Older events at the end of a timeline | Log with hasMore |
| Views of one page | Tabs |