KQ-634 · HOLDING/ROW
Holding Row
A position that opens its history. Pressing the row expands the panel on glide to a height a ResizeObserver measured on the content, so no room is reserved for a panel that is not showing; inside, the mini trace draws its pathLength while the fill scales off the baseline and the lot rows arrive on a cascade. A change in price is caught by comparing the incoming prop with the committed one during render — no clock — and each catch remounts a wash that flashes behind the change chip while the value swaps in a slot sized by an invisible copy of itself, so the row never reflows mid-tick. The header is a real aria-expanded button: Enter and Space toggle, Escape closes and returns focus.
- BSN $24.18, up 1.24 percent, 2,000 units worth $48,360.00.
Lots held in Basin Holdings (BSN) Opened Units Cost 12 Mar 2025 1,200 $24,960.00 4 Nov 2025 800 $17,840.00 - FRN $51.60, down 0.62 percent, 940 units worth $48,504.00.
- CBK $12.04, up 0.31 percent, 1,350 units worth $16,254.00.
Paused · Open BSN · 0 ticks
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/holding-row
Props
- symbol
- string
- default —
- The invented ticker, set in mono; it also names the panel.
- name
- string
- default —
- The position's full name, truncated with a title when it will not fit.
- quantity
- number
- default —
- Units held; the market value is quantity times price.
- price
- number
- default —
- Last price. A change flashes the chip and swaps the value in its slot.
- changePercent
- number
- default —
- Session change in percent; its sign drives the chip's colour and caret.
- history
- number[]
- default []
- Seeded closes, oldest first, for the mini trace. Fewer than two points hides the chart.
- lots
- HoldingLot[]
- default []
- Each lot's id, an already-formatted date, its quantity and its cost.
- open / defaultOpen
- boolean
- default false
- Controlled or initial expansion of the history panel.
- onOpenChange
- (open: boolean) => void
- default —
- Fires from the press or the Escape that changed the expansion.
- format
- (value: number) => string
- default Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
- Formats every amount. The default pins an explicit locale so server and client agree.
| Prop | Type | Default | Description |
|---|---|---|---|
| symbol | string | — | The invented ticker, set in mono; it also names the panel. |
| name | string | — | The position's full name, truncated with a title when it will not fit. |
| quantity | number | — | Units held; the market value is quantity times price. |
| price | number | — | Last price. A change flashes the chip and swaps the value in its slot. |
| changePercent | number | — | Session change in percent; its sign drives the chip's colour and caret. |
| history | number[] | [] | Seeded closes, oldest first, for the mini trace. Fewer than two points hides the chart. |
| lots | HoldingLot[] | [] | Each lot's id, an already-formatted date, its quantity and its cost. |
| open / defaultOpen | boolean | false | Controlled or initial expansion of the history panel. |
| onOpenChange | (open: boolean) => void | — | Fires from the press or the Escape that changed the expansion. |
| format | (value: number) => string | Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }) | Formats every amount. The default pins an explicit locale so server and client agree. |