# Product KPI Grid block

> KPI grid of products with photo tiles, revenue trends, promo calendars and KPI status segments

KPI review of 29 products over 4, 13 or 26 weeks: revenue with its change on the prior period and a trend of both, profit, a promo calendar that opens each week and a KPI Status on three guardrails across ten markets. ReUI DataGrid, Filters, Frame.

- Type: Pro block
- Category: [Advanced](https://reui.io/blocks/data-grid/advanced.md)
- Page: https://reui.io/blocks/data-grid/advanced/data-grid-advanced-8
- 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-8")`
- Built with: Alert Dialog, Avatar, Badge, Button, Button Group, Cascader, Data Grid, Dropdown Menu, Empty, Field, Filters, Frame, Icon Tile, Input, Input Group, Kbd, Number Field, Popover, Progress, Select, Separator, Sheet, Slider, Switch, Table, Tabs, Textarea, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Products scored on revenue, margin and discount against three dragged guardrails, with a promo calendar and a market map per product

## Agent notes

- `weeklyOf` models 52 weeks per product from `LINE_SEEDS` and `PROMOTION_BY_KEY`; return actuals with each week's everyday `usual` and promo `lift`
- `DEFAULT_GUARDRAILS` seeds the Guardrails popover and `healthOf` re-scores every product's KPI Status on it; `guardrailCountsOf` fills the popover's live counts
- `MARKET_SHARE` splits products across ten markets; `useLineStore` and `downloadLinesCsv` run in the browser, so send writes and exports to your API

## When not to use

- Records judged against their own per row targets rather than one shared bar: use [Campaign Target Review](https://reui.io/blocks/data-grid/advanced/data-grid-advanced-3.md) (`get_block("data-grid-advanced-3")`)
- Store level profit rolled up a geography tree with subtotal rows: use [Regional Store P&L](https://reui.io/blocks/data-grid/advanced/data-grid-advanced-2.md) (`get_block("data-grid-advanced-2")`)

## 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-advanced-8
```

## 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
- Review queues and record lists with create, edit, delete and undo, each row opening a tabbed 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` and `remove` change only browser state; back them with your API
- Search, filters and sort run in the browser over every row before `useTable` sees them; move that query to your API at scale
- Each page.tsx wraps the block in a `min-h-svh` main with padding, a `max-w-7xl` width and an sr-only `h1`; 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.