Design SystemPatternsMarketOrderBook

OrderBook

Reference照 app.opinion.trade 線上產品重建的對照版,用來量測與討論。不是 production 的程式碼。

Production:src/app/[locale]/market/components/TopicChart/Orderbook.tsx

Installation

import { OrderBook } from "@/components/product/order-book/order-book";

Overview

Sell-side (asks) and buy-side (bids) liquidity rows, each ordered high to low by price, with a spread value shown between them. Clicking a row picks that price and pipes it into the Trade flow. Price and total currency display formats are configurable (e.g. "¢" price suffix, "USDT" total currency).

Interactive Demo

PriceSizeTotal (USDT)
Spread58.90¢

Last picked price: (none)

Identity vs Table

What OrderBook is NOT

  • NOT a Table variant — price is the ordering axis, not a sortable column.
  • NOT paginated — the book is a continuous liquidity distribution, not paged records.
  • NO row selection (checkboxes / multi-select).
  • NO filter / search bars.
  • NO sticky column headers across pages.

What Table is still for

Activity Table (Position / Open Orders / Closed Orders / Transactions / Resolution) remains a Table usage. It MUST NOT be merged into OrderBook.