Pager

Pager handles pagination. You give it an array and a page size; it renders the current page's slice through a function child and shows a navigation bar. It works client-side (slicing items) or server-side (pass totalItems and fetch on onPageChange).

When to use

• Paginate any list where you'd rather show pages than infinite scroll.
• Server-driven data where only one page is loaded at a time.

Inside DataTable

DataTable has a built-in pager — set enablePager. Use this standalone Pager for your own lists.

Import

import { Pager } from '@spartanfx/react';

Client-side paging

Pass the full items array; Pager slices it and hands you itemsOnPage.

<Pager items={allRows} numberOfItemsPerPage={10}>
  {(itemsOnPage) => (
    <ul>
      {itemsOnPage.map((row) => (
        <li key={row.id}>{row.name}</li>
      ))}
    </ul>
  )}
</Pager>

Server-side paging

Load one page at a time: pass that page as items, the real totalItems, and fetch in onPageChange.

<Pager
  items={currentPageRows}
  numberOfItemsPerPage={25}
  totalItems={serverTotal}
  onPageChange={(page) => fetchPage(page)}
>
  {(rows) => <ResultsGrid rows={rows} />}
</Pager>

Key props

Prop	Type	Notes
items (required)	any[]	Items to paginate (full set, or the current page for server mode).
numberOfItemsPerPage (required)	number	Page size.
children (required)	(itemsOnPage) => ReactNode	Renders the current page.
totalItems	number	Server-side total; overrides items.length for page count.
onPageChange	(page) => void	Fires on navigation — fetch server data here.
layout	PagerLayout	Which navigation controls are shown.
appearance	AppearanceMode	Light or dark theming.

See the full generated reference: Pager API ↗.

See also

• DataTable — has a built-in pager
• Components overview