For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
Best for: Month columns over a picked range where each parent line sums its children, with plan match rings and an Expand All toggle
When to use
- Parent records that open in place to show the child rows or detail cards they hold
- Rolled up totals, such as a cash or budget line, that drill down to the items behind them
- Task and approval queues where each item carries its own sub-tasks or checklist
When not to use
- Rows bucketed under collapsible headers by a shared field, not parents with child lines: use the Roadmap by Stage block
- Rows bucketed by a shared field value, or a tree nested more than one level deep: use the Grouping blocks
- A finished page of flat records where every row stands alone, with nothing nested: use the Base blocks
- A table you assemble from the bare parts, where no row opens to reveal more: use the Data Grid component
Agent notes
TREASURY_LINESis sample data; each parent'svaluescome fromsumSeriesover itschildren, so supply child values and keep the roll-upFINANCE_MONTHSis a fixed 5 month window built fromNOW, and the Calendar disables dates outside it; generate it from your data range- The New Transaction button in
TreasuryGridViewhas noonClick, so connect it to your entry form - Each page.tsx centers the view in a
min-h-svhmain capped atmax-w-7xlbeside an sr-onlyh1; keep only the view inside your app shell pageSizecounts parent rows only, so open children always stay on their parent's page; page your API by parent and return children with it
Third-party API docs
- TanStack Table v9: API reference, docs
- date-fns v4: docs
- React DayPicker v9: API reference, docs
https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-2.mdget_block("data-grid-expansion-2")npx shadcn@latest add @reui/data-grid-expansion-2Shadcn Components in the Cash Flow Waterfall Block
Dependencies
- @tanstack/react-table
- cn
- date-fns
- react-day-picker
Shadcn Cash Flow Waterfall Block
Treasury Waterfall Data Grid with Expandable Lines and Actuals, Plan, Variance Tabs. Part of the ReUI Shadcn Data Grid Expansion blocks collection.
Cash-flow grid: expandable parent lines drill into child items, Actuals/Plan/Variance tabs, Calendar month-range picker, search, plan-match and variance tooltips. For treasury, FP&A, budget, and burn dashboards. ReUI DataGrid, Frame, Badge.
It is composed from Badge, Button, Button Group, Calendar, Card, Data Grid, Frame, Input Group, and more, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Cash Flow Waterfall Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn Data Grid Expansion blocks to assemble a full screen instead of a single section.
All Shadcn Data Grid Expansion Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Sub-Task Tracker Task queue data grid with expandable parent rows that reveal nested sub-tasks inline
- Release Approvals Release Review Data Grid with Expandable Rows Revealing a Checklist Card Rail
Related Shadcn Data Grid Block Categories
- Base (8) Complete table screens with toolbar filters and pagination for CRM, support, team, project, and pricing data.
- Advanced (8) 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.
- Columns (5) Column visibility, pinning, resizing, density, and settings controls.
- Drag & Drop (4) Drag-and-drop row and column reordering with sortable handles.
- Editing (6) Inline create, edit, and delete cells for full CRUD workflows.
- Filtering (4) Search, faceted filters, filter builders, and status tab toolbars.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Cash Flow Waterfall block?
Use it for month columns over a picked range where each parent line sums its children, with plan match rings and an Expand All toggle.
The Expansion category fits:
- Parent records that open in place to show the child rows or detail cards they hold
- Rolled up totals, such as a cash or budget line, that drill down to the items behind them
- Task and approval queues where each item carries its own sub-tasks or checklist
For rows bucketed under collapsible headers by a shared field, not parents with child lines, use the Roadmap by Stage block. For rows bucketed by a shared field value, or a tree nested more than one level deep, use the Grouping blocks. For a finished page of flat records where every row stands alone, with nothing nested, use the Base blocks. For a table you assemble from the bare parts, where no row opens to reveal more, use the Data Grid component.
What is the Cash Flow Waterfall block built with?
Can I restyle the Cash Flow Waterfall block?
How should I use Shadcn expansion blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.