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,235.170.218304:53:46 AM
71,263.160.025104:53:34 AM
71,232.240.050704:53:22 AM
71,252.600.393704:53:10 AM
71,239.770.501804:52:58 AM
71,240.790.202404:52:46 AM
71,241.830.140604:52:34 AM
71,263.260.211704:52:22 AM
71,235.340.245904:52:10 AM
71,242.220.484604:51:58 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.