OrderBookRow
Single order book price level row with cumulative depth bar — presentational <tr> sub-component rendered inside OrderBook
import { OrderBookRow } from "@nodus/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
pricereq | number | — | Price level |
quantityreq | number | — | Quantity at this level |
cumulative | number | — | Cumulative quantity — drives the depth bar width |
sidereq | 'bid' | 'ask' | — | Book side — drives color and alignment |
maxCumulativereq | number | — | Max cumulative for depth bar scaling |
precision | number | 4 | Rate decimal precision |
locale | string | en-US | BCP 47 locale |
style | CSSProperties | — | Style override |
pricerequirednumberDefault —Price level
quantityrequirednumberDefault —Quantity at this level
cumulativenumberDefault —Cumulative quantity — drives the depth bar width
siderequired'bid' | 'ask'Default —Book side — drives color and alignment
maxCumulativerequirednumberDefault —Max cumulative for depth bar scaling
precisionnumberDefault 4Rate decimal precision
localestringDefault en-USBCP 47 locale
styleCSSPropertiesDefault —Style override
Accessibility
- Renders a native <tr> — must be placed inside a <table><tbody> (normally via OrderBook) for correct table semantics.
- Bid/ask side is encoded by both color and cell alignment; the depth bar is a low-opacity background that does not carry text.
- Prices and quantities use tabular-nums monospace.
Row of OrderBook — the parent book activates horizontal scroll on narrow viewports.
This component was designed to express:
Explore Related
Depth-of-market order book with bid/ask columns and cumulative volume bars
Bid-ask spread display with basis point calculation and severity coloring
GPU-accelerated order book depth visualization. Bid (temporal blue) and ask (agency red) cumulative depth curves as filled triangle-strip areas with smooth line borders. Animates live via rAF.