Pagination - Skeleton

ID	Name	Email	Country
1	Oliver Prosacco	Samson62@gmail.com	Samoa
2	Annette Becker V	Arlo.OConnell94@gmail.com	Bahamas
3	Aaron Stamm	Colton.Gorczany@gmail.com	Jordan
4	Eric Hills	Ophelia_McCullough@gmail.com	Sao Tome and Principe
5	Mr. Irvin Prohaska	Cathrine15@hotmail.com	Liberia
6	Heather Stracke	Lisandro_Strosin@hotmail.com	Bouvet Island
7	Miss Gertrude Powlowski DVM	Leon_Purdy32@gmail.com	Israel
8	Roderick Gottlieb DDS	Nella_Rippin15@hotmail.com	Bonaire, Sint Eustatius and Saba
9	Katrina Schuppe	Keira.Hand77@yahoo.com	Turkmenistan
10	Ms. Brandi Brown	Isai29@yahoo.com	Yemen

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

ID	Name	Email	Country
1	Howard Lang	Joe78@yahoo.com	Botswana
2	Jeremiah Schulist	Izaiah54@hotmail.com	Guinea-Bissau
3	Mr. William Farrell	Madalyn_Cummerata17@gmail.com	Niue
4	Pete Mosciski Sr.	Roosevelt15@gmail.com	Qatar
5	Robin Torp	Maia_Pfeffer-Powlowski80@gmail.com	Lebanon
6	Rosie Jaskolski	Emmanuelle88@yahoo.com	Namibia
7	Homer Kerluke	Charlie.Terry95@yahoo.com	Zambia
8	Dwight Renner	Gertrude.Stoltenberg@yahoo.com	France
9	Amanda Herman	Nora.Connelly@hotmail.com	Gabon
10	Helen Gerhold	Ethel63@gmail.com	Brunei Darussalam

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

ID	Name	Email	Country
1	Misty Legros	Imogene63@gmail.com	Mozambique
2	Dr. Angelica Reichel	Green_Schuster12@yahoo.com	New Caledonia
3	Ms. Allison Quitzon	Mitchel_Kihn42@hotmail.com	Solomon Islands
4	Heather Prosacco	Saige.Oberbrunner37@hotmail.com	Bulgaria
5	Eleanor Gislason	Ewald.Hills66@yahoo.com	Gabon
6	Tami Schuppe DVM	Crystel_Larkin61@gmail.com	Finland
7	Dr. Clinton Satterfield	Elliot.Kuhic60@gmail.com	Jamaica
8	Kyle Balistreri	Clarissa_Schimmel18@yahoo.com	Brazil
9	Viola Walter	Brady78@yahoo.com	Montenegro
10	Frank Reichel	Pierce13@yahoo.com	Bulgaria

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

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

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

API Reference

RootProvider

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

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

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