Data

DataTable

Finance-grade table — mono numerics, delta tinting, sorting, summary footer.

Preview

components/data/DataTable.jsx

Sample positions
	Instrument
WGLD	Gold ETC	12.0%	+1.4%
CEG	Constellation Energy	4.7%	-2.1%
WSLV	Silver ETC	6.0%	+0.8%
Total		22.7%

Built for finance-heavy readouts: mono tabular numerics right-aligned, delta tint as state (gain live / loss danger — never a series color), identifiers in mono.

Usage

src/components/ui/DataTable.tsx

tsx

import { DataTable } from "@/components/ui/DataTable";

<DataTable
  caption="Positions"
  rows={positions}
  rowKey={(p) => p.ticker}
  defaultSort={{ key: "weight", dir: "desc" }}
  footer={["Total", null, "100.0%", null]}
  columns={[
    { key: "ticker", header: "Ticker", sortBy: (p) => p.ticker,
      render: (p) => <span className="font-mono text-xs">{p.ticker}</span> },
    { key: "name", header: "Instrument" },
    { key: "weight", header: "Weight", type: "numeric",
      format: (v) => `${v.toFixed(1)}%`, sortBy: (p) => p.weight },
    { key: "change", header: "Δ 1d", type: "delta",
      format: (v) => `${v.toFixed(1)}%`, sortBy: (p) => p.change },
  ]}
/>

API

props

Prop	Type	Default	Description
columns	DataTableColumn[]	—	{ key, header, type?: text\|numeric\|delta, align?, width?, render?, sortBy?, format? }.
rows	Row[]	—	Row objects; cells read row[key] unless a column renders custom.
rowKey	(row) => string	—	Stable key per row.
footer	ReactNode[]	—	Summary cells, one per column, above a top rule.
defaultSort	{ key, dir }	—	Initial sort; headers with sortBy are click-to-sort.
minWidth	number	640	Table min-width before its wrapper scrolls.
dense	boolean	false	Tighter rows for narrow panels.
caption	string	—	Visually hidden caption for assistive tech.

Tokens consumed

semantic only

--color-border--color-fg--color-fg-muted--color-fg-subtle--signal-live--signal-danger--font-mono--text-2xs