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 
$: page = {
	offset: 0,
	limit: 5,
	size: sourceData.length,
	amounts: [1,2,5,10],
};
html 
<Paginator bind:settings={page} on:page={onPageChange} on:amount={onAmountChange}></Paginator>

Reactive Slicing

Once your paginator component is setup you'll need to limit your content. This can be accomplished with the JavaScript slice method. See a minimal example below.

typescript 
const source = [ /* any array of objects */ ]
typescript 
$: sourcePaginated = source.slice(
	page.offset * page.limit, // start
	page.offset * page.limit + page.limit // end
);
html 
<ul>
	{#each sourcePaginated as row}
		<li>{row}</li>
	{/each}
</ul>