Pagination · Skeleton

ID	Name	Email	Country
1	Boyd Nolan	Ana.Auer@gmail.com	Portugal
2	Sean Brekke	Wilford.Walsh7@gmail.com	Spain
3	William Steuber	Augustine.Langworth@hotmail.com	Togo
4	Mr. Jamie Conroy	Omari_Torp@yahoo.com	Botswana
5	Jesus Zulauf-Sauer	Prince_Daniel@yahoo.com	Libyan Arab Jamahiriya

tsx

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	Herman Romaguera	Lottie.Baumbach89@gmail.com	Russian Federation
2	Frank Heidenreich	Suzanne60@hotmail.com	Maldives
3	Isaac Leuschke DDS	Kimberly.Paucek59@yahoo.com	Afghanistan
4	Floyd Haley	Tess.Volkman52@gmail.com	Saint Pierre and Miquelon
5	Naomi Bahringer	Orlando32@hotmail.com	Tonga

1 2 3 4 5…100

svelte

<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	Ms. Ebony Walker	Nikolas_Mertz11@gmail.com	Malta
2	Ms. Brandy Auer	Vivienne14@gmail.com	Zambia
3	Mary Macejkovic	Frank_Haley-Daniel@yahoo.com	Hungary
4	Katherine Stroman-Wintheiser Jr.	Lucius58@gmail.com	Sudan
5	Alicia Bergnaum	Margot.Emard66@yahoo.com	Papua New Guinea

tsx

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	Amos Pfeffer	Matt_Russel@gmail.com	Greenland
2	Natalie Steuber	Patience5@yahoo.com	Azerbaijan
3	Traci Gulgowski	Joan95@gmail.com	Holy See (Vatican City State)
4	Mr. Christian Keebler	Zack_Hammes18@hotmail.com	Bahamas
5	Hugh Collins	Virginie_Harvey71@hotmail.com	American Samoa

1 2 3 4 5…100

svelte

<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	Loretta Blick Jr.	Hillard.Mosciski45@gmail.com	Italy
2	Mindy Considine	Sarina_Conn@hotmail.com	Ecuador
3	Brooke Kshlerin	Lesly42@yahoo.com	Thailand
4	Henrietta Botsford	Adrian_Pollich17@hotmail.com	Turks and Caicos Islands
5	Mr. Elijah Olson	Kamren92@gmail.com	Saint Vincent and the Grenadines

tsx

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	Gary Gerhold	Nikita52@gmail.com	Bangladesh
2	Ashley Halvorson	Cordia.Robel74@gmail.com	North Macedonia
3	Katrina Shanahan-VonRueden	Juvenal47@yahoo.com	Turkmenistan
4	Josephine Reichert	Michale_Abshire81@gmail.com	Burkina Faso
5	Stella Monahan	Effie_Hilpert81@yahoo.com	Mayotte

1 2 3 4 5…100

svelte

<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,
	}
}

astro

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

API Reference

Root

txt

inline-flex gap-2 p-2 rounded-container preset-outlined-surface-200-800 w-fit

Prop	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`	—	((attributes: HTMLAttributes<"nav">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	PaginationApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"nav">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(pagination: PaginationApi<PropTypes>) => ReactNode

FirstTrigger

txt

btn btn-sm preset-tonal

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

PrevTrigger

txt

btn btn-sm preset-tonal

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Item

txt

btn btn-sm preset-tonal cursor-pointer select-none data-selected:preset-filled

Prop	Default	Type
`type`	—	"page"
`value`	—	number
`element`	—	((attributes: HTMLAttributes<"a">) => Element) \| undefined Render the element yourself

Ellipsis

txt

btn btn-sm preset-tonal pointer-events-none

Prop	Default	Type
`index`	—	number
`element`	—	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

NextTrigger

txt

btn btn-sm preset-tonal

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

LastTrigger

txt

btn btn-sm preset-tonal

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Root

txt

inline-flex gap-2 p-2 rounded-container preset-outlined-surface-200-800 w-fit

Prop	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

Provider

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

Context

Prop	Default	Type
`children`	—	Snippet<[() => PaginationApi<PropTypes>]>

FirstTrigger

txt

btn btn-sm preset-tonal

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

PrevTrigger

txt

btn btn-sm preset-tonal

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

Item

txt

btn btn-sm preset-tonal cursor-pointer select-none data-selected:preset-filled

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

Ellipsis

txt

btn btn-sm preset-tonal pointer-events-none

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

NextTrigger

txt

btn btn-sm preset-tonal

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

LastTrigger

txt

btn btn-sm preset-tonal

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