DATA TABLE INTERACTION PATTERNS FOR LARGE SETS

GOAL: Display 10,000+ rows without degrading performance

PATTERN 1: Virtualization (Recommended for 10k+ rows)
• Render only visible rows (40-60 on screen at a time)
• User experience: Smooth scrolling, instant load, no lag
• Implementation: React Window or ag-Grid with virtual scrolling
• Best for: Scanning, filtering, sorting within large datasets
• Avoid: Complex nested content per row (slow to render)

PATTERN 2: Pagination (Best for export, comparison)
• Show 50 rows per page, next/previous buttons
• User experience: Deliberate navigation, clear checkpoint
• Implementation: Simple HTML buttons, minimal JavaScript
• Best for: Reports, where users want to download or bookmark a page
• Avoid: If users need to compare rows across pages (context loss)

PATTERN 3: Infinite Scroll (NOT recommended for tables)
• Auto-load more rows as user scrolls down
• Problem: Can't scroll back to top, no context anchor
• Use only for: Unstructured feeds (Twitter, Instagram)
• Avoid: Tables (users lose place)

ACCESSIBILITY & STATES
• Empty state: "No results match your filters" (help text included)
• Loading state: Skeleton loaders for each row (not spinner)
• Error state: "Connection lost. Retry?" (clear action button)
• Keyboard nav: Arrow keys move between cells, Enter to expand row detail
• Screen reader: Table announces current page ("Showing 51-100 of 5,000")

RECOMMENDED SOLUTION
• Virtualization + filter bar at top (search by name, date, status)
• "Rows per page" option (25, 50, 100) to balance detail vs. performance
• Sticky header (stays visible while scrolling)
• Click row to expand detail panel (side drawer, not modal)