# Store KPI Board block

> Store sales KPI grid with dot matrix trend headers, in-cell value bars, change bars and goal pace

Monthly store sales review on ReUI DataGrid: dot matrix trends over each KPI column, stores grouped by country rail and format, value and change bars, goal pace and gap, return rate steps, KPIs up bars, inline add. ReUI 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-16
- 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-16")`
- Built with: Alert Dialog, Avatar, Badge, Button, Button Group, Cascader, Data Grid, Dropdown Menu, Empty, Field, Filters, Frame, Input, Input Group, Kbd, Select, Sheet, Skeleton, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Store sales KPIs by country and format against the same month last year, with a dot matrix trend over each KPI column and goal pace

## Agent notes

- `STORES` holds each store's `months`: 24 monthly line items (sales, orders, customers, units, gross profit, returned units); swap in your sales feed
- `readingOf` derives each KPI, change, goal pace, return level and momentum for a month and `Compare`; `sourceOf` sums stores into markets
- Edits stay in `DataGridView` state; send `addStore`, `storeFromDraft`, `applyDraft` and the delete in `confirmDelete` to your API

## 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)
- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt)

## Install

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

## 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 browser state, a store hook or a `useState`, so every create, edit and delete is lost on reload; back each write 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.