Responsive Svelte + Tailwind Pagination component

Simple pagination component built with svelte and tailwindcss

Installation

    $npm i @fouita/pagination -D

Simple usage

<script>
    import Pagination from '@fouita/pagination'
    let current =1
    let num_items=30
    let per_page=3
</script>

<Pagination bind:current={current} {num_items} {per_page} />

Style rounded

<Pagination rounded bind:current={current} {num_items} {per_page} />

Change Size to small

<Pagination small rounded bind:current={current} {num_items} {per_page} />

Change Color

You can use a color from tailwindcss list (gray, red, blue, indigo, pink, purple, teal, orange, yellow)

<Pagination small rounded color="pink" bind:current={current} {num_items} {per_page} />

Per page selection

You can add

<script>
	import Pagination from '@fouita/pagination'

	let current =1
	let num_items=30
	let per_page=3	
</script>
	
<div class="flex justify-between items-center">
	<div class="flex items-center">
		Per page:
		<select class="border px-2 rounded ml-2" bind:value={per_page}>
			<option>3</option>
			<option>5</option>
			<option>10</option>
		</select>
	</div>
	<Pagination small  bind:current={current} {num_items} per_page={per_page} />
</div>			  

Navigate Action

if you like to perform some actions or API requests when navigating through pages, you can do so by calling on:navigate event.

<script>
	import Pagination from '@fouita/pagination'

	let current =1
	let num_items=30
	let per_page=3	
	
	// let list_fetch = ... your init data
	async function changePage(evt){
		current = evt.detail
		// list_fetched = ... FETCH DATA HERE
	}
</script>

<Pagination small {current} {num_items} per_page={per_page} on:navigate={changePage} />

About

Fouita : UI framework for svelte + tailwind components