Components/Order Book

Order Book

Bids and asks book with depth visualization, spread indicator, recent-trades panel, and two layouts (stacked or split). Auto-sorts entries on each render, so you can pipe in unsorted snapshots from a WebSocket feed.

BTC/USD

Order book

Price (USD)Size (BTC)

Spread28.50 (0.04%)

Installation

npx ajaxui add order-book

Split layout

Side-by-side bids and asks (Binance-style). Drops the spread row.

ETH/USD

Order book

Price (USD)Size (ETH)

With recent trades

Append a recentTrades array to attach a scrollable trades panel below the book.

BTC/USD

Order book

Price (USD)Size (BTC)

Spread28.50 (0.04%)

Recent trades

71,232.910.436502:30:13 AM
71,230.060.142202:30:01 AM
71,246.030.395802:29:49 AM
71,240.950.474402:29:37 AM
71,241.220.397102:29:25 AM
71,261.220.294002:29:13 AM
71,246.730.416502:29:01 AM
71,260.820.048502:28:49 AM
71,259.790.374002:28:37 AM
71,261.060.177702:28:25 AM

Clickable rows

Pass onPriceClick to make rows act as quick-fill triggers for an order form. Receives the price and the side.

BTC/USD

Order book

Price (USD)Size (BTC)

Spread28.50 (0.04%)

Entry shapes

interface OrderBookEntry {
  price: number
  size:  number
}

interface RecentTrade {
  price: number
  size:  number
  side:  "buy" | "sell"
  time:  Date
}

Props

Prop	Type	Default	Description
bids	OrderBookEntry[]	-	Buy orders. Auto-sorted high→low.
asks	OrderBookEntry[]	-	Sell orders. Auto-sorted low→high.
baseAsset	string	"BTC"	Header label for size column.
quoteAsset	string	"USD"	Header label for price column.
pricePrecision	number	2	Decimal places for price.
sizePrecision	number	4	Decimal places for size.
depth	number	12	Rows per side.
variant	"stacked" \| "split"	"stacked"	Layout - asks-on-top or side-by-side.
locale	string	"en-US"	Locale for number + time formatting.
showSpread	boolean	true	Show spread row (stacked variant).
recentTrades	RecentTrade[]	-	Attaches a recent-trades panel.
onPriceClick	(price, side) => void	-	Makes price cells clickable.