Svelte Component

Paginators

Navigate between multiple pages of content.

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

Demo

NameSymbolatomic Number
F Fluorine 9
Mg Magnesium 12
Zn Zinc 30
1 - 3 / 27

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>

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>

See Also

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

Table Component →