Pagination — usage examples

Pagination ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Pagination } from '@rozie-ui/pagination-react';

export function Demo() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      modelValue={page}
      onModelValueChange={setPage}
      total={195}
      pageSize={10}
      onChange={(e) => console.log('page:', e.page)}
    />
  );
}

// Headless: render your own page buttons via the scoped #item slot.
export function CustomDemo() {
  const [page, setPage] = useState(1);
  return (
    <Pagination
      modelValue={page}
      onModelValueChange={setPage}
      totalPages={20}
      siblingCount={2}
    >
      {{
        item: ({ page, selected, goto }) => (
          <button aria-current={selected ? 'page' : undefined} onClick={goto}>
            {page}
          </button>
        ),
      }}
    </Pagination>
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Pagination from '@rozie-ui/pagination-vue';

const page = ref(1);
function onChange(e: { page: number }) {
  console.log('page:', e.page);
}
</script>

<template>
  <Pagination v-model:modelValue="page" :total="195" :pageSize="10" @change="onChange" />

  <!-- Headless: render your own controls via the scoped #item slot -->
  <Pagination v-model:modelValue="page" :totalPages="20" :siblingCount="2">
    <template #item="{ page, selected, goto }">
      <button :aria-current="selected ? 'page' : undefined" @click="goto">{{ page }}</button>
    </template>
  </Pagination>
</template>

svelte

<script lang="ts">
  import Pagination from '@rozie-ui/pagination-svelte';

  let page = $state(1);
</script>

<Pagination
  bind:modelValue={page}
  total={195}
  pageSize={10}
  onchange={(e) => console.log('page:', e.page)}
/>

<!-- Headless: render your own controls via the #item snippet -->
<Pagination bind:modelValue={page} totalPages={20} siblingCount={2}>
  {#snippet item({ page, selected, goto })}
    <button aria-current={selected ? 'page' : undefined} onclick={goto}>{page}</button>
  {/snippet}
</Pagination>

import { Component } from '@angular/core';
import { Pagination } from '@rozie-ui/pagination-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Pagination],
  template: `
    <Pagination [(modelValue)]="page" [total]="195" [pageSize]="10" (change)="onChange($event)" />
  `,
})
export class DemoComponent {
  page = 1;
  onChange(e: { page: number }) {
    console.log('page:', e.page);
  }
}

tsx

import { createSignal } from 'solid-js';
import { Pagination } from '@rozie-ui/pagination-solid';

export function Demo() {
  const [page, setPage] = createSignal(1);
  return (
    <Pagination
      modelValue={page()}
      onModelValueChange={setPage}
      total={195}
      pageSize={10}
      onChange={(e) => console.log('page:', e.page)}
    />
  );
}

import '@rozie-ui/pagination-lit';

// <rozie-pagination> is a custom element. Bind `modelValue`/`total`/`pageSize`
// as properties and listen for `model-value-change` (the two-way page) +
// `change` (the page-change event).
const el = document.querySelector('rozie-pagination');
el.total = 195;
el.pageSize = 10;
el.modelValue = 1;
el.addEventListener('model-value-change', (e) => {
  el.modelValue = e.detail;
});
el.addEventListener('change', (e) => {
  console.log('page:', e.detail.page);
});

Imperative handle

Beyond props and events, Pagination exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Pagination, type PaginationHandle } from '@rozie-ui/pagination-react';

const pager = useRef<PaginationHandle>(null);
// <Pagination ref={pager} ... />
pager.current?.goto(5);
pager.current?.next();
pager.current?.first();

vue

<script setup>
import { ref } from 'vue';
const pager = ref();          // template ref
</script>

<template>
  <Pagination ref="pager" v-model:modelValue="page" :total="195" :pageSize="10" />
  <button @click="pager.next()">Next</button>
</template>

svelte

<script>
  let pager;                  // component instance via bind:this
</script>

<Pagination bind:this={pager} bind:modelValue={page} total={195} pageSize={10} />
<button onclick={() => pager.next()}>Next</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Pagination) pager!: Pagination;   // or the viewChild() signal
  goNext() { this.pager.next(); }
  jump() { this.pager.goto(5); }
}

tsx

import { Pagination, type PaginationHandle } from '@rozie-ui/pagination-solid';

let handle: PaginationHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Pagination ref={(h) => (handle = h)} modelValue={page()} total={195} pageSize={10} />;
handle?.next();

// The custom element IS the handle — exposed methods are public element methods.
const el = document.querySelector('rozie-pagination');
el.goto(5);
el.next();
el.first();

Pagination — usage examples ​

Usage ​

Imperative handle ​

See also ​

Pagination — usage examples

Usage

Imperative handle

See also