ComparisonTable

An "us versus them" feature table with a sticky header, a highlighted column for your product, grouped rows, a differences-only switch and a stacked two-column view on narrow screens.

When to use

• A pricing or "why us" page comparing your product with alternatives or categories of tools.
• When values mix yes/no, partial support with a note, and plain text limits or prices.
• Not for comparing your own plans with a billing switch: use PlanComparison.
• Not for general data tables with sorting and selection; use a data table.

Usage

import { ComparisonTable } from "@/components/iris/blocks/comparison-table/comparison-table";

h(ComparisonTable, {
  title: "How notdocs compares",
  columns: [
    { id: "notdocs", name: "notdocs", caption: "€12/month on Solo", highlight: true },
    { id: "wiki", name: "Wiki app", caption: "Pages in its database" },
  ],
  sections: [
    {
      id: "documents",
      title: "Documents",
      rows: [
        { id: "files", feature: "Markdown files in your repo", values: { notdocs: true, wiki: false } },
        {
          id: "views",
          feature: "Board, table and calendar views",
          hint: "Query blocks inside any page",
          values: { notdocs: true, wiki: { value: "partial", note: "Tables only" } },
        },
      ],
    },
  ],
  cta: { label: "Start for free", href: "/sign-up" },
});

Props

Prop	Type	Default	Description
title / description	string	sample copy about CapyDB	Heading and supporting text.
columns	ComparisonColumn[]	4 sample columns	{ id, name, caption?, highlight? }. The highlight column is your product: tinted band, CTA, always visible on phones.
sections	ComparisonSection[]	4 sample sections	{ id, title, rows: { id, feature, hint?, values: Record<columnId, ComparisonValue> }[] }.
differencesOnly / defaultDifferencesOnly / onDifferencesOnlyChange	boolean	false	Hide rows where every visible column has the same value.
compareWith / onCompareWithChange	string	first other column	Competitor shown beside yours in the stacked phone layout.
cta	{ label, href?, onClick?, doneLabel? }	none	Call to action at the foot of your column.
stickyTop	number	0	Offset for the sticky header, such as a fixed site header's height.
maxHeight	number | string	none	Caps the height and scrolls inside the block, with the header sticking to its top.
stackBelow	number	640	Container width below which the table stacks into a two-column comparison.
className	string	none	Extra class.

A ComparisonValue is true (included), false (not included), "partial", a string printed as text, or { value, note } to add a small note under the mark.

Notes

• Pass your own columns and sections; the defaults compare CapyDB with generic kinds of Postgres hosting, not real products.
• Marks have text equivalents for screen readers and a legend explains them.
• Rows hidden by the differences switch collapse their height; reduced motion removes the animation.