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,248.870.194503:45:34 AM
71,233.480.375603:45:22 AM
71,256.420.492303:45:10 AM
71,258.700.450903:44:58 AM
71,260.520.154103:44:46 AM
71,255.180.213503:44:34 AM
71,251.070.019503:44:22 AM
71,266.820.152603:44:10 AM
71,257.980.187603:43:58 AM
71,268.470.048403:43:46 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.