SpPagination

import { useState } from 'react';
import { SpPagination } from '@silverpoint/react/ui/pagination';

export function Pages() {
  const [page, setPage] = useState(3);
  // total: items in all pages; pageSize defaults to 10. onChange receives the page number.
  return <SpPagination total={240} current={page} onChange={setPage} showTotal />;
}

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

const page = ref(3);
</script>

<template>
  <SpPagination v-model:current="page" :total="240" show-total />
</template>

import { Component, signal } from '@angular/core';
import { SpPagination } from '@silverpoint/angular/ui/pagination';

@Component({
  selector: 'app-pages',
  imports: [SpPagination],
  template: `<sp-pagination [(current)]="page" [total]="240" [showTotal]="true" />`,
})
export class Pages {
  protected readonly page = signal(3);
}

sp_pagination(
    total=240,  # items in all pages; page_size=10 by default
    current=State.page,
    on_change=State.set_page,  # receives the page number
    show_total=True,  # "21–30 of 240"
)