React Product Family Matrix

Copy Page

Engineers pick a part by scanning one column until the number is big enough, then reading across that row. That only works if both headers stay put — so the part column pins left, the header row pins top, and the corner cell pins to both.

Installation

Props

Give consecutive columns the same group string and they merge into a spanning heading — Compute, Crypto, I/O in the demo. Set numeric for right-aligned tabular figures and numeric (rather than lexical) sorting; booleans render as check/dash with screen-reader text, and undefined renders as an em dash meaning not available on this variant.

Two headers, three z-indices

Pinning both axes is where these tables usually break. The part column and the header row each need position: sticky, but the cell where they intersect is sticky on both — and it must paint above both, or the header row slides underneath it. That is why the corner cell sits at z-30, the two header bands at z-20, and the row headers at z-10.

border-separate matters too: with collapsed borders, browsers drop the borders on sticky cells as they scroll, so the header ends up floating with no bottom edge.

For a handful of parts side by side with a differences-only toggle, use Comparison Table instead — this component is for the whole family at once. To let visitors assemble their own subset, use the Spec Selector.