React Comparison Table
The "which one do I need" table for product families: one column per item with name, meta line, and an optional badge; one row per specification. Rows that differ between items get a subtle primary wash and dot marker — and the built-in "Differences only" toggle collapses everything identical, which is how engineers actually compare parts. Booleans render as check/dash icons with screen-reader text; the specification column stays sticky on horizontal scroll.
| Specification | AXM-110 Entry · QFN-48 | AXM-330POPULAR Mainstream · FCBGA-256 | AXM-550 Safety · FCBGA-676 |
|---|---|---|---|
| CPU cores | 2× A53 | 4× A53 | 4× A53 + 2× R52 |
| Max frequency | 800MHz | 1200MHz | 1200MHz |
| L2 cache | 512KB | 1024KB | 2048KB |
| Memory interface | LPDDR4-2400 | LPDDR4-3200 | LPDDR4-3200 |
| PCIe Gen3 | No | Yes | Yes |
| CAN-FD | Yes | Yes | Yes |
| ASIL-D safety island | No | No | Yes |
| Junction range | −40…+85°C | −40…+105°C | −40…+125°C |
Toggle Differences only — identical rows (CAN-FD, memory…) drop away.
Installation
npx shadcn@latest add comparison-table.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CompareItem[] | — | { id, name, meta?, badge?, values } (2–4 works best) |
| rows | CompareRow[] | — | { key, label, unit? } specification rows |
| allowDiffFilter | boolean | true | Show the differences-only toggle |
Values may be string, number, boolean (check/dash), or undefined (em-dash).