Pagination

Use pagination for multi-page lists. Bind page on Root and render pages from the children snippet (pages, currentPage). Prefer Previous / Next (legacy PrevButton / NextButton still work).

1<script lang="ts">
2	import * as Pagination from '~/components/pagination';
3</script>
4
5<Pagination.Root count={100} perPage={10}>
6	{#snippet children({ pages, currentPage })}
7		<Pagination.Content>
8			<Pagination.Item>
9				<Pagination.Previous />
10			</Pagination.Item>
11			{#each pages as page (page.key)}
12				{#if page.type === 'ellipsis'}
13					<Pagination.Item>
14						<Pagination.Ellipsis />
15					</Pagination.Item>
16				{:else}
17					<Pagination.Item>
18						<Pagination.Link {page} isActive={currentPage === page.value}>
19							{page.value}
20						</Pagination.Link>
21					</Pagination.Item>
22				{/if}
23			{/each}
24			<Pagination.Item>
25				<Pagination.Next />
26			</Pagination.Item>
27		</Pagination.Content>
28	{/snippet}
29</Pagination.Root>