component

Pagination

props · 17 shown · 17 total

State

  • number
    default 10

    Items shown per page. The items-per-page selector offers `pageSizeOptions` filtered to those ≤ `itemsTotal`. Supports two-way binding.

  • number

    Total item count across all pages. Drives the "X – Y / Z" summary and, when `pageCount` is omitted, the derived page count + items-per-page capping.

  • number
    default 0

    Current page index. 0-based by default — set `zeroBased={false}` for 1-based indexing. Supports two-way binding. Omitted, it is the first page: `0`, or `1` when `zeroBased` is `false`.

  • number

    Explicit total page count. Wins over the value derived from `itemsTotal` / `itemsPerPage` — a host with server-side pagination (only one page of rows in memory) passes its known total here.

Appearance

  • "primary" "secondary" "ghost"
    default "secondary"

    Emphasis for the navigation buttons.

  • "lg" "md" "sm"
    default "sm"

    Layout scale; also mirrored onto the child Button/Select `size`.

Behavior

  • (itemsPerPage: number) => void

    Fires with the new page size when the items-per-page select changes.

  • onChangePage svelte
    (page: number, oldPage: number) => void

    Fires with the new page (and the previous one) whenever navigation or the page select commits a change.

  • onFirst svelte
    () => void

    Fires after the first-page button commits its page change.

  • onLast svelte
    () => void

    Fires after the last-page button commits its page change.

  • onNext svelte
    () => void

    Fires after the next button commits its page change.

  • onPrevious svelte
    () => void

    Fires after the previous button commits its page change.

  • number[]
    default [10, 20, 50, 100]

    Options offered by the items-per-page select.

  • boolean
    default true

    Whether `page` uses 0-based indexing (page 0 = first page). When `false`, uses 1-based indexing (page 1 = first page).

Accessibility

  • PaginationLabels

    Localize every string the pagination renders. The control keys (`first`, `previous`, `next`, `last`, `page`, `itemsPerPage`) accept `text` to change the copy and `visuallyHidden` to toggle screen-reader-only vs visible (navigation buttons default to `visuallyHidden: true` — icon-only, with the text as `aria-label`). The dynamic readouts `summary` ("1 - 10 / 95") and `pageOf` ("/ 10") accept a function of their values or a `{placeholder}` template string, so any word order works. Omitted keys keep the English defaults. In Astro, prefer template strings: functions can't cross the SSR → client boundary, so the hydrated controls would fall back to the defaults after the first interaction.

Advanced

  • string

    Stable id used to associate `<label>`s with their `<select>`s.

  • PaginationPassThrough<RootElementAttributes>

    Per-slot escape hatch. Container slots accept `style` (merged into the slot class) and `props`; control slots forward `props` onto the child Button/Select. See the PassThrough docs.

Plus all standard <div> HTML attributes.

Type

  • Components
  • Blocks