Pagination Pattern

Efficient data pagination with offset-based and cursor-based strategies, including type-safe helpers, API integration, and reusable UI components.

What's Included#

• Offset-based pagination helper with page metadata (total, hasNext, hasPrev)
• Cursor-based pagination helper for efficient large dataset traversal
• API route integration returning paginated data with metadata
• Page navigation component with page number display and ellipsis
• Infinite scroll component using React Query and Intersection Observer
• Input validation and capping for page size parameters

Usage#

Via CLI#

Via AI Assistant#

Ask your AI assistant:

• "Use the pagination pattern from Bootspring"
• "Apply the Bootspring pagination pattern to my project"

Key Considerations#

• Cap maximum page size (e.g., 100 items) to prevent oversized responses
• Use cursor-based pagination for large datasets as it performs better than offset
• Always include pagination metadata (total count, has next/prev) in responses
• Validate page parameters to ensure positive integers and reasonable limits
• Preserve active filters in pagination URLs when navigating between pages
• Handle empty states with appropriate UI when no results are found

Related Patterns#

• Filtering - Add filters to paginated data
• Route Handler - API endpoint implementation