feat: implement pagination for table and list rendering (#90)

* feat: add pagination for table renderer and list renderer

* add stress test

* add changeset

* make perpage configurable

.changeset/stale-mammals-tease.md

@@ -0,0 +1,5 @@
+---
+"@llamaindex/ui": patch
+---
+
+feat: implement pagination for table and list rendering

packages/ui/src/extracted-data/data-pagination.tsx

@@ -0,0 +1,58 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/base/pagination";
+import { cn } from "@/lib";
+import { Dispatch, SetStateAction } from "react";
+
+export function DataPagination({
+  currentPage,
+  setCurrentPage,
+  totalItems,
+  perPage,
+  className,
+}: {
+  currentPage: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  totalItems: number;
+  perPage: number;
+  className?: string;
+}) {
+  const totalPages = Math.ceil(totalItems / perPage);
+  const shouldShowPagination = totalItems > perPage;
+
+  if (!shouldShowPagination) return null;
+
+  return (
+    <Pagination className={cn("justify-end p-2", className)}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+            className={cn(
+              "cursor-pointer",
+              currentPage === 1 && "pointer-events-none opacity-50"
+            )}
+          />
+        </PaginationItem>
+        <span className="text-sm text-gray-500 mx-2">
+          Page {currentPage} / {totalPages} - {totalItems} items
+        </span>
+        <PaginationItem>
+          <PaginationNext
+            onClick={() =>
+              setCurrentPage(Math.min(totalPages, currentPage + 1))
+            }
+            className={cn(
+              "cursor-pointer",
+              currentPage === totalPages && "pointer-events-none opacity-50"
+            )}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}

packages/ui/src/extracted-data/extracted-data-display.tsx

@@ -20,6 +20,8 @@ export function ExtractedDataDisplay<S extends JsonShape<S>>({
   editable = true,
   jsonSchema,
   onClickField,
+  tableRowsPerPage = 10,
+  listItemsPerPage = 10,
 }: ExtractedDataDisplayProps<S>) {
   const [changedPaths, setChangedPaths] = useState<Set<string>>(new Set());
 
@@ -121,6 +123,8 @@ export function ExtractedDataDisplay<S extends JsonShape<S>>({
                   validationErrors={validationErrors}
                   onClickField={onClickField}
                   editable={editable}
+                  tableRowsPerPage={tableRowsPerPage}
+                  listItemsPerPage={listItemsPerPage}
                 />
               </div>
             </div>
@@ -143,6 +147,8 @@ export function ExtractedDataDisplay<S extends JsonShape<S>>({
                 validationErrors={validationErrors}
                 onClickField={onClickField}
                 editable={editable}
+                tableRowsPerPage={tableRowsPerPage}
+                listItemsPerPage={listItemsPerPage}
               />
             </div>
           );
@@ -165,6 +171,8 @@ export function ExtractedDataDisplay<S extends JsonShape<S>>({
                     validationErrors={validationErrors}
                     onClickField={onClickField}
                     editable={editable}
+                    tableRowsPerPage={tableRowsPerPage}
+                    listItemsPerPage={listItemsPerPage}
                   />
                 </div>
               </div>

packages/ui/src/extracted-data/list-renderer/list-renderer.tsx

@@ -12,6 +12,8 @@ import type { PrimitiveValue, RendererMetadata } from "../types";
 import type { ExtractedFieldMetadata } from "llama-cloud-services/beta/agent";
 import { findFieldSchemaMetadata } from "../metadata-path-utils";
 import { findExtractedFieldMetadata } from "../metadata-lookup";
+import { DataPagination } from "../data-pagination";
+import { useState } from "react";
 
 interface ListRendererProps<S extends PrimitiveValue> {
   data: S[];
@@ -30,6 +32,7 @@ interface ListRendererProps<S extends PrimitiveValue> {
     path: string[];
   }) => void;
   editable?: boolean;
+  listItemsPerPage?: number;
 }
 
 export function ListRenderer<S extends PrimitiveValue>({
@@ -42,7 +45,9 @@ export function ListRenderer<S extends PrimitiveValue>({
   metadata,
   onClickField,
   editable = true,
+  listItemsPerPage = 10,
 }: ListRendererProps<S>) {
+  const [currentPage, setCurrentPage] = useState(1);
   const effectiveSchema: Record<string, FieldSchemaMetadata> =
     metadata?.schema ?? {};
   const effectiveExtracted = metadata?.extracted ?? {};
@@ -107,11 +112,22 @@ export function ListRenderer<S extends PrimitiveValue>({
     );
   }
 
+  const visibleData = data.slice(
+    (currentPage - 1) * listItemsPerPage,
+    currentPage * listItemsPerPage
+  );
+
   return (
     <div className="border rounded-md bg-white overflow-auto">
+      <DataPagination
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        totalItems={data.length}
+        perPage={listItemsPerPage}
+      />
       <Table className="table-auto">
         <TableBody>
-          {data.map((item, index) => {
+          {visibleData.map((item, index) => {
             // Check if this specific array item has been changed
             const isChanged = isArrayItemChanged(changedPaths, keyPath, index);
 

packages/ui/src/extracted-data/property-renderer/property-renderer.tsx

@@ -47,6 +47,8 @@ interface PropertyRendererProps<S extends JsonShape<S>> {
     path: string[];
   }) => void;
   editable?: boolean;
+  tableRowsPerPage?: number;
+  listItemsPerPage?: number;
 }
 
 export function PropertyRenderer<S extends JsonShape<S>>({
@@ -58,6 +60,8 @@ export function PropertyRenderer<S extends JsonShape<S>>({
   validationErrors = [],
   onClickField,
   editable = true,
+  tableRowsPerPage = 10,
+  listItemsPerPage = 10,
 }: PropertyRendererProps<S>) {
   const pathString = keyPath.join(".");
   const isChanged = isPropertyChanged(changedPaths, keyPath);
@@ -148,6 +152,7 @@ export function PropertyRenderer<S extends JsonShape<S>>({
           keyPath={keyPath}
           metadata={{ schema: effectiveMetadata.schema, extracted: {} }}
           editable={editable}
+          listItemsPerPage={listItemsPerPage}
         />
       );
     }
@@ -205,6 +210,7 @@ export function PropertyRenderer<S extends JsonShape<S>>({
           validationErrors={validationErrors}
           onClickField={onClickField}
           editable={editable}
+          tableRowsPerPage={tableRowsPerPage}
         />
       );
     } else {
@@ -241,6 +247,7 @@ export function PropertyRenderer<S extends JsonShape<S>>({
           }}
           onClickField={onClickField}
           editable={editable}
+          listItemsPerPage={listItemsPerPage}
         />
       );
     }
@@ -266,6 +273,7 @@ export function PropertyRenderer<S extends JsonShape<S>>({
                       validationErrors={validationErrors}
                       onClickField={onClickField}
                       editable={editable}
+                      listItemsPerPage={listItemsPerPage}
                     />
                   </div>
                 </div>
@@ -290,6 +298,7 @@ export function PropertyRenderer<S extends JsonShape<S>>({
                         validationErrors={validationErrors}
                         onClickField={onClickField}
                         editable={editable}
+                        listItemsPerPage={listItemsPerPage}
                       />
                     </div>
                   </div>

packages/ui/src/extracted-data/table-renderer/table-renderer.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { EditableField } from "../editable-field";
 import { Button } from "@/base/button";
 import {
@@ -32,6 +32,7 @@ import { findExtractedFieldMetadata } from "../metadata-lookup";
 import { Plus, Trash2 } from "lucide-react";
 import { PrimitiveType, toPrimitiveType } from "../primitive-validation";
 import type { PrimitiveValue, JsonValue, JsonObject } from "../types";
+import { DataPagination } from "../data-pagination";
 
 export interface TableRendererProps<Row extends JsonObject> {
   data: Row[];
@@ -56,6 +57,7 @@ export interface TableRendererProps<Row extends JsonObject> {
     path: string[];
   }) => void;
   editable?: boolean;
+  tableRowsPerPage?: number;
 }
 
 export function TableRenderer<Row extends JsonObject>({
@@ -69,7 +71,9 @@ export function TableRenderer<Row extends JsonObject>({
   validationErrors = [],
   onClickField,
   editable = true,
+  tableRowsPerPage = 10,
 }: TableRendererProps<Row>) {
+  const [currentPage, setCurrentPage] = useState(1);
   const effectiveMetadata: RendererMetadata = {
     schema: metadata?.schema ?? ({} as Record<string, FieldSchemaMetadata>),
     extracted: metadata?.extracted ?? {},
@@ -337,12 +341,23 @@ export function TableRenderer<Row extends JsonObject>({
     return rows;
   };
 
+  const visibleData = data.slice(
+    (currentPage - 1) * tableRowsPerPage,
+    currentPage * tableRowsPerPage
+  );
+
   return (
     <div className="border border-b-0 rounded-md bg-white">
+      <DataPagination
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        totalItems={data.length}
+        perPage={tableRowsPerPage}
+      />
       <Table className="table-auto">
         <TableHeader>{generateHeaderRows()}</TableHeader>
         <TableBody>
-          {data.map((item, rowIndex) => (
+          {visibleData.map((item, rowIndex) => (
             <TableRow key={rowIndex} className="hover:bg-gray-50 border-0">
               {columns.map((column, colIndex) => {
                 const value = getValue(item, column) as

packages/ui/src/extracted-data/types.ts

@@ -20,6 +20,8 @@ export interface ExtractedDataDisplayProps<S extends JsonShape<S>> {
     metadata?: ExtractedFieldMetadata;
     path: string[];
   }) => void;
+  tableRowsPerPage?: number;
+  listItemsPerPage?: number;
 }
 
 // Convenience type used by renderers to carry both schema metadata and extracted metadata

packages/ui/stories/extracted-data/stress-test.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { ExtractedDataDisplay } from "../../src/extracted-data";
+import { hugeSampleData } from "./shared-data";
+
+const meta: Meta<typeof ExtractedDataDisplay> = {
+  title: "Components/ExtractedDataDisplay/StressTest",
+  component: ExtractedDataDisplay,
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ExtractedDataDisplay>;
+
+function StressTestStoryComponent() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { extractedData, schema } = hugeSampleData as any;
+  return (
+    <ExtractedDataDisplay
+      extractedData={extractedData}
+      jsonSchema={schema}
+      editable={false}
+    />
+  );
+}
+
+export const StressTest: Story = {
+  render: () => <StressTestStoryComponent />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the component to load
+    await waitFor(() => {
+      expect(
+        canvas.getByText(/Page \d+ \/ \d+ - \d+ items/)
+      ).toBeInTheDocument();
+    });
+
+    // Find pagination elements
+    const paginationInfo = canvas.getByText(/Page \d+ \/ \d+ - \d+ items/);
+    expect(paginationInfo).toBeInTheDocument();
+
+    // Extract pagination info to understand the data size
+    const paginationText = paginationInfo.textContent || "";
+    const pageMatch = paginationText.match(/Page (\d+) \/ (\d+) - (\d+) items/);
+    expect(pageMatch).toBeTruthy();
+
+    const [, currentPage, totalPages, totalItems] = pageMatch!;
+    const currentPageNum = parseInt(currentPage);
+    const totalPagesNum = parseInt(totalPages);
+    const totalItemsNum = parseInt(totalItems);
+
+    console.log(
+      `Pagination info: Page ${currentPageNum}/${totalPagesNum}, ${totalItemsNum} items`
+    );
+
+    // Test pagination navigation if there are multiple pages
+    if (totalPagesNum > 1) {
+      // Test next page navigation
+      const nextButton = canvas.getByLabelText("Go to next page");
+      expect(nextButton).toBeInTheDocument();
+
+      // Click next page
+      await userEvent.click(nextButton);
+
+      // Wait for page to update
+      await waitFor(() => {
+        const updatedPaginationInfo = canvas.getByText(
+          /Page \d+ \/ \d+ - \d+ items/
+        );
+        const updatedText = updatedPaginationInfo.textContent || "";
+        const updatedMatch = updatedText.match(
+          /Page (\d+) \/ (\d+) - (\d+) items/
+        );
+        expect(updatedMatch).toBeTruthy();
+        const [, newCurrentPage] = updatedMatch!;
+        expect(parseInt(newCurrentPage)).toBe(currentPageNum + 1);
+      });
+
+      // Test previous page navigation
+      const prevButton = canvas.getByLabelText("Go to previous page");
+      expect(prevButton).toBeInTheDocument();
+
+      // Click previous page
+      await userEvent.click(prevButton);
+
+      // Wait for page to update back to original
+      await waitFor(() => {
+        const finalPaginationInfo = canvas.getByText(
+          /Page \d+ \/ \d+ - \d+ items/
+        );
+        const finalText = finalPaginationInfo.textContent || "";
+        const finalMatch = finalText.match(/Page (\d+) \/ \d+ - \d+ items/);
+        expect(finalMatch).toBeTruthy();
+        const [, finalCurrentPage] = finalMatch!;
+        expect(parseInt(finalCurrentPage)).toBe(currentPageNum);
+      });
+    }
+  },
+};