Documentation

Infinite Scroll

CodeSandbox

SimpleTable provides built-in infinite scroll functionality that automatically loads more data as users scroll near the bottom of the table. This feature is perfect for handling large datasets without overwhelming the user or degrading performance.

Basic Usage

To enable infinite scroll in your table, follow these steps:

  1. Set a fixed height - Use the height prop to create a scrollable container
  2. Implement the callback - Create an onLoadMore function that fetches additional data
  3. Update state - Append new data to your existing rows array

Infinite Scroll Configuration

PropertyRequiredDescriptionExample
onLoadMore
() => void
Optional
Callback function triggered when user scrolls near the bottom of the table to load more data. Useful for implementing infinite scrolling or paginated data loading.
height
string
Optional
Height of the table container. Required for infinite scroll to work properly as it enables the scroll detection.

How It Works

SimpleTable's infinite scroll implementation:

  • Scroll Detection - Monitors scroll position within the table container
  • Threshold Triggering - Calls onLoadMore when user scrolls near the bottom (typically 100px before the end)
  • Debouncing - Prevents multiple simultaneous requests by debouncing the scroll event
  • Smooth Integration - New data is seamlessly appended to the existing table