Pagination

ID	Name	Email	Country
1	Andre Roberts	Margie.Kuhlman94@yahoo.com	Panama
2	Jeanne Tremblay Sr.	Ocie.Abshire77@yahoo.com	Cocos (Keeling) Islands
3	Earnest Johnson	Maureen2@hotmail.com	Saint Barthelemy
4	Oliver Lindgren MD	Burnice92@yahoo.com	Pakistan
5	Cora Friesen	Lorenzo.Murazik@gmail.com	Palau

import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

const PAGE_SIZE = 5;

export default function Default() {
	const [page, setPage] = useState(1);

	const start = (page - 1) * PAGE_SIZE;
	const end = start + PAGE_SIZE;
	const data = users.slice(start, end);

	return (
		<div className="grid gap-4 w-full place-items-center">
			<table className="table table-auto">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Email</th>
						<th>Country</th>
					</tr>
				</thead>
				<tbody>
					{data.map((user) => (
						<tr key={user.id}>
							<td>{user.id}</td>
							<td>{user.name}</td>
							<td>{user.email}</td>
							<td>{user.country}</td>
						</tr>
					))}
				</tbody>
			</table>
			<Pagination count={users.length} pageSize={PAGE_SIZE} page={page} onPageChange={(event) => setPage(event.page)}>
				<Pagination.PrevTrigger>
					<ArrowLeftIcon className="size-4" />
				</Pagination.PrevTrigger>
				<Pagination.Context>
					{(pagination) =>
						pagination.pages.map((page, index) =>
							page.type === 'page' ? (
								<Pagination.Item key={index} {...page}>
									{page.value}
								</Pagination.Item>
							) : (
								<Pagination.Ellipsis key={index} index={index}>
									&#8230;
								</Pagination.Ellipsis>
							),
						)
					}
				</Pagination.Context>
				<Pagination.NextTrigger>
					<ArrowRightIcon className="size-4" />
				</Pagination.NextTrigger>
			</Pagination>
		</div>
	);
}

ID	Name	Email	Country
1	Omar Kilback	Cielo.Torphy@gmail.com	Venezuela
2	Louise Williamson	Mae35@gmail.com	Kyrgyz Republic
3	Jeff Effertz	Daphney_Kautzer@hotmail.com	Nicaragua
4	Gwendolyn Block	Jaden.Lehner54@hotmail.com	China
5	Rosemary O'Reilly	Geoffrey_Parisian@hotmail.com	Saint Martin

1 2 3 4 5…100

<script lang="ts" module>
	import { faker } from '@faker-js/faker';

	const users = Array.from({ length: 500 }, (_, i) => ({
		id: i + 1,
		name: faker.person.fullName(),
		email: faker.internet.email(),
		country: faker.location.country(),
	}));

	const PAGE_SIZE = 5;
</script>

<script>
	import { ArrowLeftIcon, ArrowRightIcon } from '@lucide/svelte';
	import { Pagination } from '@skeletonlabs/skeleton-svelte';

	let page = $state(1);

	const start = $derived((page - 1) * PAGE_SIZE);
	const end = $derived(start + PAGE_SIZE);
	const data = $derived(users.slice(start, end));
</script>

