# Ad Campaign Performance block

> Campaign performance grid with in-cell sparklines, ROAS bullet charts and new buyer share bars

Paid media reporting table for 30 campaigns with a 6-tile KPI band that follows search and AND/OR rule filters, bulk pause and delete, and undo toasts. Rows open a 3-tab detail sheet. ReUI DataGrid, Filters, Cascader; shadcn Chart, Sheet. PPC, ROAS.

- Type: Pro block
- Category: [Advanced](https://reui.io/blocks/data-grid/advanced.md)
- Page: https://reui.io/blocks/data-grid/advanced/data-grid-advanced-1
- Docs (Base UI): https://reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://reui.io/docs/components/radix/data-grid.md
- MCP: `get_block("data-grid-advanced-1")`
- Built with: Alert Dialog, Avatar, Badge, Button, Cascader, Chart, Data Grid, Dropdown Menu, Field, Filters, Frame, Icon Tile, Input, Input Group, Popover, Progress, Select, Separator, Sheet, Switch, Table, Tabs, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Campaign rows with a 30 day conversion sparkline and a ROAS bullet on its target tick, narrowed by an AND or OR rule builder

## Agent notes

- `CAMPAIGNS` rows are generated, and `dailyConversionsOf` derives each 30 point sparkline from the row's totals, so supply real daily counts
- `handleExportSelected` only shows an Export queued toast and clears the selection; no file is written
- `ROAS_AXIS_MAX` fixes one 12x axis for every ROAS bullet, so set it to the top of your own ROAS range

## When not to use

- A multi-field filter bar over async loaded rows, with a skeleton while they load: use [Billing Transactions](https://reui.io/blocks/data-grid/filtering/data-grid-filtering-1.md) (`get_block("data-grid-filtering-1")`)
- Filtering from a row of inputs under the column headers rather than a rule builder: use [Campaign Target Review](https://reui.io/blocks/data-grid/advanced/data-grid-advanced-3.md) (`get_block("data-grid-advanced-3")`)

## Install

```bash
npx shadcn@latest add @reui/data-grid-advanced-1
```

## About Advanced blocks

### When to use

- Reporting tables whose rows carry in-cell bars, sparklines or heat cells beside the figures
- Performance reviews that weigh each record against a target, a plan or a prior period
- Record lists with create, edit, bulk delete and undo, where each row opens a tabbed detail sheet

### When not to use

- A rule builder on its own, to narrow a list or table you already have: use [Filters](https://reui.io/components/filters.md) (`get_component("filters")`)
- A plain sortable table of text cells, assembled from parts in your own layout: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Values typed into the cells themselves, with validation and a save or discard bar: use the [Editing blocks](https://reui.io/blocks/data-grid/editing.md)

### Agent notes

- Rows live in a client store hook whose `create`, `update`, `setStatus` and `remove` each return an `undo`; back them with your API
- Search, filters and sort run in the browser over every row, and `manualSorting` keeps TanStack from sorting again; move that query to your API at scale
- Each page.tsx wraps `DataGridView` in a `min-h-svh` main with padding and a max width; drop that wrapper inside an app shell

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