Pagination | Tuff Docs

<script>
import { ref } from 'vue'
const page = ref(1)
</script>

Usage

total and pageSize set the page count; show-info adds page info and show-first-last adds first and last buttons.

Loading demo...

page-sizes adds a size selector after the page buttons. Changing the size leaves the page alone; the host decides whether to return to page 1.

Loading demo...

Place pagination right below the table, bound to the same reactive state as filtering and selection.

Loading demo...

Prefer total with pageSize; use totalPages only when the backend returns a page count alone.
Keep currentPage one-based and initialize it to 1.
Reset currentPage to 1 when filters, search terms, or the page size change.
Use pageSizes instead of your own size select: it is named by a visible label and shares the pagination's row.
Use the info slot for localized range copy, such as "Viewing 21–40 of 120 items".

Property	Default	Description
currentPage		Current page, counted from 1
pageSize		Items per page; pair with v-model:page-size when the reader can change it
pageSizes		Size choices that render a size selector; invalid sizes are dropped, and a missing pageSize joins them
pageSizeLabel		Visible label before the size selector; also names the selector
total	-	Total item count; when omitted or 0, totalPages is used instead
totalPages	-	Explicit page count, used when total is not provided
prevIcon		Previous-page icon class rendered by TxIcon; empty uses the built-in chevron
nextIcon		Next-page icon class rendered by TxIcon; empty uses the built-in chevron
showInfo		Shows page and total info
showFirstLast		Shows first and last buttons
ariaLabel		The aria-label of the root nav landmark
firstLabel		The first-page button's aria-label
prevLabel		The previous-page button's aria-label
nextLabel		The next-page button's aria-label
lastLabel		The last-page button's aria-label

Property	Default	Description
update:currentPage	-	Current-page update (v-model)
pageChange	-	Fires when the user moves to another page
update:pageSize	-	Page-size update (v-model) when the reader picks another size; the page is unchanged
pageSizeChange	-	Fires when the reader picks another page size

Property	Type	Default	Description
info		-	Custom page info area

The page count comes from total and pageSize; when total is omitted or 0, totalPages is used.
When currentPage falls out of range, the component emits update:currentPage with the nearest valid page.
The active page button has aria-current="page"; previous, next, first, and last buttons have readable aria-labels and disable at the boundaries.
The size selector renders only with valid pageSizes, and its combobox is named by the visible label through aria-labelledby; otherwise the DOM is unchanged.
Picking a different size emits update:pageSize, then pageSizeChange, and leaves the page alone.
The on-demand style plugin loads the selector's styles too; manual style imports also need select/style.css and its dependencies.

packages/tuffex/packages/components/src/pagination/index.ts