PricingTable
pricing-tableCompares priced items in transposed feature rows with highlights, badges, and sticky headers.
Usage
Basic usage
columns is the compared item (column), rows is the attribute row; the key of row.values corresponds to column.key.
const columns = [
{ key: "gpt", title: "GPT-5.5" },
{ key: "opus", title: "Claude Opus 4.7" },
{ key: "deepseek", title: "DeepSeek V4" },
];
const rows = [
{ key: "in", label: "Input price / 1M", values: { gpt: "$5.00", opus: "$5.00", deepseek: "$0.55" } },
{ key: "out", label: "Output price / 1M", values: { gpt: "$30.00", opus: "$25.00", deepseek: "$2.20" } },
{ key: "ctx", label: "Context Window", values: { gpt: "256K", opus: "200K", deepseek: "128K" } },
];
<PricingTable columns={columns} rows={rows} />Highlight recommended column
Add highlight stroke to highlight the column, and badge hang the corner mark at the column head.
const columns = [
{ key: "gpt", title: "GPT-5.5" },
{ key: "opus", title: "Claude Opus 4.7", highlight: true, badge: "Recommended" },
{ key: "deepseek", title: "DeepSeek V4" },
];
<PricingTable columns={columns} rows={rows} />When to use
Use PricingTable to compare attributes of plans, products, or models side by side, such as price, context window, and capabilities. Unlike Table, whose rows are records, PricingTable treats each column as the compared subject.
Import
import { PricingTable } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| columns* | PricingColumn[] | — | Compared subject columns. |
| rows* | PricingRow[] | — | Attribute and price rows. |
| stickyHeader | boolean | true | Keeps the header visible while scrolling. |
| className | string | — | Root class name. |
PricingColumn has key*, title*, highlight?, badge?, and header?; a custom header replaces the title region. PricingRow has key*, label*, and values: Record<string, ReactNode>, keyed by column key.
Example
const columns: PricingColumn[] = [
{ key: "gpt", title: "GPT-5.5" },
{ key: "opus", title: "Claude Opus 4.7", highlight: true, badge: "Recommended" },
{ key: "deepseek", title: "DeepSeek V4" },
];
const rows: PricingRow[] = [
{ key: "in", label: "Input / 1M", values: { gpt: "$5.00", opus: "$5.00", deepseek: "$0.55" } },
{ key: "out", label: "Output / 1M", values: { gpt: "$30.00", opus: "$25.00", deepseek: "$2.20" } },
{ key: "ctx", label: "Context window", values: { gpt: "256K", opus: "200K", deepseek: "128K" } },
];
<PricingTable columns={columns} rows={rows} />Usage notes
- Every
row.valueskey must match acolumn.key; missing keys produce empty cells. - Badge space is created only by
highlight: true, sobadgeis meaningful only on highlighted columns.
Related
Table · Book3D · ProTable · JsonViewer · EditableTable · List
Playground
<PricingTable columns={columns} rows={rows} />