Components / Data

Table

Console table parts: Table scrolls horizontally, Th and Td handle alignment and mono figures, Tr adds the hover. Addr and Delta format addresses and changes.

Extracted fromExplorer

Import

tsx
import { Table, Th, Td, Tr, Addr, Delta } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Table, Th, Td, Tr, Addr, Delta } from "@somnia-chain/ui/next"

Examples

Markets table

Spot

Markets

PairPrice24hMakerStatus
SOMI/USDso0.8421▲ 4.12%0x4f3a…7d5etrading
BTC/USDso84,272.30▼ 0.84%0x9b1c…8b9ctrading
ETH/USDso2,696.07▲ 1.37%0x1a2b…9a0bpending
examples/table/default.tsxShow code
tsx
import { Addr, Delta, Panel, PanelHeader, StatusBadge, Table, Td, Th, Tr } from "@somnia-chain/ui"

const ROWS = [
  { pair: "SOMI/USDso", price: "0.8421", change: 4.12, maker: "0x4f3a9c1e7b2d8a6f0e5c3b1a9d7e5f3c1b9a7d5e", status: "trading" },
  { pair: "BTC/USDso", price: "84,272.30", change: -0.84, maker: "0x9b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c", status: "trading" },
  { pair: "ETH/USDso", price: "2,696.07", change: 1.37, maker: "0x1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b", status: "pending" },
]

export default function TableExample() {
  return (
    <Panel>
      <PanelHeader eyebrow="Spot" title="Markets" />
      <Table aria-label="Spot markets">
        <thead>
          <tr>
            <Th>Pair</Th>
            <Th align="right">Price</Th>
            <Th align="right">24h</Th>
            <Th>Maker</Th>
            <Th>Status</Th>
          </tr>
        </thead>
        <tbody>
          {ROWS.map((r) => (
            <Tr key={r.pair}>
              <Td>{r.pair}</Td>
              <Td align="right" mono>
                {r.price}
              </Td>
              <Td align="right">
                <Delta value={r.change} />
              </Td>
              <Td>
                <Addr value={r.maker} />
              </Td>
              <Td>
                <StatusBadge status={r.status} />
              </Td>
            </Tr>
          ))}
        </tbody>
      </Table>
    </Panel>
  )
}

Props

Table

PropTypeDefaultDescription
aria-labelstring—Names the <table>, e.g. when a page has more than one.
aria-labelledbystring—Names the <table> after an element, e.g. a heading with that id.
...props<div> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <div>. The div is the scroll container around the table.

Th

PropTypeDefaultDescription
align"left" | "right" | "center""left"Text alignment.
...props<th> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <th>. E.g. scope.

Td

PropTypeDefaultDescription
align"left" | "right" | "center""left"Text alignment.
monoboolean—Tabular mono figures.
mutedboolean—Secondary text color.
...props<td> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <td>. E.g. colSpan.

Tr

PropTypeDefaultDescription
...props<tr> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <tr>.

Addr

PropTypeDefaultDescription
valuestring—Address or hash.
head / tailnumber4 / 4Characters kept at each end.