Pagination

Demo & usage

More examples

<sv-pagination
  [totalItems]="240"
  [pageSize]="20"
  [pageSizeOptions]="[10, 20, 50]"
  [currentPage]="page"
  [showSummary]="true"
  (pageChange)="load($event)" />

When to use

• Job: result-set position — renders buttons and emits `pageChange`; it owns no data and no URL (compare all seven in the “Choosing a navigation pattern” guide under Guides).
• Splitting a large result set into navigable pages.
• Tables and lists where loading everything at once is impractical.
• For continuous feeds, infinite scroll (List View) can feel more fluid.

Async states

• loading
• error
• partial

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-pagination
  [pageSizeOptions]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  [hasMore]="data.hasMore()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `pageSizeOptions`, `loading` and `error`.
• `hasMore` and `loadMore` drive incremental paging; bind `hasMore` from the controller's own signal of the same name.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Ellipsis page window.
• Optional page-size selector.
• Three variants and sizes.

Best practices

• Do: Show a summary ("21–40 of 240") so users know where they are.
• Do: Keep the page window compact with ellipsis for large totals.
• Tip: Offer a `pageSizeOptions` selector for power users scanning lots of rows.

Accessibility

• Controls are labelled buttons inside a labelled nav landmark (`ariaLabel`).
• Current page exposed via aria-current.