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,242.180.331101:10:06 AM
71,234.870.231401:09:54 AM
71,240.180.474501:09:42 AM
71,268.680.054901:09:30 AM
71,245.270.273501:09:18 AM
71,251.790.342701:09:06 AM
71,230.060.284201:08:54 AM
71,269.800.115701:08:42 AM
71,245.950.130501:08:30 AM
71,237.140.396601:08:18 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.