<div class="grid gap-4 w-full place-items-center">
	<table class="table table-auto">
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Email</th>
				<th>Country</th>
			</tr>
		</thead>
		<tbody>
			{#each data as user}
				<tr>
					<td>{user.id}</td>
					<td>{user.name}</td>
					<td>{user.email}</td>
					<td>{user.country}</td>
				</tr>
			{/each}
		</tbody>
	</table>

	<Pagination count={users.length} pageSize={PAGE_SIZE} {page} onPageChange={(event) => (page = event.page)}>
		<Pagination.PrevTrigger>
			<ArrowLeftIcon class="size-4" />
		</Pagination.PrevTrigger>
		<Pagination.Context>
			{#snippet children(pagination)}
				{#each pagination().pages as page, index (page)}
					{#if page.type === 'page'}
						<Pagination.Item {...page}>
							{page.value}
						</Pagination.Item>
					{:else}
						<Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
					{/if}
				{/each}
			{/snippet}
		</Pagination.Context>
		<Pagination.NextTrigger>
			<ArrowRightIcon class="size-4" />
		</Pagination.NextTrigger>
	</Pagination>
</div>

Page Size

ID	Name	Email	Country
1	Kristi Jast	Reagan.Pfeffer78@hotmail.com	Rwanda
2	Dr. Bobbie Weissnat	Chasity_Krajcik@gmail.com	Bolivia
3	Joseph Maggio	Brandon.Wiza-Anderson40@yahoo.com	Mongolia
4	Jimmie Collier DDS	Uriel_Armstrong8@gmail.com	Austria
5	Wm Wyman	Annetta1@hotmail.com	Nigeria

import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

export default function Default() {
	const [page, setPage] = useState(1);
	const [pageSize, setPageSize] = useState(5);

	const start = (page - 1) * pageSize;
	const end = start + pageSize;
	const data = users.slice(start, end);

	return (
		<div className="grid gap-4 w-full place-items-center">
			<table className="table table-auto">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Email</th>
						<th>Country</th>
					</tr>
				</thead>
				<tbody>
					{data.map((user) => (
						<tr key={user.id}>
							<td>{user.id}</td>
							<td>{user.name}</td>
							<td>{user.email}</td>
							<td>{user.country}</td>
						</tr>
					))}
				</tbody>
			</table>
			<div className="flex justify-between items-center gap-4 w-full">
				<label className="label">
					<span className="sr-only">Page Size</span>
					<select className="select w-fit" value={String(pageSize)} onChange={(e) => setPageSize(Number(e.currentTarget.value))}>
						<option value="5">5</option>
						<option value="10">10</option>
						<option value="20">20</option>
					</select>
				</label>

				<Pagination count={users.length} pageSize={pageSize} page={page} onPageChange={(event) => setPage(event.page)}>
					<Pagination.PrevTrigger>
						<ArrowLeftIcon className="size-4" />
					</Pagination.PrevTrigger>
					<Pagination.Context>
						{(pagination) =>
							pagination.pages.map((page, index) =>
								page.type === 'page' ? (
									<Pagination.Item key={index} {...page}>
										{page.value}
									</Pagination.Item>
								) : (
									<Pagination.Ellipsis key={index} index={index}>
										&#8230;
									</Pagination.Ellipsis>
								),
							)
						}
					</Pagination.Context>
					<Pagination.NextTrigger>
						<ArrowRightIcon className="size-4" />
					</Pagination.NextTrigger>
				</Pagination>
			</div>
		</div>
	);
}

ID	Name	Email	Country
1	Ada Altenwerth	Tess_Haag44@yahoo.com	Argentina
2	Gabriel Gibson	Kellen.Brown44@gmail.com	Saint Helena
3	Courtney Gleichner	Mose.Zemlak@hotmail.com	Chad
4	Laurence Willms	Eric.Hickle@gmail.com	Ethiopia
5	Eileen Stroman	Santos87@hotmail.com	Egypt

1 2 3 4 5…100

<script lang="ts" module>
	import { faker } from '@faker-js/faker';

	const users = Array.from({ length: 500 }, (_, i) => ({
		id: i + 1,
		name: faker.person.fullName(),
		email: faker.internet.email(),
		country: faker.location.country(),
	}));
</script>

<script>
	import { ArrowLeftIcon, ArrowRightIcon } from '@lucide/svelte';
	import { Pagination } from '@skeletonlabs/skeleton-svelte';

	let page = $state(1);
	let pageSize = $state(5);

	const start = $derived((page - 1) * pageSize);
	const end = $derived(start + pageSize);
	const data = $derived(users.slice(start, end));
</script>

<div class="grid gap-4 w-full place-items-center">
	<table class="table table-auto">
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Email</th>
				<th>Country</th>
			</tr>
		</thead>
		<tbody>
			{#each data as user}
				<tr>
					<td>{user.id}</td>
					<td>{user.name}</td>
					<td>{user.email}</td>
					<td>{user.country}</td>
				</tr>
			{/each}
		</tbody>
	</table>

	<div class="flex justify-between items-center gap-4 w-full">
		<label class="label">
			<span class="sr-only">Page Size</span>
			<select class="select w-fit" value={String(pageSize)} onchange={(e) => (pageSize = Number(e.currentTarget.value))}>
				<option value="5">5</option>
				<option value="10">10</option>
				<option value="20">20</option>
			</select>
		</label>
		<Pagination count={users.length} {pageSize} {page} onPageChange={(event) => (page = event.page)}>
			<Pagination.PrevTrigger>
				<ArrowLeftIcon class="size-4" />
			</Pagination.PrevTrigger>
			<Pagination.Context>
				{#snippet children(pagination)}
					{#each pagination().pages as page, index (page)}
						{#if page.type === 'page'}
							<Pagination.Item {...page}>
								{page.value}
							</Pagination.Item>
						{:else}
							<Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
						{/if}
					{/each}
				{/snippet}
			</Pagination.Context>
			<Pagination.NextTrigger>
				<ArrowRightIcon class="size-4" />
			</Pagination.NextTrigger>
		</Pagination>
	</div>
</div>

Direction

ID	Name	Email	Country
1	Lela Murazik	Nelle_Roob@hotmail.com	Vietnam
2	Mr. Erik Simonis	Kailee_Schimmel@hotmail.com	Pakistan
3	Deborah Dietrich Jr.	Holly.Runolfsdottir@yahoo.com	Saudi Arabia
4	Theresa Stark Sr.	Carley9@gmail.com	Cambodia
5	Joanna Senger	Cyrus.Schamberger27@yahoo.com	Zimbabwe

import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
	id: i + 1,
	name: faker.person.fullName(),
	email: faker.internet.email(),
	country: faker.location.country(),
}));

const PAGE_SIZE = 5;

export default function Dir() {
	const [page, setPage] = useState(1);

	const start = (page - 1) * PAGE_SIZE;
	const end = start + PAGE_SIZE;
	const data = users.slice(start, end);

	return (
		<div className="grid gap-4 w-full place-items-center">
			<table className="table table-auto">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Email</th>
						<th>Country</th>
					</tr>
				</thead>
				<tbody>
					{data.map((user) => (
						<tr key={user.id}>
							<td>{user.id}</td>
							<td>{user.name}</td>
							<td>{user.email}</td>
							<td>{user.country}</td>
						</tr>
					))}
				</tbody>
			</table>
			<Pagination count={users.length} pageSize={PAGE_SIZE} page={page} onPageChange={(event) => setPage(event.page)} dir="rtl">
				<Pagination.PrevTrigger>
					<ArrowRightIcon className="size-4" />
				</Pagination.PrevTrigger>
				<Pagination.Context>
					{(pagination) =>
						pagination.pages.map((page, index) =>
							page.type === 'page' ? (
								<Pagination.Item key={index} {...page}>
									{page.value}
								</Pagination.Item>
							) : (
								<Pagination.Ellipsis key={index} index={index}>
									&#8230;
								</Pagination.Ellipsis>
							),
						)
					}
				</Pagination.Context>
				<Pagination.NextTrigger>
					<ArrowLeftIcon className="size-4" />
				</Pagination.NextTrigger>
			</Pagination>
		</div>
	);
}

ID	Name	Email	Country
1	Elias Toy	Claud8@gmail.com	Portugal
2	Kathy Pacocha	Regan37@yahoo.com	Tajikistan
3	Carla Gutkowski	Jeanne59@yahoo.com	United Arab Emirates
4	Dr. Sean Rowe	Drake_Collier@hotmail.com	Yemen
5	Dianna Kuvalis	Bernhard.Kreiger69@yahoo.com	Antarctica

1 2 3 4 5…100

<script lang="ts" module>
	import { faker } from '@faker-js/faker';

	const users = Array.from({ length: 500 }, (_, i) => ({
		id: i + 1,
		name: faker.person.fullName(),
		email: faker.internet.email(),
		country: faker.location.country(),
	}));

	const PAGE_SIZE = 5;
</script>

<script>
	import { ArrowLeftIcon, ArrowRightIcon } from '@lucide/svelte';
	import { Pagination } from '@skeletonlabs/skeleton-svelte';

	let page = $state(1);

	const start = $derived((page - 1) * PAGE_SIZE);
	const end = $derived(start + PAGE_SIZE);
	const data = $derived(users.slice(start, end));
</script>

<div class="grid gap-4 w-full place-items-center">
	<table class="table table-auto">
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Email</th>
				<th>Country</th>
			</tr>
		</thead>
		<tbody>
			{#each data as user}
				<tr>
					<td>{user.id}</td>
					<td>{user.name}</td>
					<td>{user.email}</td>
					<td>{user.country}</td>
				</tr>
			{/each}
		</tbody>
	</table>

	<Pagination count={users.length} pageSize={PAGE_SIZE} {page} onPageChange={(event) => (page = event.page)} dir="rtl">
		<Pagination.PrevTrigger>
			<ArrowRightIcon class="size-4" />
		</Pagination.PrevTrigger>
		<Pagination.Context>
			{#snippet children(pagination)}
				{#each pagination().pages as page, index (page)}
					{#if page.type === 'page'}
						<Pagination.Item {...page}>
							{page.value}
						</Pagination.Item>
					{:else}
						<Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
					{/if}
				{/each}
			{/snippet}
		</Pagination.Context>
		<Pagination.NextTrigger>
			<ArrowLeftIcon class="size-4" />
		</Pagination.NextTrigger>
	</Pagination>
</div>

Total Count

For server-side pagination, your data source may be truncated. Make sure to specify the total records using count.

const res = {
	"results": [...],
	"pagination": {
		"page": 1,
		"limit": 10,
		"count": 500,
	}
}

<Pagination page={res.pagination.page} count={res.pagination.count} pageSize={res.pagination.limit}>...</Pagination>

API Reference

Root

Property	Default	Type
`ids`	-	Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }> \| undefined The ids of the elements in the accordion. Useful for composition.
`translations`	-	IntlTranslations \| undefined Specifies the localized strings that identifies the accessibility elements and their states
`count`	-	number \| undefined Total number of data items
`pageSize`	-	number \| undefined The controlled number of data items per page
`defaultPageSize`	10	number \| undefined The initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination.
`siblingCount`	1	number \| undefined Number of pages to show beside active page
`page`	-	number \| undefined The controlled active page
`defaultPage`	1	number \| undefined The initial active page when rendered. Use when you don't need to control the active page of the pagination.
`onPageChange`	-	((details: PageChangeDetails) => void) \| undefined Called when the page number is changed
`onPageSizeChange`	-	((details: PageSizeChangeDetails) => void) \| undefined Called when the page size is changed
`type`	"button"	"button" \| "link" \| undefined The type of the trigger element
`getPageUrl`	-	((details: PageUrlDetails) => string) \| undefined Function to generate href attributes for pagination links. Only used when `type` is set to "link".
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	() => PaginationApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => PaginationApi<PropTypes>]>

PrevTrigger

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Item

Property	Default	Type
`type`	-	"page"
`value`	-	number
`element`	-	Snippet<[HTMLAttributes<"a">]> \| undefined Render the element yourself

Ellipsis

Property	Default	Type
`index`	-	number
`element`	-	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

NextTrigger

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Pagination

Page Size

Direction

Total Count

API Reference

Root

RootProvider

RootContext

PrevTrigger

Item

Ellipsis

NextTrigger