Infinity Scroll

Module Extensions

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
  /**
       * Event for scroll change
       *
       * @example
       * ```typescript
        * grid.addEventListener(SCROLL_CHANGE_EVENT, (e) => {
       *   console.log(e);
       * });
       */
      [SCROLL_CHANGE_EVENT]: ScrollChangeEvent
}

---

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
       * Additional data property for infinity scroll
       *
       * @example
       * ```typescript
       * const grid = document.createElement('revo-grid');
       * grid.additionalData = { infinityScroll: { chunkSize: 50, bufferSize: 100, preloadThreshold: 0.75, total: 1000, loadData: async (skip, limit, order, filter) => {
       *   console.log(e);
       * });
       */
      infinityScroll?: InfinityScrollConfig
}

Plugin API

InfinityScrollPlugin

The InfinityScrollPlugin enables dynamic data loading as users scroll through the RevoGrid. It efficiently manages data chunks, loading new data when needed and cleaning up unused data to optimize memory usage.

Key Features:

• Dynamic data loading based on scroll position with buffer zones
• Pre-loads data ahead of scroll direction
• Efficient memory management by cleaning up off-screen data
• Configurable chunk size and buffer sizes
• Support for both known and unknown total data sizes
• Visual loading state for unloaded rows

Usage Example:

import { InfinityScrollPlugin } from './infinity-scroll';

const grid = document.createElement('revo-grid');
grid.plugins = [InfinityScrollPlugin];

grid.additionalData = {
  infinityScroll: {
    chunkSize: 50,
    bufferSize: 100, // How many rows to keep in buffer
    preloadThreshold: 0.75, // When to start loading more data (0-1)
    total: 1000, // optional
    loadData: async (skip, limit, order, filter) => {
      // Fetch data from your server
      const response = await fetch(`/api/data?skip=${skip}&limit=${limit}&order=${JSON.stringify(order)}`);
      return response.json();
    }
  }
};

class InfinityScrollPlugin {
  destroy(): void;
}

---

InfinityScrollConfig

interface InfinityScrollConfig {
  /**
     * Number of items to load per chunk
     */
    chunkSize: number;
  /**
     * Number of rows to keep in buffer before and after visible area
     */
    bufferSize: number;
  /**
     * When to start loading more data (0-1)
     * ### Example 0.75 means start loading when 75% of the current chunk is visible
     */
    preloadThreshold: number;
  /**
     * Total number of items available (if known)
     * Optional - set to undefined for unknown total
     */
    total?: number;
  /**
     * Function to load data from server
     * @param skip - Number of items to skip
     * @param limit - Number of items to load
     * @returns Promise with loaded data
     */
    loadData: (skip: number, limit: number, order?: { [key: ColumnProp]: 'asc' | 'desc' }, filter?: MultiFilterItem[]) => Promise<any[]>
}

---

ScrollChangeEvent

interface ScrollChangeEvent {
  /**
     * Number of items to skip
     */
    skip: number;
  /**
     * Number of items to load
     */
    limit: number
}

---

SCROLL_CHANGE_EVENT

SCROLL_CHANGE_EVENT: string;