Comparison Table

A compact, framed table for comparing entities side by side - peers, scenarios, holdings. Columns are declared as data, numeric columns right-align and render mono, and each cell renders through a typed render function so you can drop badges or two-line cells in.

Examples

A peer comparison in chatLoading state

Compare Northwind against its closest peers.

Northwind leads the peer set on both revenue and margin:

Company	Revenue	Gross margin	Rating
NorthwindNWD	$4.51B	61.2%	Buy
GlobexGBX	$3.98B	58.4%	Hold
InitechINI	$2.74B	49.1%	Hold

Props

Prop	Type	Description
`columns`	`ComparisonColumn<T>[]`	Column definitions (see below).
`rows`	`T[]`	The row data.
`getRowKey`	`(row: T, index: number) => string`	Stable React key per row.

ComparisonColumn

Field	Type	Description
`key`	`string`	Stable column identifier / React key.
`header`	`ReactNode`	Column header content.
`align`	`"left" \| "right"`	Right-align renders the cell mono + tabular.
`render`	`(row: T) => ReactNode`	Cell content for a row.

tsx

const columns: ComparisonColumn<Peer>[] = [
  { key: "name", header: "Company", render: (p) => p.name },
  { key: "revenue", header: "Revenue", align: "right", render: (p) => p.revenue },
];

<ComparisonTable columns={columns} rows={peers} getRowKey={(p) => p.ticker} />;

Agent context

Use ComparisonTable to compare entities across columns. Mark numeric columns align: "right" so they render mono and tabular. Prefer this over a hand-rolled <table>.

PreviousMetric Row

NextChart Card