RtkPaginatedList

Last updated Oct 19, 2026

Properties

Property Type Required Default Description
autoScroll boolean ✅ - auto scroll list to bottom
createNodes (data: unknown[]) => VNode[] ✅ - Create nodes
emptyListLabel string ✅ - label to show when empty
fetchData (timestamp: number, size: number, reversed: boolean) => Promise<unknown[]> ✅ - Fetch the data
iconPack IconPack ❌ defaultIconPack Icon pack
onNewNode (node: DataNode) => Promise<void> ✅ - Adds a new node to the beginning of the paginated list
onNodeDelete (id: string) => Promise<void> ✅ - Deletes a node anywhere from the list
onNodeUpdate (id: string, node: DataNode) => Promise<void> ✅ - Updates an existing node in the paginated list.
pageSize number ✅ - Page Size
pagesAllowed number ✅ - Number of pages allowed to be shown
rerenderList () => Promise<void> ✅ - Rerender paginated list
reset (timestamp?: number) => Promise<void> ❌ - Resets the paginated list to a given timestamp
t RtkI18n ❌ useLanguage() Language

Usage Examples

Basic Usage

import { RtkPaginatedList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return <RtkPaginatedList />;
}

With Properties

import { RtkPaginatedList } from '@cloudflare/realtimekit-react-ui';

function MyComponent() {
  return (
    <RtkPaginatedList
      autoScroll={true}
      createNodes={handleEvent}
      emptyListLabel="example"
    />
  );
}

Was this helpful?

YesNo

On this page

RtkPaginatedList - 图1Docs

{"@context":"https://schema.org","@type":"WebPage","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkpaginatedlist/#page","headline":"RtkPaginatedList","description":"API reference for RtkPaginatedList component (React Library)","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkpaginatedlist/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkpaginatedlist/og.png?v=d4feac37122d3707","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: API reference for RtkParticipant component (React Library) title: RtkParticipant image: https://developers.cloudflare.com/realtime/realtimekit/humans/ui-kit/api-reference/react/rtkparticipant/og.png?v=02ad94acb9e49702

Skip to content

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