# Shadcn Virtualization blocks

> Virtualized rendering for large datasets with smooth scrolling.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/virtualization
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/data-grid.md
- Blocks: 2
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- Record lists of thousands of rows read in one continuous scroll, with the next batch fetched near the end
- Bulk triage on a long list: select many rows, see their count and a total, then act on them at once
- Payment ledgers and shipment exception queues whose search and filters reach every record, loaded or not

## When not to use

- A virtual table wired into your own layout, without a toolbar, bulk bar or demo rows: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- A list short enough to step through page by page with page controls: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Records narrowed by a rule builder that mixes free text conditions with choice fields: use the [Filtering blocks](https://web.dev.reui.io/blocks/data-grid/filtering.md)

## Agent notes

- `fetchMore` adds `PAGE_SIZE` rows to `loadedCount` after a `FETCH_DELAY_MS` timer; request the next page from your API there
- Search, filters and sort run in the browser over the whole generated array before `queryResult` is cut to `loadedCount`; move that query to your API
- Rows are spaced by the fixed `ROW_ESTIMATE` passed to `estimateSize`; keep it equal to the rendered row height when you restyle rows

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start), used by 2 of 2 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 2 of 2 blocks

## Blocks

- [Card Payments Ledger](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-1.md): Virtualized data grid with infinite scroll and bulk row actions. Best for a card payments ledger with risk score dots, wallet methods with masked card numbers and a bulk refund that totals the selected amounts.
- [Shipment Exceptions](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-2.md): Virtualized shipment exception queue with infinite scroll. Best for a shipment exception queue under a 5 metric KPI band, with late ETA hours, owner avatars and bulk assign or release.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.