# Project Budget block

> Project budget grid with health tiles, a schedule column and line decisions

Project budget on ReUI DataGrid: at-risk, contingency and burn tiles, lines on a schedule with slips, rows that open to spend and burn, cover, adjust or hold decisions. For budget vs actual.

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

## Best for

Project budgets built from hours, licenses and fees, read on a schedule, re-forecast in place and settled by cover, adjust or hold decisions

## Agent notes

- Swap `LINES`, `VENDORS`, `PEOPLE` and `RESERVE` in data.ts and feed `spendOf` your real spend; `budgetOf`, `forecastOf` and `forecastEndOf` hold the rules
- `useBudgetStore` changes only React state; send `writeLine`, `createLine`, `updateLine` and `removeLines` to your API
- `notify` confirms every save, forecast and delete as a sonner `toast` that carries its Undo, so mount your app's Toaster once in the root layout

## When not to use

- A month by month P&L read against budget or prior year: use [Retail P&L Outlook](https://reui.io/blocks/data-grid/advanced/data-grid-advanced-15.md) (`get_block("data-grid-advanced-15")`)
- A property pro forma rolled up to cash flow and return: use [Fourplex Pro Forma](https://reui.io/blocks/data-grid/advanced/data-grid-advanced-7.md) (`get_block("data-grid-advanced-7")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- 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)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

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

## 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.