# Pagination
Navigate between multiple pages of content.

```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 = 10;
</script>

<script>
	import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
	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

```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 from '@lucide/svelte/icons/arrow-left';
	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
	import { Pagination } from '@skeletonlabs/skeleton-svelte';

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

	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

```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 = 10;
</script>

<script>
	import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
	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`.

```json
{
	"data": [...],
	"pagination": {
		"page": 1,
		"limit": 10,
		"count": 500,
	}
}
```


```svelte
<Pagination
	page={response.pagination.page}
	count={response.pagination.count}
	pageSize={response.pagination.limit}
>
	...
</Pagination>
```

## API Reference

### PaginationRoot

| Property | Type | Description |
| --- | --- | --- |
| `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` | 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. Default: 10 |
| `siblingCount` | number | undefined | Number of pages to show beside active page Default: 1 |
| `page` | number | undefined | The controlled active page |
| `defaultPage` | number | undefined | The initial active page when rendered. Use when you don't need to control the active page of the pagination. Default: 1 |
| `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" | "link" | undefined | The type of the trigger element Default: "button" |
| `getPageUrl` | ((details: PageUrlDetails) => string) | undefined | Function to generate href attributes for pagination links. Only used when `type` is set to "link". |
| `dir` | "ltr" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `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 |

### PaginationRootProvider

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

### PaginationRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => PaginationApi<PropTypes>]> |  |

### PaginationPrevTrigger

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

### PaginationItem

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

### PaginationEllipsis

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

### PaginationNextTrigger

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