Skip to content

BbPagination

Navigates paginated data sets by page index.

import { BbPagination } from 'bitboss-ui';

On this page

Props

NameDescription
align Type: "left" | "center" | "right"Default"right"

Alignment of the pagination control.

Places the control inside its full-width row. right is the default because a pager usually sits under the trailing edge of a table.

See example
disabled Type: booleanDefaultfalse

Disables the component

Disable navigation while the application loads a page. Keep loading feedback on the list; v3 has no loading prop.

See example
ellipsis Type: stringDefault"..."

String of text displayed in place of hidden pages.

label Type: string

Label of the pagination navigation landmark. When unset, falls back to the localized pagination.label ('Pagination' / 'Paginazione').

Names the nav landmark. The localized default reads "Pagination", which stops being useful the moment a page has two lists — say which one this pages.

See example
maxSize Type: string | numberDefault6

Maximum number of clickable pages displayed at all times. This has a tolerance of +/- 1 for odd / even numbering. It does not include ellipses.

A maximum, not a promise — the strip also drops buttons when the container is too narrow, never below three. The count excludes the ellipses and Previous/Next, with a ±1 tolerance so the window stays balanced around the current page.

See example
modelValue Type: numberDefault1

Used by v-model. The 1-based index of the current page — pagination starts on the first page, not page 0.

navigation Type: booleanDefaultfalse

Synchronizes the current page with the URL. Pair it with replace — see that prop.

Writes the page into the URL; it never reads it. Seed the model from the route once at setup, or a shared link lands on page 1.

See example
perPage Type: string | number

Number of items per page. Together with totalItems it derives the page count (ceil(totalItems / perPage)); when unset, one page holds everything. With a tableId it is also published to the shared table context, exactly like the table's own per-page prop.

pt Type: (PtMap<BbPaginationPtPart, "disabled"> & { 'item:active'?: PtValue | undefined; })

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

pt:<part> Type: PtValue

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: arrow, ellipsis, icon, item, root. States: active, disabled.

See example
queryKey Type: stringDefault"page"

Defines the query key to reference for maintaining navigation.

Renamed from v2's all-lowercase querykey, and the break is silent: the old spelling is ignored, the parameter falls back to page, and every deep link and server route reading the old name breaks quietly.

See example
replace Type: booleanDefaultfalse

Replaces the history entry instead of pushing one when the page changes. Recommended with navigation: the URL keeps the page while Back leaves the list (without it, page 12 takes eleven Backs).

Effectively mandatory with navigation. Without it a reader who paged to 12 needs eleven presses of Back to leave the list.

See example
tableId Type: string

Pairs with the BbTable whose id matches, through the shared table context: the page syncs both ways and the context's page count drives the control. totalItems, perPage and totalPages set here are published to that context.

Replaces the manual wiring: no v-model, and mount order does not matter. A typo does not error — it just pairs with nothing and leaves you with a control that reports a page nobody reads.

See example
totalItems Type: string | number

Total number of items across all pages. When set, the page count is derived as ceil(totalItems / perPage) and wins over totalPages. With a tableId it is also published to the shared table context, exactly like the table's own total-items prop.

With per-page this derives the page count, and a derived count always wins over total-pages. Pass each fact to one component only when a table is paired — two different totals is an author error the library resolves arbitrarily.

See example
totalPages Type: string | number

Total number of pages. A shortcut for when the server reports a page count rather than a row count — a page count derived from totalItems (locally or through the shared table context) always wins over it. Falls back to 1 when nothing provides a count.

The shortcut for a server that reports pages rather than rows. It is only a seed: as soon as a real total-items exists, locally or through the shared table context, the derived count wins.

See example

v-model

Values kept in sync through v-model.

NameDescription
modelValue Type: number

The application-owned, 1-based page. A standalone pager clamps it; with table-id, the shared table context owns it.

See example

Events

NameDescription
update:modelValue Type: (value: number): void

Emitted with the new value whenever v-model changes.

The one event, and the only thing worth listening to — which buttons disable and where the ellipses fall is internal. Fetch or slice from the model, never from a click handler on a button.

See example

Slots

The listed properties are the ones exposed to the slot scope.

NameDescription
ellipsis Type: Record<string, never>

Replaces the default … ellipsis shown when pages overflow the visible range.

The fold marker is not a button — it renders as an aria-hidden span, so it never lands in the accessibility tree as focusless noise.

See example
item Type: BbPaginationItemSlotProps

Replaces the default page number button content for each individual page.

Repaints a page button; the button, its disabled state and its aria-current stay the component's. The scope carries active so the current page can look different.

See example
next Type: Record<string, never>

Replaces the default "next page" button content.

Same accessibility bill as previous: whatever you render here is now the button's entire accessible name.

See example
previous Type: Record<string, never>

Replaces the default "previous page" button content.

Replacing the chevron also replaces the visually hidden localized label behind it. Put a word in the button, or an sr-only span — the same applies to next.

See example

Renamed and removed

Names from v2 and from earlier 3.0 betas that no longer work, and what to write instead.

  • loadingremovedfails silently
  • pt:icon:activeremovedfails silently

    It never applied anything: active (the current page) is a state of item only (pt:item:active)

  • pt:root:activeremovedfails silently

    It never applied anything: active (the current page) is a state of item only (pt:item:active)

  • querykeyqueryKeyfails silently