Paginators

Svelte Component

Navigate between multiple pages of content.

@brainandbones/skeleton
View Source
Doc Source

Examples

Positions Name Weight Symbol
1Hydrogen1.0079H
2Helium4.0026He
3Lithium6.941Li
4Beryllium9.0122Be
5Boron10.811B

1 to 5 of 10

Usage

typescript 
const page: any = {
	offset: 0,
	limit: 5,
	size: source.length,
	amounts: [1,2,5,10],
};
html 
<Paginator
	bind:offset={page.offset}
	bind:limit={page.limit}
	bind:size={page.size}
	bind:amounts={page.amounts}
	on:page={onPageChange}
	on:amount={onAmountChange}
></Paginator>

Utilizing Pagination

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[] = [ /* 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>