Pagination

ID	Name	Email	Country
1	Mona O'Kon	Kristian.Daugherty30@hotmail.com	United Kingdom
2	Gwen Rolfson	Irwin.Simonis50@gmail.com	Brunei Darussalam
3	Shawn Stehr	Spencer_Cassin@gmail.com	Lithuania
4	Stephen Grimes	Mike_Hilll-Tremblay@hotmail.com	Monaco
5	Ms. Lora Pfeffer	Carter_King@gmail.com	Nauru
6	Bernadette Lueilwitz	Jesus.Rogahn@hotmail.com	Democratic Republic of the Congo
7	Doris Kemmer	Kris_Boyer15@hotmail.com	Wallis and Futuna
8	Steve Jakubowski	Walton_Veum@yahoo.com	United States of America
9	Winston Waters	Genesis_Luettgen-Maggio@gmail.com	Monaco
10	Johnny Farrell	Natalia31@hotmail.com	Jamaica

1 2 3 4 5…50

<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, 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	Ellis Gottlieb	Kassandra.Torphy74@yahoo.com	Uzbekistan
2	Santiago Boyle	Nya76@hotmail.com	Congo
3	Aaron Conn	Rasheed70@gmail.com	Turks and Caicos Islands
4	Dr. Phillip Roob	Hanna.Wilkinson@gmail.com	Falkland Islands (Malvinas)
5	Steven Kris II	Kattie17@yahoo.com	Papua New Guinea
6	Aubrey Lakin	Aliya_Runolfsson1@yahoo.com	Dominica
7	Geoffrey Boyle	Viola92@gmail.com	Aruba
8	Ms. Georgia Bartell	Bria_Konopelski@yahoo.com	Turkey
9	Julie Abshire	Hadley_Vandervort@gmail.com	Kazakhstan
10	Phyllis Huel	Stewart.OKeefe77@gmail.com	Burkina Faso

1 2 3 4 5…50

<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(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

ID	Name	Email	Country
1	Grace Wyman	Henriette35@hotmail.com	Saint Kitts and Nevis
2	Lydia DuBuque	Hillary.Brekke-Carroll18@gmail.com	Poland
3	Myra Will	Janis_Pfeffer@hotmail.com	Burundi
4	Dr. Justin Hammes	Kelley47@hotmail.com	Heard Island and McDonald Islands
5	Beth Ullrich	Amelie37@yahoo.com	Haiti
6	Alvin Lynch	Stefanie_Jerde19@hotmail.com	Burundi
7	Dr. Andy Kunze	Ima10@yahoo.com	India
8	Lamar Jerde	Asha0@hotmail.com	Mali
9	Nina Smitham IV	Ignatius.Morissette57@hotmail.com	Sudan
10	Douglas Bogisich	Zoe20@yahoo.com	Kyrgyz Republic

1 2 3 4 5…50

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

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

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

API Reference

Root

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

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

btn preset-tonal

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

Item

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

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

Ellipsis

btn preset-tonal pointer-events-none

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

NextTrigger

btn preset-tonal

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

Skeleton

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Page Size

Direction

Total Count

API Reference

Root

RootProvider

RootContext

PrevTrigger

Item

Ellipsis

NextTrigger