Svelte Component

Paginators

Navigate between multiple pages of content.

typescript
import { Paginator } from '@skeletonlabs/skeleton';
Source Page Source

Demo

NameSymbolatomic Number
Pb Lead 82
Cn Copernicium 112
Rb Rubidium 37

Numeric Row

Use showNumerals to replace the text information with a row of buttons that allow you to quickly navigate pages. We recommend a small maxNumerals amount if you plan to support mobile devices with limited screen real estate.

NameSymbolatomic Number
Pb Lead 82
Cn Copernicium 112
Rb Rubidium 37

Client-Side Pagination

Once your paginator component is setup you'll need to subdivide your local source content. This can be accomplished using Svelte's reactive properties paired with the JavaScript slice method.

typescript
$: paginatedSource = source.slice(
	paginationSettings.page * paginationSettings.limit,
	paginationSettings.page * paginationSettings.limit + paginationSettings.limit
);
html
<ul>
	{#each paginatedSource as row}
		<li>{row}</li>
	{/each}
</ul>

Or combine with the Table component.

typescript
let tableHeaders: string[] = ['Positions', 'Name', 'Weight', 'Symbol'];
html
<Table source={{ head: tableHeaders, body: paginatedSource }} />

Server-Side Pagination

Use the page and amount events to notify your server of pagination updates.

typescript
function onPageChange(e: CustomEvent): void {
	console.log('event:page', e.detail);
}

function onAmountChange(e: CustomEvent): void {
	console.log('event:amount', e.detail);
}
html
<Paginator ... on:page={onPageChange} on:amount={onAmountChange}></Paginator>

Handling Reactivity

Use the following technique if you wish to update pagination data in a reactive manner. Make sure to update paginationSettings directly, as updating a reference to source will not trigger the reactivity.

typescript
let paginationSettings = {
    page: 0,
    limit: 5,
    size: source.length,
    amounts: [1, 2, 5, 10],
} satisfies PaginationSettings;

$: paginationSettings.size = source.length;

See Also

Utilize a data-driven model to create simple presentational tables.

Table Component →