CursorPagination

Footer for server-side cursor paging, where the total is unknown: the range on screen (“Showing 26–50”) and Previous / Next. Keep the cursor trail yourself; this only reports the clicks. It renders nothing while the whole list fits on the first page.

Import

import { CursorPagination } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/pagination.

Usage

<CursorPagination total={134} />

Props

Prop	Type	Default	Description
page *	number		1-based page the cursor trail is on.
count *	number		Rows on this page.
pageSize	number	25	Rows per page, to number the range. Default 25.
hasNext *	boolean		Whether the server reported a next cursor.
onPrevious *	() => void
onNext *	() => void
labels	Partial<CursorPaginationLabels>		Texts (localized by default through UiStrings).

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Controlled
• Empty
• Narrow
• Pages
• Pages Spanish
• Pages Single Page
• Client Side
• Cursor
• Cursor Single Page

Source

packages/ui/src/containers/pagination/cursor-pagination.tsx