gridcn1.2.2
ExamplesData & Integrations

Lazy Loading

Fetch rows only as they scroll into view. A plain fetcher, TanStack Query, and SWR.

useDataGridLazyRows keeps a sparse row array and asks for [start, end) ranges as the viewport scrolls. Skeleton rows hold the space until each range lands. What fills a range is your choice: a plain fetch, a TanStack Query cache, or SWR's global cache. Each page embeds the live registry example.

Plain

A simulated-latency fetcher with failure/retry buttons — the baseline.

TanStack Query

Each range is a fetchQuery — deduped, cached for the session, no refetch on scroll-back.

SWR

Each range through preload into the global cache, shared with any useSWR consumer.

Large data

100k rows fully loaded. Virtualization keeps only the virtualized rows mounted.

Plain fetcher

useDataGridLazyRows with a plain simulated-latency fetcher, as the baseline pattern.