Paginators

Svelte Component

Navigate between multiple pages of content.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

PositionsNameWeightSymbol
1 Hydrogen 1.0079 H
2 Helium 4.0026 He
3 Lithium 6.941 Li
4 Beryllium 9.0122 Be
5 Boron 10.811 B
1 - 5 / 10

Getting Started

typescript 
const source = [ /* any array of objects */ ];
typescript 
let page = {
	offset: 0,
	limit: 5,
	size: source.length,
	amounts: [1,2,5,10],
};
html 
<Paginator bind:settings={page}></Paginator>

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(
	page.offset * page.limit,             // start
	page.offset * page.limit + page.limit // end
);
html 
<ul>
	{#each paginatedSource as row}
		<li>{row}</li>
	{/each}
</ul>

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>