# CursorPagination

> Footer for server-side cursor paging, where the total is unknown: the range on screen ("Showing 26–50") and Previous / Next.

Source: https://ui.jcsoftdev.com/docs/components/cursor-pagination

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-pagination--default)
- [Controlled](/storybook/?path=/story/containers-pagination--controlled)
- [Empty](/storybook/?path=/story/containers-pagination--empty)
- [Narrow](/storybook/?path=/story/containers-pagination--narrow)
- [Pages](/storybook/?path=/story/containers-pagination--pages)
- [Pages Spanish](/storybook/?path=/story/containers-pagination--pages-spanish)
- [Pages Single Page](/storybook/?path=/story/containers-pagination--pages-single-page)
- [Client Side](/storybook/?path=/story/containers-pagination--client-side)
- [Cursor](/storybook/?path=/story/containers-pagination--cursor)
- [Cursor Single Page](/storybook/?path=/story/containers-pagination--cursor-single-page)

## Source

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