#761
Money total per column
A deals pipeline board that shows the money total of each column next to its count, keeping the stage colour rail, title and count that a custom header would replace.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Money total per column" pattern (@codeatlasdev/ui demo #761, display/kanban) in my app.
Call get_demo({ ids: ["#761"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Sales pipelines, invoicing stages and any board where each column needs an aggregate (sum, weight, hours) beside the card count.
Keep these library parts, with the props and tokens the demo uses:
- Kanban, KanbanColumn from "@codeatlasdev/ui"
Behaviour to keep:
- `.kb-totals { display: flex; height: 22rem; }` is the board-height parent, a scoped class
- `<Kanban`
- `label="Deals pipeline"`
- `{#snippet summary(column)}`
- `money.format(`
- `c.items.reduce(`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Kanban
@codeatlasdev/ui
How it is built
- `.kb-totals { display: flex; height: 22rem; }` is the board-height parent, a scoped class
- `<Kanban`
- `label="Deals pipeline"`
- `{#snippet summary(column)}`
- `money.format(`
- `c.items.reduce(`
Related
Loading source.