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,250.070.102803:02:21 AM
71,243.750.357003:02:09 AM
71,256.780.303303:01:57 AM
71,262.440.420703:01:45 AM
71,242.420.423603:01:33 AM
71,263.570.322803:01:21 AM
71,258.460.108603:01:09 AM
71,234.190.427503:00:57 AM
71,246.900.013703:00:45 AM
71,247.520.035403:00:33 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.