Pagination - Skeleton

ID	Name	Email	Country
1	Natasha Ullrich Jr.	Lia_Muller16@yahoo.com	Wallis and Futuna
2	Jermaine Gusikowski	Brendon.Schaden@hotmail.com	Panama
3	Dr. Ken Pacocha	Dayna_Schowalter@yahoo.com	Finland
4	Orville Swift	Frederick_Walsh1@gmail.com	Taiwan
5	Mr. Jody Moen	Jackie45@yahoo.com	Iraq
6	Mr. Jessie O'Hara	Nya7@gmail.com	Morocco
7	Angelo Wiegand IV	Annalise.Sawayn@yahoo.com	Papua New Guinea
8	Mrs. Willie Waelchi	Aylin.Leffler@yahoo.com	Vanuatu
9	Edmund Schneider	Bret_Cormier@gmail.com	Qatar
10	Devin Collier	Brielle_Labadie@gmail.com	Namibia

import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

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;

export default function Default() {
  const [page, setPage] = useState(1);

  const start = (page - 1) * PAGE_SIZE;
  const end = start + PAGE_SIZE;
  const data = users.slice(start, end);

  return (
    <div className="grid gap-4 w-full place-items-center">
      <table className="table table-auto">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          {data.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.country}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Pagination count={users.length} pageSize={PAGE_SIZE} page={page} onPageChange={(event) => setPage(event.page)}>
        <Pagination.PrevTrigger>
          <ArrowLeftIcon className="size-4" />
        </Pagination.PrevTrigger>
        <Pagination.Context>
          {(pagination) =>
            pagination.pages.map((page, index) =>
              page.type === 'page' ? (
                <Pagination.Item key={index} {...page}>
                  {page.value}
                </Pagination.Item>
              ) : (
                <Pagination.Ellipsis key={index} index={index}>
                  &#8230;
                </Pagination.Ellipsis>
              ),
            )
          }
        </Pagination.Context>
        <Pagination.NextTrigger>
          <ArrowRightIcon className="size-4" />
        </Pagination.NextTrigger>
      </Pagination>
    </div>
  );
}

Page Size

ID	Name	Email	Country
1	Francis Boehm	Reva.Waelchi20@gmail.com	Cambodia
2	Frankie Klocko	Freeman.Hickle0@hotmail.com	Thailand
3	Russell Mertz	Jaquelin_Kilback94@hotmail.com	Western Sahara
4	Van Baumbach	Annamarie35@yahoo.com	Democratic People's Republic of Korea
5	Jeanne Kunde	Wilford13@yahoo.com	Ireland
6	Gene Labadie	Tiffany_Ritchie@hotmail.com	Saint Vincent and the Grenadines
7	Jodi Lakin	Gust.Mayert@hotmail.com	Azerbaijan
8	Wilfred Paucek	Rowan51@hotmail.com	Pakistan
9	Olive Gulgowski	Korey71@yahoo.com	Cambodia
10	Orville Heaney PhD	Letitia78@hotmail.com	Poland

import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

const users = Array.from({ length: 500 }, (_, i) => ({
  id: i + 1,
  name: faker.person.fullName(),
  email: faker.internet.email(),
  country: faker.location.country(),
}));

export default function Default() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const start = (page - 1) * pageSize;
  const end = start + pageSize;
  const data = users.slice(start, end);

  return (
    <div className="grid gap-4 w-full place-items-center">
      <table className="table table-auto">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          {data.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.country}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="flex justify-between items-center gap-4 w-full">
        <label className="label">
          <span className="sr-only">Page Size</span>
          <select className="select w-fit" value={String(pageSize)} onChange={(e) => setPageSize(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={pageSize} page={page} onPageChange={(event) => setPage(event.page)}>
          <Pagination.PrevTrigger>
            <ArrowLeftIcon className="size-4" />
          </Pagination.PrevTrigger>
          <Pagination.Context>
            {(pagination) =>
              pagination.pages.map((page, index) =>
                page.type === 'page' ? (
                  <Pagination.Item key={index} {...page}>
                    {page.value}
                  </Pagination.Item>
                ) : (
                  <Pagination.Ellipsis key={index} index={index}>
                    &#8230;
                  </Pagination.Ellipsis>
                ),
              )
            }
          </Pagination.Context>
          <Pagination.NextTrigger>
            <ArrowRightIcon className="size-4" />
          </Pagination.NextTrigger>
        </Pagination>
      </div>
    </div>
  );
}

Direction

ID	Name	Email	Country
1	Ramiro Nolan	Miles_Fisher50@gmail.com	Sint Maarten
2	Taylor O'Reilly	Gerson_Barton58@gmail.com	Saint Martin
3	Todd Leuschke	Megane84@gmail.com	Uzbekistan
4	Wade Heathcote-Purdy	Paige_Pollich@hotmail.com	Brazil
5	Leticia Jacobi	Precious.Bashirian-Emard@gmail.com	Palestine
6	Percy Renner	Arianna.Goyette78@gmail.com	Turkmenistan
7	Geraldine Langosh	Arlie4@gmail.com	Jordan
8	Darrell Herman DDS	Jermey_Strosin70@yahoo.com	Aland Islands
9	Toni Waelchi	Milo_Schuster@yahoo.com	Belarus
10	Antoinette Legros	Alfreda.Bauch@hotmail.com	Vanuatu

import { faker } from '@faker-js/faker';
import { Pagination } from '@skeletonlabs/skeleton-react';
import { ArrowRightIcon, ArrowLeftIcon } from 'lucide-react';
import { useState } from 'react';

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;

export default function Dir() {
  const [page, setPage] = useState(1);

  const start = (page - 1) * PAGE_SIZE;
  const end = start + PAGE_SIZE;
  const data = users.slice(start, end);

  return (
    <div className="grid gap-4 w-full place-items-center">
      <table className="table table-auto">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          {data.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.country}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <Pagination count={users.length} pageSize={PAGE_SIZE} page={page} onPageChange={(event) => setPage(event.page)} dir="rtl">
        <Pagination.PrevTrigger>
          <ArrowRightIcon className="size-4" />
        </Pagination.PrevTrigger>
        <Pagination.Context>
          {(pagination) =>
            pagination.pages.map((page, index) =>
              page.type === 'page' ? (
                <Pagination.Item key={index} {...page}>
                  {page.value}
                </Pagination.Item>
              ) : (
                <Pagination.Ellipsis key={index} index={index}>
                  &#8230;
                </Pagination.Ellipsis>
              ),
            )
          }
        </Pagination.Context>
        <Pagination.NextTrigger>
          <ArrowLeftIcon className="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`	-	((attributes: HTMLAttributes<"nav">) => Element) \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	PaginationApi<PropTypes>
`element`	-	((attributes: HTMLAttributes<"nav">) => Element) \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	(pagination: PaginationApi<PropTypes>) => ReactNode

PrevTrigger

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Item

Property	Default	Type
`type`	-	"page"
`value`	-	number
`element`	-	((attributes: HTMLAttributes<"a">) => Element) \| undefined Render the element yourself

Ellipsis

Property	Default	Type
`index`	-	number
`element`	-	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

NextTrigger

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself