TradeBlotter

stable

Trade activity log with sortable columns, status badges, and row-level detail

import { TradeBlotter } from "@nodus/design-system/finance"

Trade Blotter

ID	Instrument	Side	Qty	Price	Status
T-20260310-001	EUR/USD	buy	5,000,000	1.0842	filled
T-20260310-002	GBP/USD	sell	3,000,000	1.2651	partial
T-20260310-003	USD/JPY	buy	10,000,000	149.8500	pending
T-20260310-004	USD/CHF	sell	2,000,000	0.8812	cancelled

Loading demo…

Props

Prop	Type	Default	Description
`trades`req	`Trade[]`	—	Trade records
`currency`	`string`	—	Currency code
`locale`	`string`	—	BCP 47 locale override
`label`	`string`	—	Blotter title

tradesrequired

Type Trade[]Default —

Trade records

currency

Type stringDefault —

Currency code

locale

Type stringDefault —

BCP 47 locale override

label

Type stringDefault —

Blotter title

MobileStacks / Scroll

Wide blotter table activates horizontal scroll. Pin trade ID and status columns on mobile.

Design Rationale

This component was designed to express:

Depth-of-market order book with bid/ask columns and cumulative volume bars

Order entry ticket displaying instrument, side, type, quantity, and price parameters

Transaction cost analysis report with benchmark comparison and slippage metrics

Was this helpful?