Order history and fills

A React block (a whole screen) in Beamline's Blocks category.

Every order the account placed and every fill it got, for a period: totals for volume, fees, fill rate and maker share; orders with their status and how much filled; each fill with its price, fee and maker or taker; an order opens with its fills and what happened when; and the view exports as CSV.

Use it for

The history page of a trading or brokerage account: what was ordered, what filled at what price, and what it cost in fees.
Reconciling fills and fees for a period and exporting them.

Not for

Orders still resting on a market screen (trading-terminal's open orders).
The tape of a market's public trades (trades-tape).
Holdings and their value (portfolio).

Anatomy

header: title, the period (date range with presets), Orders / Fills, and the primary Export CSV
totals: volume traded, fees paid, fill rate and maker share for the period and filters in view
filters: side and status as chips with counts; the table's own search and market filter
orders: time, market, side (word and glyph), type, status, price, filled of size with a bar, average fill price, fees
fills: time, market, side, price, size, value, fee, maker or taker, and the order it belongs to
order sheet: status and side, filled of size, average price against the limit, fees by fill, the fills, and the order's events in time order

Variants

0: room: totals four across from 48rem, two by two under it; the sheet is full width on a phone

States

loading (totals and table held in their shapes)
nothing in the period (says so and offers a longer period)
nothing matches the filters (clear them)
partly filled, cancelled with part filled, rejected (the reason), expired, open
fee unknown (—, totals say how many are missing)
exporting / exported (row count) / export failed (Retry)

Keyboard

Tab: header controls, filter chips, the table
Table: arrows move between cells, Enter opens the order
Sheet: Esc closes and focus returns to the row

Motion

Totals roll to their new values when the period or a filter changes; the export button morphs through exporting and done; the sheet slides in on --motion-in. Nothing moves at rest.

Props

Prop	Type	Default	Description
`orders` (required)	`HistoryOrder[]`	—	Orders in the period, each with its fills: { id, symbol, side, type, status, price, size, filled, avgPrice, fees, createdAt, fills, reason?, events? }.
`range / defaultRange / onRangeChange`	`{ start: Date; end: Date }`	—	The period; your backend loads it.
`view / defaultView / onViewChange`	`"orders" \| "fills"`	—
`loading`	`boolean`	—
`quote`	`string`	`"USD"`	Currency of prices, value and fees.
`onExport`	`(rows: { view, ids: string[] }) => Promise<number> \| number`	—	Export what is in view; resolve with the row count.
`className / classNames / style / ref`	`string / OrderHistoryClassNames / CSSProperties / Ref<HTMLElement>`	—

Built from

Dependencies

lucide-react, @tanstack/react-virtual

Import

import { OrderHistory } from "@/blocks/order-history/order-history";

Get it

Order history and fills is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent