# Shipment Exceptions block

> Virtualized shipment exception queue with infinite scroll

Exception queue over 8,000 virtualized rows with infinite-scroll paging, row selection, bulk assign/release, faceted filters, search, and sorting. ReUI DataGrid, Frame; shadcn Button, Separator, Tooltip. Operations dashboard, shipment tracking.

- Type: Pro block
- Category: [Virtualization](https://web.dev.reui.io/blocks/data-grid/virtualization.md)
- Page: https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-2
- 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
- MCP: `get_block("data-grid-virtualization-2")`
- Built with: Avatar, Badge, Button, Data Grid, Dropdown Menu, Field, Filters, Frame, Input Group, Popover, Separator, Switch, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A shipment exception queue under a 5 metric KPI band, with late ETA hours, owner avatars and bulk assign or release

## Agent notes

- `SHIPMENTS` is a generated array of 8,000 rows, each with an `owner` or null; replace it with your shipment feed
- `SHIPMENT_KPIS` is computed once from `SHIPMENTS` at load, so the KPI band ignores search and filters; feed it from your API
- `handleAssignSelected` and `handleReleaseSelected` clear `rowSelection` and show a toast; no assignment or release is sent

## When not to use

- Card charges with risk scores and refund actions rather than shipment rows: use [Card Payments Ledger](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-1.md) (`get_block("data-grid-virtualization-1")`)
- An overview page that pairs stat cards and capacity charts with the exception grid: use [Fulfillment Exceptions](https://web.dev.reui.io/blocks/application/dashboard/dashboard-1.md) (`get_block("dashboard-1")`)

## 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)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/data-grid-virtualization-2
```

## About Virtualization blocks

### 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

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.