Pagination

ID	Name	Email	Country
1	Shirley Satterfield	Monte.Brown21@yahoo.com	Nauru
2	Omar Wiza	Rickie18@yahoo.com	Gibraltar
3	Gayle Rau	Briana87@hotmail.com	Spain
4	Annette O'Kon	Brett.Zemlak@yahoo.com	French Polynesia
5	Miss Sophia Lubowitz	Leda.Heller91@gmail.com	Netherlands

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 = 5;

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	Bobbie Boyer	Vince_Mosciski@hotmail.com	Kenya
2	Elsa Gislason DVM	Robbie40@hotmail.com	Bonaire, Sint Eustatius and Saba
3	Patsy Lemke DVM	Elinor.Goldner26@yahoo.com	Ecuador
4	Alicia Green	Shakira20@yahoo.com	San Marino
5	Velma Upton	Jacklyn_Hand@yahoo.com	Gambia

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(5);

  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	Allison Gleason	Alvah.Weber@hotmail.com	Solomon Islands
2	Misty Lueilwitz	Verna.Schowalter-Beer38@hotmail.com	Holy See (Vatican City State)
3	June Tillman	Kenya_Orn@gmail.com	Turks and Caicos Islands
4	Tony Carroll-Hansen	Javier.Pagac9@yahoo.com	Niger
5	Miss Olga Schinner	Nellie.Dooley-Rogahn52@yahoo.com	Greece

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 = 5;

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

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