# Infinity Scroll
URL: https://pro.rv-grid.com/api/infinity-scroll/
Source: src/content/docs/api/infinity-scroll.md
## Module Extensions

### `HTMLRevoGridElement` (Extended from `global`)

```ts
interface HTMLRevoGridElement {
  infinityScroll?: Partial<InfinityScrollConfig>;
  'infinity-scroll'?: Partial<InfinityScrollConfig>
}
```

---

### `HTMLRevoGridElementEventMap` (Extended from `global`)

```ts
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`)

```ts
interface AdditionalData {
  /**
       * Additional data property for infinity scroll
       * @deprecated Use `grid.infinityScroll` instead.
       *
       * @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?: Partial<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:
```typescript
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();
    }
  }
};
```

#### Dependencies

- **Optional** `sorting-capable-plugin`: Integrates with a plugin exposing sorting state for remote infinite-scroll sorting.
- **Event integration** `beforefilterapply`, `beforesortingapply`: Integrates with filter events to forward remote filter state to loadData.

```ts
class InfinityScrollPlugin {
  destroy();
}
```

---

### `InfinityScrollLoadDataResult`

```ts
interface InfinityScrollLoadDataResult {
  data: T[];
  hasMore?: boolean;
  total?: number
}
```

---

### `InfinityScrollConfig`

```ts
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 array
     * or object with explicit pagination state
     */
    loadData: (
      skip: number,
      limit: number,
      order?: { [key: ColumnProp]: 'asc' | 'desc' },
      filter?: Record<ColumnProp, FilterCollectionItem>
    ) => Promise<any[] | InfinityScrollLoadDataResult>
}
```

---

### `ResolvedInfinityScrollConfig` (Extended from `index.ts`)

```ts
interface ResolvedInfinityScrollConfig {
  dynamicChunkSize?: boolean
}
```

---

### `ScrollChangeEvent`

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

---

### `SCROLL_CHANGE_EVENT`

```ts
SCROLL_CHANGE_EVENT: string;
```
