Usage

Pagination splits a long list into pages. People move with the page buttons or the previous and next controls.

Pass the total and bind the current page:

<script setup lang="ts">
import { Pagination } from '@astryx-vue/core/Pagination'
import { ref } from 'vue'

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

<template>
  <Pagination v-model:page="page" :total="total" />
</template>

pageSize is how many items each page holds. showSizeChanger lets people change that. showTotal shows how many items exist and which range the current page covers.

The visible labels are English unless the app calls provideAstryxLocale('zh-CN').

Anatomy

Element	Description
Pagination	Navigation landmark containing the current paging controls and optional page-size selector.
Page-size selector	Optional Selector for choosing how many items appear per page.
First/last buttons	Optional Button controls that jump to the first or last known page.
Previous/next buttons	Button controls that move backward or forward through the pages.
Page number button	Button for one directly selectable page in the numbered presentation.
Ellipsis	Visual omission marker between non-adjacent page-number buttons.
Count readout	Text showing the current item range and total item count.
Compact readout	Text showing the current page and total page count.
Dot	Page indicator control that reflects and changes the active page.
Page input label	Leading visible label for the editable page-number field.
Page input	NumberInput used to enter a page directly.
Page input total	Trailing text showing the known total page count.

Best practices

Guideline	Practice
Do	Use it under tables and lists that are too long for one page.
Do	Offer showSizeChanger when the list is large enough that page length matters.
Do	Show the total and the current range so people know how much data there is.
Don't	Rely on a long row of page buttons on a narrow screen. Keep the control compact.

Examples

Dots carousel

A thorough report was done on our financial situation. Better deals were found and processed on our behalf, which took a lot of stress away.

JG

Jeannie GrantJune 01, 2025

Dot pagination steps through a short set of review cards, where position matters more than a page number.

Page size selector

Transactions

Date	Description	Amount
Apr 18	Payment received	$2,450.00
Apr 15	Subscription renewal	$99.00
Apr 12	Refund issued	-$180.00
Apr 10	Invoice paid	$1,200.00

1–10 of 350

Per page

Select…

Pagination sits under a transactions table, with a control for how many rows each page holds.

With table

Name	Role	Status
Olivia Chen	Engineer	Active
Marcus Rivera	Designer	Active
Aisha Patel	Marketing	Invited
James Okafor	Engineer	Active

1–4 of 12

The count variant under a table, at the small size, shows the item range for the current page.

Page input

Page/ 24

Type a page number to jump. First and last sit outside the previous and next buttons. When the total is unknown, pass hasMore instead of a last page.