Pagination

ID	Name	Email	Country
1	Mrs. Lorene Hane	Raegan_Kessler42@gmail.com	Slovakia
2	Mitchell Nienow	Reymundo2@yahoo.com	Iraq
3	Percy Runte DDS	Aryanna.Spencer@yahoo.com	Spain
4	Israel Corwin	Annabell.Kuhic@gmail.com	Macao
5	Maureen Mraz	Hilda.Balistreri@hotmail.com	Comoros
6	Raymond Price	Katelyn57@hotmail.com	Gabon
7	Kristopher Mann	Thad.Gerlach@yahoo.com	Burundi
8	Jane MacGyver-Senger PhD	Kayley_DAmore51@gmail.com	Bouvet Island
9	Eric Veum DVM	Gudrun37@yahoo.com	Montenegro
10	Amanda Dickinson	Jonathan83@yahoo.com	Comoros

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	Curtis Beier	Clare25@gmail.com	Cook Islands
2	Jean Cassin	Kelli66@yahoo.com	Svalbard & Jan Mayen Islands
3	Dianne Cartwright	Vince.Boyer@gmail.com	Bouvet Island
4	Felicia Runolfsdottir	Noemie_Wuckert25@gmail.com	Angola
5	William Batz	Rashawn22@hotmail.com	Argentina
6	Cynthia Beatty	Santa_Padberg@hotmail.com	Czechia
7	Essie Dach	Danika75@gmail.com	Oman
8	Allan Schamberger	Elyssa.Nienow@yahoo.com	Niue
9	Grace Boyer	Saige41@hotmail.com	Norfolk Island
10	Edna Heidenreich	Elmer.Cassin@gmail.com	South Africa

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	Dr. Conrad Raynor	Catherine.Boyle-Wilkinson@yahoo.com	Northern Mariana Islands
2	Mrs. Lisa White-Walsh	Ricardo84@hotmail.com	Liechtenstein
3	Mr. Salvatore Grady Jr.	Colleen_Casper20@yahoo.com	Northern Mariana Islands
4	Dr. Salvador Zulauf	Gunner50@gmail.com	Guam
5	Alfred Grimes Jr.	Julio.Kohler43@hotmail.com	Italy
6	Clinton Cruickshank	Johnnie_Rodriguez10@yahoo.com	Sierra Leone
7	Tanya Schimmel	Arielle_Farrell70@hotmail.com	Israel
8	Mr. Josh Dach II	Jerald.Wolf11@hotmail.com	Taiwan
9	Mr. Jason Hessel	Hershel.Jakubowski@gmail.com	Cameroon
10	Angel Kessler	Rene.Hickle@hotmail.com	Malaysia

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

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

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