Menu

Pagination Svelte component

This is a component that lets you paginate content.

The <Pagination> accepts a list of items as the items attribute. It will then expose the them as item for each item that should currently be shown.

Attribute
Type
Default
Description
items
Array of <T>
[]
The list of items to paginate
item
<T>
undefined
The item that should currently be shown
itemsPerPage
Number
5
The number of items that should be shown per page.
page
Number
0
The selected page. Either as a one time start value or with bind:page to have updates synced to the parent as well.

Check out the code at github.com/shadovo/svelper/../Pagination.svelte

Paginate list of strings

const smallItems = [ 'Item 1', 'Item 2', //... 'Item 20', ] <Pagination items={smallItems} itemsPerPage={4} let:item> <p>{item}</p> </Pagination>

Paginate list of objects

const items = [{ title: 'Item 1', text: 'Lorem ipsum...' },{ title: 'Item 2', text: 'Vivamus mattis...' },{ // ... },{ title: 'Item 30', text: 'Sed malesuada...' }] <Pagination {items} itemsPerPage={4} let:item> <div class="row"> <h4>{item.title}</h4> <p>{item.text}</p> </div> </Pagination>

Thanks for checking out the site! Feel free to use any and all parts of the code available at github ♥ Oscar.