Pagination

ID	Name	Email	Country
1	Seth Kuvalis	Garnet.McClure@gmail.com	Bangladesh
2	Jean Treutel	Elmore.Reilly-Macejkovic@gmail.com	Sudan
3	Eric Green	Carlo_Hegmann58@gmail.com	Heard Island and McDonald Islands
4	Anna O'Keefe	Diego69@hotmail.com	Turkmenistan
5	Gary Jaskolski	Ethyl_Davis54@yahoo.com	Azerbaijan

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	Katrina Schowalter II	Janice_Boehm@yahoo.com	Western Sahara
2	Rosemary Simonis	Marshall_Ondricka24@yahoo.com	Malta
3	Mr. Philip Simonis	Braden31@yahoo.com	Jamaica
4	Jermaine Corkery-Cruickshank	Denis_Weimann22@yahoo.com	Dominican Republic
5	Andrew Flatley	Vaughn.Ruecker@gmail.com	Romania

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	Annie Marquardt	Deborah.Carter31@hotmail.com	Guam
2	Mr. Aubrey Lindgren	Libby_OKeefe59@hotmail.com	Niger
3	Jackie McKenzie	Dexter_Harris64@yahoo.com	Spain
4	Iris Pagac	Lorine58@gmail.com	Ecuador
5	Cassandra Hartmann	Shanny79@hotmail.com	Belarus

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

FirstTrigger

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

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

LastTrigger

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

FirstTrigger

PrevTrigger

Item

Ellipsis

NextTrigger

LastTrigger