# Shadcn Advanced blocks

> Analytics grids with in-cell charts, KPI rollups, a tree view and an SLO chart, plus a review queue, a stock mix sheet, a pro forma and a visit planner.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/advanced
- 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
- Blocks: 8
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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://web.dev.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://web.dev.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://web.dev.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

## 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), used by 8 of 8 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 8 of 8 blocks
- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/), used by 3 of 8 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 3 of 8 blocks
- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 1 of 8 blocks (the docs follow the latest Motion, with no React API break since v12)
- Shiki v4: [API reference](https://shiki.style/guide/install), [docs](https://shiki.style/guide/), used by 1 of 8 blocks

## Blocks

- [Ad Campaign Performance](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-1.md): Campaign performance grid with in-cell sparklines, ROAS bullet charts and new buyer share bars. 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.
- [Regional Store P&L](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-2.md): Store P&L grid with a geography tree, plan attainment bars and profit vs FY25 loss and gain cells. Best for stores shown flat or as a geography tree with subtotals, plus profit heat cells, rank chips and region scorecards that filter.
- [Campaign Target Review](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-3.md): Campaign target grid with diverging ROAS and CPA bars, channel-grouped rows and a column filter row. Best for campaigns judged on ROAS and CPA against their own targets, with funnel stage tabs, verdict chips, a target change history and CSV export.
- [SLO Reliability Index](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-4.md): SLO error budget grid and linked lollipop chart with a shared objective and window override. Best for every team's SLOs compared at a shared objective and window you pick, ranked worst first with chart hover lighting the grid row.
- [Wholesale Onboarding](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-5.md): Wholesale application review grid with quick-update cells and expandable door rows. Best for accounts that open into per-store rows, each clearing 4 onboarding checks, with bulk approve and hold and 4 queue tiles.
- [Stock Mix](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-6.md): Retail Stock Mix Sheet With Categories as Columns, Pinned Totals and Range Editing. Best for a transposed sheet with one column per entity, parameter rows, targets over actuals and pinned totals.
- [Fourplex Pro Forma](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-7.md): Rental Property Pro Forma Grid With Section Subtotals, Pinned Returns and Line Editing. Best for a rental pro forma that rolls line sections up to NOI, cash flow and return by year, with click to edit inputs and lines added in place.
- [Service Visit Planner](https://web.dev.reui.io/blocks/data-grid/advanced/data-grid-advanced-9.md): Kitchen service visit planner with a three week day matrix and unbooked due markers. Best for recurring contractor visits across many sites, each service on its own cycle, with missed, awaiting and unbooked days in a day matrix.

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.