---
title: "Record pager"
description: "Moves from one record to the next without going back to the list: up and down arrows, the record’s place, and K and J on the keyboard. Arrows are links for records with their own page, or callbacks for records shown in a sheet."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Record pager

## Between pages

Each arrow is a link; the first record has no previous one.

```tsx
import { RecordPager } from '@arbol-ai/ui';

<RecordPager label="Move between conversations" nextHref="#/record-pager" position={1} total={128} />
```

## In place

Press K or J (outside a field) to move through the recipients.

```tsx
import { useState } from 'react';
import { RecordPager } from '@arbol-ai/ui';

const RECIPIENTS = ['Laura Gómez', 'Andrés Ruiz', 'Marta Díaz', 'Jorge Peña'];

const RecipientPager = () => {
  const [index, setIndex] = useState(0);
  return (
    <div className="flex items-center gap-3">
      <RecordPager
        label="Move between the campaign’s recipients"
        onNext={
          index < RECIPIENTS.length - 1
            ? () => {
                setIndex(index + 1);
              }
            : undefined
        }
        onPrevious={
          index > 0
            ? () => {
                setIndex(index - 1);
              }
            : undefined
        }
        position={index + 1}
        total={RECIPIENTS.length}
      />
      <p className="text-sm font-medium">{RECIPIENTS[index]}</p>
    </div>
  );
};

<RecipientPager />
```

## Source

The examples above are [`src/blocks/record-pager/record-pager.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/record-pager/record-pager.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/record-pager/index.mdx