Market Table
A market list with price, change, volume and cap. Rank is the caller’s, never the row index — a re-sorted table that renumbers from one destroys the identifier people use to talk about a market.
src/components/ui/market-table.tsxAbout
From the component's own source, where it was written.
A market list: price, change, volume, market cap.
Rank is the caller's, not the row index. A filtered or re-sorted table whose "#" column renumbers from one destroys the only stable identifier people use to talk about a market — "the number four coin" has to keep meaning the same asset when you sort by 24h change.
Watchlist state is reported, never held: a starred asset belongs to an account, not to a table that forgets on unmount.
Install
npx astralyx-ui add market-table
Usage
import { MarketTable } from '@/components/ui/market-table'
<MarketTable markets={markets} onStar={star} onSelect={open} />Composer
Change the props and the source below follows.
| # | Market | |||
|---|---|---|---|---|
| 1 | BTCBitcoin | US$67,240.12 | +2.41% | |
| 2 | ETHEthereum | US$3,284.50 | -1.12% | |
| 3 | SOLSolana | US$178.32 | +5.87% | |
| 4 | USDCUSD Coin | US$1.00 | +0.01% | |
| 5 | PEPEPepe | US$0.0000 | -8.44% |
<MarketTable markets={markets} onStar={star} onSelect={open} />Examples
Markets
<MarketTable markets={markets} onStar={star} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
MarketTable
Extends Omit<ComponentProps<'div'>, 'onSelect'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| markets | Market[] | required | { id, rank?, symbol, name, price, change24h?, volume24h?, marketCap?, history?, starred? }. |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| searchable | boolean | true | — |
| onStar | (id: string, starred: boolean) => void | — | Watchlist state is reported, never held — a starred asset belongs to an account, not a table that forgets on unmount. |
| onSelect | (id: string) => void | — | — |
| searchPlaceholder | string | 'Search markets' | — |
| searchLabel | string | 'Search markets' | Accessible name for the search field. |
| rankHeader | ReactNode | '#' | — |
| marketHeader | ReactNode | 'Market' | — |
| priceHeader | string | 'Price' | — |
| changeHeader | string | '24h' | — |
| volumeHeader | string | 'Volume' | — |
| capHeader | string | 'Cap' | — |
| starLabel | (symbol: string, starred: boolean) => string | DEFAULT_STAR_LABEL | Accessible name for the star toggle. |
| emptyMessage | ReactNode | 'No markets match.' | — |
Types
Market
A market list: price, change, volume, market cap.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| rank? | number | — |
| symbol | string | — |
| name | ReactNode | — |
| icon? | ReactNode | — |
| price | number | Sub-dollar assets get four digits; large caps use compact notation. |
| change24h? | number | Percentage. |
| volume24h? | number | — |
| marketCap? | number | — |
| history? | number[] | — |
| starred? | boolean | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| columns | responsive | Volume drops below sm, cap below md, the sparkline below lg. The table also scrolls rather than crushing. |