@omnigrid/infinite-scroll-plugin

Advanced infinite scroll / lazy loading plugin for OmniGrid. Fetches pages as the user approaches either edge of a bounded active row window.

What it provides

• Viewport-aware bidirectional loading at the edges of the active row window
• Configurable page size and pre-fetch threshold
• Host-provided fetchPage adapter for flexible data loading (REST, GraphQL, etc.)
• Bounded sliding row window and page cache (LRU / FIFO, bounded by maxPages)
• Bidirectional loading: fetches the next page near the bottom and restores evicted pages near the top
• Preserves the visible row position when the active window shifts
• Built-in loading spinner in the bottom slot with customizable renderer
• Automatic first-page loading on mount (optional)
• Public API: loadMore(), reset(), getState()
• Full TypeScript support

Usage

import { InfiniteScrollPlugin } from "@omnigrid/infinite-scroll-plugin";

const grid = new Grid({
  plugins: [
    new InfiniteScrollPlugin({
      pageSize: 50,
      threshold: 5,
      fetchPage: async (cursor, pageSize) => {
        const res = await fetch(`/api/rows?offset=${cursor}&limit=${pageSize}`);
        return res.json();
      },
    }),
  ],
  // ...
});

Licensing

Pass your key via licenseKey in the grid options (new Grid({ licenseKey, plugins: [...] }) or the React licenseKey prop).

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | pageSize | number | 50 | Rows per fetch page | | threshold | number | 5 | Visible rows from the end or start to trigger page loading | | fetchPage | (cursor, pageSize) => Promise<T[]> | required | Host adapter to load rows at an absolute offset; scrolling backward requests earlier offsets | | autoLoad | boolean | true | Fetch first page on mount if data is empty | | loadingRenderer | (context) => SlotContent | built-in spinner | Custom loading UI | | loadingAriaLabel | string | "Loading more results…" | Accessibility label for spinner | | onDataLoaded | (rows) => void | — | Callback after successful fetch | | onError | (error) => void | — | Callback on fetch failure | | cache | { maxPages?: number; evictionPolicy?: "lru" \| "fifo" } | { maxPages: 10, evictionPolicy: "lru" } | Maximum pages retained in the grid window and response cache; maxPages: 0 leaves the grid window unbounded and disables response caching |

Public API

const plugin = new InfiniteScrollPlugin({ fetchPage: ... });

// Imperative trigger
plugin.loadMore();

// Reset state (optionally clear data and re-fetch)
plugin.reset(true);

// Inspect current state
const { loadedRows, isFetching, hasMore } = plugin.getState();

Links

• Source: https://github.com/KRZK-Apps/omnigrid-pro/tree/main/plugins/infiniteScroll
• Demo: https://omnigrid-demo.vercel.app/
• Issues: https://github.com/KRZK-Apps/omnigrid-pro/issues

License

SEE LICENSE IN LICENSE.PRO.md