◇

Pagination

8 parts

Splits a large collection into discrete pages and lets users move between them. Use it for paged tables, search results, or any list too long to show at once — pair it with server- or client-side data fetching keyed off the current page. The root owns the current page (controlled via v-model:page or uncontrolled via defaultPage), derives the total page count from total and pageSize, and provides context to every child part (list, items, ellipsis, and the first/prev/next/last controls). The default slot exposes page and pageCount.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  PaginationRoot,
  PaginationList,
  PaginationListItem,
  PaginationEllipsis,
  PaginationFirst,
  PaginationLast,
  PaginationPrev,
  PaginationNext,
} from '@robonen/primitives/navigation/pagination';

<PaginationRoot>
  <PaginationList />
  <PaginationListItem />
  <PaginationEllipsis />
  <PaginationFirst />
  <PaginationLast />
  <PaginationPrev />
  <PaginationNext />
</PaginationRoot>

API Reference

PaginationRoot

Root

Splits a large collection into discrete pages and lets users move between them. Use it for paged tables, search results, or any list too long to show at once — pair it with server- or client-side data fetching keyed off the current page. The root owns the current page (controlled via `v-model:page` or uncontrolled via `defaultPage`), derives the total page count from `total` and `pageSize`, and provides context to every child part (list, items, ellipsis, and the first/prev/next/last controls). The default slot exposes `page` and `pageCount`.

Prop	Type	Default	Description
`total`?	`number`	`0`	Total number of items across all pages.
`pageSize`?	`number`	`10`	Number of items per page; combined with `total` to derive the page count.
`siblingCount`?	`number`	`1`	Number of page links to show on each side of the current page.
`showEdges`?	`boolean`	`false`	Always render the first and last page links, even when ellipses are shown.
`disabled`?	`boolean`	`false`	Disable the whole pagination, including every control.
`defaultPage`?	`number`	`1`	Initial page for uncontrolled usage (when `v-model:page` is not bound).
`label`?	`string \| null`	`'pagination'`	Accessible name for the navigation landmark, applied as `aria-label` on the root. Pass `null` to opt out of the label entirely.
`page`?	`number`	—	Two-way bound value (`v-model:page`).

Emits

Event	Payload
`update:page`	`[value: number]`

PaginationList

List

The container that computes the visible page sequence (page numbers and ellipsis placeholders) from the root context. Its default slot exposes the resolved `items` array so you can render a `PaginationListItem` per page and a `PaginationEllipsis` per gap.

No props or events — renders its element and forwards attributes.

PaginationListItem

ListItem

A single page link. Renders as a `<button>` that selects its `value` page on click, marks itself with `aria-current="page"` and `data-selected` when it is the current page, and is disabled while the pagination is disabled.

Prop	Type	Default	Description
`value`	`number`	—	The page number this item navigates to.

PaginationEllipsis

Ellipsis

A non-interactive placeholder shown where page links are collapsed into a gap. Render one for each ellipsis entry in the list's `items`; defaults to an ellipsis character but accepts custom content via the default slot.

No props or events — renders its element and forwards attributes.

PaginationFirst

First

A button that jumps to the first page. Renders as a `<button>`, is automatically disabled when already on the first page (or the pagination is disabled), and is labelled "First Page" for assistive technology.

No props or events — renders its element and forwards attributes.

PaginationLast

Last

A button that jumps to the last page. Renders as a `<button>`, is automatically disabled when already on the last page (or the pagination is disabled), and is labelled "Last Page" for assistive technology.

No props or events — renders its element and forwards attributes.

PaginationPrev

A button that moves to the previous page. Renders as a `<button>`, is automatically disabled on the first page (or while the pagination is disabled), and is labelled "Previous Page" for assistive technology.

No props or events — renders its element and forwards attributes.

PaginationNext

A button that moves to the next page. Renders as a `<button>`, is automatically disabled on the last page (or while the pagination is disabled), and is labelled "Next Page" for assistive technology.

No props or events — renders its element and forwards attributes.