Pagination

Installation

pnpm dlx @mielui/svelte add pagination

npx @mielui/svelte add pagination

yarn dlx @mielui/svelte add pagination

bunx @mielui/svelte add pagination

Usage

Bind page to the current page, starting at 1, and set total to the number of pages, not records. Load or show the matching records when page changes, or respond in onPageChange. The first and last pages always show.

siblings is how many pages show on each side of the current one, 1 by default and at most 100. Page numbers and totals are rounded down and kept in range; values that are not finite fall back to 1. Pagination renders no children, so put a page-size select or a result count beside it in your own layout.

<script lang="ts">
    import { Pagination } from '@mielui/svelte/components/pagination';

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

<Pagination bind:page total={20} />

Labels

Pass labels to translate the navigation landmark and the accessible names of the previous, next, and page buttons. page is a function that receives the page number. Every key of PaginationLabels is optional; omitted keys keep the English text.

<script lang="ts">
    import { Pagination, type PaginationLabels } from '@mielui/svelte/components/pagination';

    let page = $state(1);

    const labels: PaginationLabels = {
        navigation: 'Pagination',
        previous: 'Page précédente',
        next: 'Page suivante',
        page: (number) => `Page ${number}`
    };
</script>

<Pagination bind:page total={12} {labels} />