Installation

Barrel

import { Pagination, PaginationControls, PaginationInfo, PaginationPageSize, PaginationSeparator } from 'kumo-svelte';

Granular

import { Pagination, PaginationControls, PaginationInfo, PaginationPageSize, PaginationSeparator } from 'kumo-svelte/components/pagination';

Usage

<script lang="ts">  import { Pagination } from 'kumo-svelte';  let page = $state(1);</script><Pagination bind:page perPage={10} totalCount={100} />

Examples

Full Controls (Default)

The default pagination includes first, previous, page input, next, and last buttons.

Simple Controls

Use controls="simple" for a minimal pagination with only previous and next buttons.

Mid-Page State

Pagination in the middle of a dataset with all navigation enabled.

Large Dataset

Pagination handles large datasets with many pages.

Custom Text

You can set custom pagination text.

Compound Components

For more control over layout and features, use the compound component API. This allows you to compose Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator in any order.

Import the compound pieces from the package barrel:

<script lang="ts">  import { Pagination } from 'kumo-svelte';  let page = $state(1);  let perPage = $state(25);</script><Pagination bind:page {perPage} totalCount={500}>  <Pagination.Info />  <Pagination.Separator />  <Pagination.PageSize bind:value={perPage} onChange={(size) => {    perPage = size;    page = 1;  }} />  <Pagination.Controls /></Pagination>

Page Size Selector

Add a dropdown to let users select the number of items per page.

Custom Page Size Options

Customize the available page size options with the options prop. Defaults to [25, 50, 100, 250].

Custom Info Text

Use a render function to customize the info text.

Custom Layout

Arrange components in any order. Here the page size selector is on the right.

Dropdown Page Selector

Use pageSelector="dropdown" on Pagination.Controls to render a dropdown select instead of a text input for page navigation. This is useful when you want users to pick from a list of available pages rather than typing a number.

Internationalization

Use the labels prop to customize all UI strings for different locales. All labels default to English.

API Reference