Pagination
Default
<script lang="ts">
import { page } from '$app/stores';
import { Pagination, Button, type PaginationItemProps } from 'svelte-5-ui-lib';
let activeUrl = $state($page.url.searchParams.get('page'));
let pages = $state([
{ name: '1', href: '/components/pagination?page=1', active: false },
{ name: '2', href: '/components/pagination?page=2', active: false },
{ name: '3', href: '/components/pagination?page=3', active: false },
{ name: '4', href: '/components/pagination?page=4', active: false },
{ name: '5', href: '/components/pagination?page=5', active: false }
]);
const previous = () => {
alert('Previous btn clicked. Make a call to your server to fetch data.');
};
const next = () => {
alert('Next btn clicked. Make a call to your server to fetch data.');
};
let pagenationSize: PaginationItemProps['size'] = $state('default');
const changeSize = () => {
pagenationSize = pagenationSize === 'large' ? 'default' : 'large';
};
const changeActivePage = () => {
pages.forEach((page) => {
let splitUrl = page.href?.split('?');
let queryString = splitUrl?.slice(1).join('?');
const hrefParams = new URLSearchParams(queryString);
let hrefValue = hrefParams.get('page');
if (hrefValue === activeUrl) {
page.active = true;
} else {
page.active = false;
}
});
};
changeActivePage();
$effect(() => {
changeActivePage();
});
</script>
{activeUrl}
<div class="flex flex-col items-center justify-center gap-3">
<div class="h-12">
<Pagination {pages} {previous} {next} size={pagenationSize} />
</div>
<Button onclick={changeSize}>
{#if pagenationSize === 'default'}
Large
{:else}
Default
{/if}
</Button>
</div>
Event
<script lang="ts">
import { page } from '$app/stores';
import { Pagination } from 'svelte-5-ui-lib';
let activeUrl = $state($page.url.searchParams.get('page'));
let pages = $state([
{ name: '1', href: '/components/pagination?page=1', active: false },
{ name: '2', href: '/components/pagination?page=2', active: false },
{ name: '3', href: '/components/pagination?page=3', active: false },
{ name: '4', href: '/components/pagination?page=4', active: false },
{ name: '5', href: '/components/pagination?page=5', active: false }
]);
const previous = () => {
alert('Previous btn clicked. Make a call to your server to fetch data.');
};
const next = () => {
alert('Next btn clicked. Make a call to your server to fetch data.');
};
const handleClick = () => {
alert('Page clicked');
};
$effect(() => {
pages.forEach((page) => {
let splitUrl = page.href.split('?');
let queryString = splitUrl.slice(1).join('?');
const hrefParams = new URLSearchParams(queryString);
let hrefValue = hrefParams.get('page');
if (hrefValue === activeUrl) {
page.active = true;
} else {
page.active = false;
}
});
pages = pages;
});
</script>
<div class="flex flex-col items-center justify-center gap-3">
<Pagination {pages} {previous} {next} onclick={handleClick} />
</div>
Icons
<script lang="ts">
import { Pagination } from 'svelte-5-ui-lib';
import { ChevronLeftOutline, ChevronRightOutline } from 'flowbite-svelte-icons';
let pages = $state([
{ name: '1', href: '/components/pagination?page=1', active: false },
{ name: '2', href: '/components/pagination?page=2', active: false },
{ name: '3', href: '/components/pagination?page=3', active: false },
{ name: '4', href: '/components/pagination?page=4', active: false },
{ name: '5', href: '/components/pagination?page=5', active: false }
]);
const previous = () => {
alert('Previous btn clicked. Make a call to your server to fetch data.');
};
const next = () => {
alert('Next btn clicked. Make a call to your server to fetch data.');
};
</script>
<div class="flex flex-col items-center justify-center gap-3">
<Pagination {pages} {previous} {next}>
{#snippet prevContent()}
<span class="sr-only">Previous</span>
<ChevronLeftOutline class="h-5 w-5" />
{/snippet}
{#snippet nextContent()}
<span class="sr-only">Next</span>
<ChevronRightOutline class="h-5 w-5" />
{/snippet}
</Pagination>
</div>
Previous and next
<script lang="ts">
import { PaginationItem } from 'svelte-5-ui-lib';
const previous = () => {
alert('Previous btn clicked. Make a call to your server to fetch data.');
};
const next = () => {
alert('Next btn clicked. Make a call to your server to fetch data.');
};
</script>
<div class="flex flex-col items-center justify-center gap-3">
<div class="flex space-x-3 rtl:space-x-reverse">
<PaginationItem onclick={previous}>Previous</PaginationItem>
<PaginationItem onclick={next}>Next</PaginationItem>
</div>
</div>
Previous and next with icons
Showing 1 to 10 of 100 Entries
<script lang="ts">
import { Pagination } from 'svelte-5-ui-lib';
import { ArrowLeftOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
let helper = { start: 1, end: 10, total: 100 };
const previous = () => {
alert('Previous btn clicked. Make a call to your server to fetch data.');
};
const next = () => {
alert('Next btn clicked. Make a call to your server to fetch data.');
};
</script>
<div class="flex flex-col items-center justify-center gap-3">
<div class="flex flex-col items-center justify-center gap-2">
<div class="text-sm text-gray-700 dark:text-gray-400">
Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
to
<span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
of
<span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
Entries
</div>
<Pagination table {previous} {next}>
{#snippet prevContent()}
<div class="flex items-center gap-2 bg-gray-800 text-white">
<ArrowLeftOutline class="me-2 h-5 w-5" />
Prev
</div>
{/snippet}
{#snippet nextContent()}
<div class="flex items-center gap-2 bg-gray-800 text-white">
Next
<ArrowRightOutline class="ms-2 h-5 w-5" />
</div>
{/snippet}
</Pagination>
</div>
</div>
Table data pagination
Showing 1 to 10 of 100 Entries
<script lang="ts">
import { Pagination } from 'svelte-5-ui-lib';
const previous = () => {
alert('Previous btn clicked. Make a call to your server to fetch data.');
};
const next = () => {
alert('Next btn clicked. Make a call to your server to fetch data.');
};
let helper = { start: 1, end: 10, total: 100 };
</script>
<div class="flex flex-col items-center justify-center gap-3">
<div class="flex flex-col items-center justify-center gap-2">
<div class="text-sm text-gray-700 dark:text-gray-400">
Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
to
<span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
of
<span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
Entries
</div>
<Pagination table {previous} {next} />
<Pagination table size="large" {previous} {next} />
</div>
</div>
Table data with icons
Showing 1 to 10 of 100 Entries
<script lang="ts">
import { Pagination } from 'svelte-5-ui-lib';
import { ArrowLeftOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
const previous = () => {
alert('Previous btn clicked. Make a call to your server to fetch data.');
};
const next = () => {
alert('Next btn clicked. Make a call to your server to fetch data.');
};
let helper = { start: 1, end: 10, total: 100 };
</script>
<div class="flex flex-col items-center justify-center gap-3">
<div class="flex flex-col items-center justify-center gap-2">
<div class="text-sm text-gray-700 dark:text-gray-400">
Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
to
<span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
of
<span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
Entries
</div>
<Pagination table {previous} {next}>
{#snippet prevContent()}
<div class="flex items-center gap-2 bg-gray-800 text-white">
<ArrowLeftOutline class="me-2 h-5 w-5" />
Prev
</div>
{/snippet}
{#snippet nextContent()}
<div class="flex items-center gap-2 bg-gray-800 text-white">
Next
<ArrowRightOutline class="ms-2 h-5 w-5" />
</div>
{/snippet}
</Pagination>
</div>
</div>