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 chat
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
Made in NYC© 2026 Rogo Technologies Inc.