# Billing Transactions block

> Billing transactions data grid with multi-field filter bar and async skeleton loading

Transactions ledger grid with a Filters bar (text, searchable selects, contains/between operators), clear-all, async skeleton loading, sorting, pagination, and row actions. ReUI DataGrid, Filters, Frame, Badge. Payments, billing, fintech table.

- Type: Pro block
- Category: [Filtering](https://web.dev.reui.io/blocks/data-grid/filtering.md)
- Page: https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-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-filtering-1")`
- Built with: Alert Dialog, Badge, Button, Data Grid, Dropdown Menu, Filters, Frame, Item, Separator, Skeleton, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A payments ledger that reloads behind skeleton rows when its active rules change, with merchant logos and signed amounts

## Agent notes

- `simulateAsyncFiltering` fakes a 400 ms fetch with `setTimeout`; replace it with your API call and keep `isLoading` driving the skeleton
- `TRANSACTIONS` is the demo ledger; `MERCHANT_FILTER_OPTIONS` is built from it and the `merchantLogo` nodes, so rebuild both with your merchants
- `handleDisputeConfirm`, View Details, Receipt and the New transaction button only raise toasts; wire them to your payments API

## When not to use

- A long list that loads more rows as the user scrolls: use [Card Payments Ledger](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-1.md) (`get_block("data-grid-virtualization-1")`)
- Work queue rows that switch between a table and a card view: use [Work Queue](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-3.md) (`get_block("data-grid-columns-3")`)

## 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-filtering-1
```

## About Filtering blocks

### When to use

- Record tables narrowed by a row of filter chips, each holding a field, an operator and a value
- A transactions ledger or a workflow catalog searched by reference, merchant, owner team or delivery mode
- Renewal queues sliced by stage, risk, owner, renewal window or signal to find the accounts at risk

### When not to use

- The table parts alone, wired to your own columns, rows and toolbar: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Customer, deal, ticket or timesheet tables with a title, toolbar and pagination: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- Only the chip row and rule builder, to narrow cards or a list you already render: use [Filters](https://web.dev.reui.io/components/filters.md) (`get_component("filters")`)

### Agent notes

- `applyFiltersToData` runs each `FilterQuery` rule over every demo row in the browser; send the query to your API once rows outgrow the client
- The operator switch behind `applyFiltersToData` is written per block; add a case for each operator a new `filterFields` type brings
- Each page.tsx wraps the grid in a `min-h-svh` main with `max-w-7xl` and an sr-only `h1`; drop the wrapper and keep one `h1` in your layout

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.