# Card Payments Ledger block

> Virtualized data grid with infinite scroll and bulk row actions

Transaction table that virtualizes rows and loads on scroll. Search, sorting, filter dropdowns, column visibility, bulk export/refund. ReUI DataGrid, Frame, Badge, Filters; shadcn Button, InputGroup, Popover, Switch. Payments ledger, admin panel.

- 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-1
- 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-1")`
- 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 card payments ledger with risk score dots, wallet methods with masked card numbers and a bulk refund that totals the selected amounts

## Agent notes

- `TRANSACTIONS` is a generated array of 10,000 rows with a `risk` score of 0 to 100; replace it with your payments data
- `handleRefundSelected` and `handleExportSelected` clear `rowSelection` and show a toast; no refund or export request is sent
- `ActionsCell` View receipt and Refund only show a toast, and Refund stays disabled unless `status` is Settled

## When not to use

- Shipment exceptions with owners and late ETAs, queued for bulk assignment: use [Shipment Exceptions](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-2.md) (`get_block("data-grid-virtualization-2")`)
- A short payments ledger paged with page controls and narrowed by text filter rules: use [Billing Transactions](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-1.md) (`get_block("data-grid-filtering-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-1
```

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