Skip to main content

Participant Pagination

In meetings with many participants, RealtimeKit provides pagination controls to navigate through all the joined remote participants and display a subset of participants at a time.

Grid Information​

The participants.grid object provides essential data or current state of pagination. This information helps you build and manage paginated participant views. The object is of type RtkGridPagesInfo and contains:

  • currentPageNumber: Current page being displayed (zero-indexed)
  • pageCount: Total number of pages available
  • isNextPagePossible: Whether there's a next page available
  • isPreviousPagePossible: Whether there's a previous page available

The maximum number of participants per page is determined by the Grid size configured in the local user's preset.

Use the setPage() method to navigate between pages of participants. This method takes a zero-indexed page number as its parameter and updates the active participants list with the participants on the requested page.

// Navigate to a specific page (zero-indexed)
meeting.participants.setPage(1);

// Navigate to next page if available
if (meeting.participants.grid.isNextPagePossible) {
  meeting.participants.setPage(meeting.participants.grid.currentPageNumber + 1);
}

// Navigate to previous page if available
if (meeting.participants.grid.isPreviousPagePossible) {
  meeting.participants.setPage(meeting.participants.grid.currentPageNumber - 1);
}
NOTE

Page 0 (the first page) shows active speakers and updates automatically based on audio activity. Other pages (1 and above) show a fixed set of participants regardless of who is speaking.

To respond to page changes, implement the onActiveParticipantsChanged() callback to update your UI when the active list changes.