---
title: "Entity List with Pagination"
description: "Render a paged Bitrix24 entity list with B24UI components and the SDK callList action."
canonical_url: "https://bitrix24.github.io/b24jssdk/docs/examples/entity-list"
last_updated: "2026-06-02"
---
# Entity List with Pagination

> Render a paged Bitrix24 entity list with B24UI components and the SDK callList action.

> [!NOTE]
> **Required scopes**: `crm`, `user_brief`.

This recipe assembles a typical "list page" — a card with a sortable table, pagination, and an empty state — using B24UI components and `actions.v2.callList.make()`.

## Components Used

- [`B24Card`](https://bitrix24.github.io/b24ui/raw/docs/components/card.md) — page container with header / body / footer.
- [`B24Table`](https://bitrix24.github.io/b24ui/raw/docs/components/table.md) — responsive data table.
- [`B24Pagination`](https://bitrix24.github.io/b24ui/raw/docs/components/pagination.md) — page navigation.
- [`B24Empty`](https://bitrix24.github.io/b24ui/raw/docs/components/empty.md) — empty / error state.
- [`B24Button`](https://bitrix24.github.io/b24ui/raw/docs/components/button.md) — actions.
- [`B24Skeleton`](https://bitrix24.github.io/b24ui/raw/docs/components/skeleton.md) — loading placeholder.

## Sketch

```ts
import { initializeB24Frame, EnumCrmEntityTypeId, type B24Frame } from '@bitrix24/b24jssdk'

type Company = { id: number, title: string, createdTime: string }

let $b24: B24Frame
const pageSize = 50
let page = 1

async function fetchPage(currentPage: number): Promise<{ items: Company[], total: number }> {
  const response = await $b24.actions.v2.callList.make<Company>({
    method: 'crm.item.list',
    params: {
      entityTypeId: EnumCrmEntityTypeId.company,
      filter: { '>ID': 0 },
      select: ['id', 'title', 'createdTime']
    },
    idKey: 'id',
    requestId: `companies-page-${currentPage}`
  })

  if (!response.isSuccess) {
    throw new Error(response.getErrorMessages().join('; '))
  }

  const items = response.getData() ?? []
  const total = items.length

  const offset = (currentPage - 1) * pageSize
  return { items: items.slice(offset, offset + pageSize), total }
}

async function init() {
  $b24 = await initializeB24Frame()
  const { items, total } = await fetchPage(page)
  // render <B24Table :items="items" /> and <B24Pagination :total="total" :page-size="pageSize" />
}

init().catch(console.error)
```

> [!CAUTION]
> `callList` paginates by sorting on `idKey` ascending. Don't pass a custom `params.order` — it can break pagination by creating gaps. Sort client-side after the data is fetched.

## Full Source

The full Vue + B24UI implementation lives in [bitrix24/b24sdk-examples](https://github.com/bitrix24/b24sdk-examples) under the entity-list demo.

## Sitemap

See the full [sitemap](/b24jssdk/sitemap.md) for all pages.