Positions table

A React component in Beamline's Trading category.

Open positions with live unrealised PnL, liquidation warnings and close actions.

Use it for

Under the chart in a terminal; portfolio pages.

Not for

Order history → data-grid.

Anatomy

header row (same height as body rows)
row (symbol with Long/Short word badge and leverage, size, entry, mark, liquidation with 'near' word, PnL with ▲/▼ and %, Close)
pinned symbol column (clear at rest, opaque with a seam once scrolled)
footer (count · total PnL with ▲/▼)
empty text

Variants

density: compact, default

States

live PnL
near liquidation (orange + word)
row hover
scrolled (pinned column opaque with a seam)
empty

Keyboard

Symbol and Close are buttons in reading order.

Motion

Closing a position closes the gap: the rows below slide up (--pui-duration-standard). PnL updates in place; row hover arrives at once. Removing a row moves focus to the next row's Close.

Props

Prop	Type	Default	Description
`positions` (required)	`Position[]`	—
`onClose`	`(p) => void`	—
`onSelect`	`(symbol) => void`	—
`priceDecimals`	`(symbol) => number`	—
`density`	`'compact'\|'default'\|'comfortable'`	—	Row height 32 / 40 / 48 px (the table family's). Omitted: follows the nearest scope's density; an explicit value wins.
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`PositionsTableClassNames`	—

Dependencies

lucide-react

Import

import { PositionsTable } from "@/components/positions-table/positions-table";

Get it

Positions table is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent