---
title: Pagination
slug: experience/pagination
docTags: 
createdAt: 2026-01-08T13:50:32.970Z
---

In Experience, lists use **infinite scrolling by default**.
When the user scrolls to the bottom of the list, more data is automatically loaded until the end of the dataset is reached.

By default:

- Each load adds **24 items** 
- This value can be overridden using the **Batch Size** field in the data source configuration. 

If you want to **disable infinite scrolling**, you must define a **limit** in the data source.
 Once a limit is set, the list will **not auto-load more items** when scrolling.

This document covers:

1. Default infinite scrolling behavior 
2. Manual pagination (next/previous buttons, no infinite scrolling) 

## 1. Infinite Scrolling (Default Behavior)

### Behavior

- Data loads automatically when scrolling to the bottom 
- Each batch loads **24 elements** by default 
- Continues until all data is loaded 

### Configuration

In the **List Component → Datasource settings**:

- ✅ Data source enabled 
- 🔢 **Batch Size** (optional): override default 24 items per load 
- ❌ Do **not** set a limit → infinite scrolling remains active 

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/NaDyrA_9UKQnsWnBiS3w--20260119-103049.png)

```json
{
  "content": {
    "tag": "div",
    "type": "html",
    "content": "[]"
  },
  "dataSource": {
    "type": "content",
    "batchSize": 24
  },
  "type": "list"
}
```

## 2. Manual Pagination (No Infinite Scrolling) ( PXP 5.1.0 )

### Goal

- Display a fixed number of items (e.g. 10) 
- No automatic loading on scroll 
- Navigation only via **Next** and **Previous** buttons 

### Concept

Pagination is controlled using:

- A **limit** on the datasource 
- A **cursor/offset** stored in context 
- Buttons that modify the offset via navigation params 

## Required Components

To implement manual pagination, configure **3 components**:

1. List Component 
2. Previous Button 
3. Next Button 

## 2.1 List Component Configuration

### Step 1 - Enable Data Source

In **List Component → Datasource**:

- ✅ Enable datasource 
- Choose the datasource type as needed 

### Step 2 - Limit (Page Size)

Set:

- **Limit = 10** (or any page size you want) 

This ensures:

- Only 10 elements are shown 
- Infinite scrolling is disabled 

### Step 3 - Cursor / Offset

Add **Cursor field**:

- **Value:** $context.offset 
- **Condition:** $context.offset IS SET 

This allows the data source to know:

- From which position should it load data 

:::BlockQuote
💡 You may name the parameter something else (e.g. pageOffset),
 but then all references must use $context.pageOffset.
:::

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/6ysahi1o04cpmiualz2As-20260108-154201.png)

```json
{
  "content": {
    "tag": "div",
    "type": "html",
    "content": "$context.content.name"
  },
  "dataSource": {
    "type": "content",
    "limit": 10,
    "fetchOptions": {
      "totalCount": true
    },
    "contextKey": "contents",
    "cursor": {
      "value": "$context.offset",
      "condition": {
        "value": "$context.offset",
        "operation": "SET"
      }
    }
  },
  "type": "list"
}
```

## 2.2 "Previous" Button Configuration

### Visibility Condition

Button is shown only when:

:::BlockQuote
$context.offset > 0
:::

This prevents showing "Previous" on the first page.

### Tap Action

Set **Tap Action → Navigation**:

- Path: **current path** 
- Params: 
  - Key: offset 
  - Value: 

:::BlockQuote
$functions.add($context.offset, -10)
:::

This:

- Decreases offset by page size 
- Loads previous set of elements 

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/Cs35wcgKklPbah0nsgTzk-20260108-154305.png)

```json
{
  "tag": "div",
  "type": "html",
  "content": "prev page",
  "tap": {
    "type": "navigate",
    "params": {
      "offset": "$functions.add($context.offset, -10)"
    }
  },
  "condition": {
    "compareValue": "$functions.add($context.offset, 0)",
    "value": "0",
    "negated": true
  }
}
```

## 2.3 Next Button Configuration

### Visibility Condition

Button is shown only when:

:::BlockQuote
$context.contents.hasNextPage == true
:::

Where:

- contents = datasource result 
- hasNextPage indicates more data is available 

### Tap Action

Set **Tap Action → Navigation**:

- Path: **current path** 
- Params: 
  - Key: offset 
  - Value: 

:::BlockQuote
$functions.add($context.offset, 10)
:::

This:

- Increases offset by page size 
- Loads next set of elements 

![](https://api.archbee.com/api/optimize/ygR6KtT9QI_R0u3uKTJsm/x7cIaOJ48W_w9LGwh7FmA-20260108-154734.png)

```json
{
  "tag": "div",
  "type": "html",
  "content": "next page",
  "tap": {
    "type": "navigate",
    "params": {
      "offset": "$functions.add($context.offset, 10)"
    }
  },
  "condition": {
    "operation": "EQUALS",
    "compareValue": "true",
    "value": "$context.contents.hasNextPage"
  }
}
```

## 2.4 functions

add **add** and **toJson**  functions to **custom.server.js **

```javascript
window.$functions = {
    toJson: (val) => JSON.stringify(val, null, 2),
    add: (val, plus) => parseInt(val ?? '0') + plus
}
```

Summary

| Feature             | Infinite Scrolling | Manual Pagination |
| ------------------- | ------------------ | ----------------- |
| Auto-load on scroll | ✅ Yes              | ❌ No              |
| Uses limit          | ❌ No               | ✅ Yes             |
| Uses offset/cursor  | ❌ No               | ✅ Yes             |
| Requires buttons    | ❌ No               | ✅ Next / Prev     |
| Page size control   | Batch Size         | Limit             |