Composites & Sections · 14 Props

ComparisonTable

Feature comparison table with plan columns and feature rows. Supports sticky headers, expandable sections, and dynamic cell types.

Composites & Sections 14 Props

src/components/blocks/ComparisonTable.astro

← Alle Components

Props

Prop	Type	Default
class	string	""
collapseAfterRows	number	10
collapsePx	number	400
eyebrow	string	—
fadeToClass	string	—
highlightPlanKey	string	business
id	string	—
plans	object[]	[]
plans[].ctaHref	string	—
plans[].ctaLabel	string	—
plans[].key *	string	—
plans[].label *	string	—
plans[].price	string	—
plans[].subtitle	string	—
rows	object[]	[]
rows[].category	string	—
rows[].cells	any	—
rows[].sub	string	—
rows[].title *	string	—
rows[].tooltip	string	—
stickyTop	string	0px
subtitle	string	—
surfaceClass	string	—
title	string	—
tone	string	—

Beispiele

Default

Plan comparison with boolean and text cells.

Launch CHF 3’900	Business CHF 9’900	Custom On request
4	7	Unlimited
—	—	—
—	—	—
—	—	—

{
  "type": "comparisonTable",
  "props": {
    "plans": [
      {
        "key": "launch",
        "label": "Launch",
        "price": "CHF 3’900"
      },
      {
        "key": "business",
        "label": "Business",
        "price": "CHF 9’900"
      },
      {
        "key": "custom",
        "label": "Custom",
        "price": "On request"
      }
    ],
    "rows": [
      {
        "label": "Pages",
        "cells": {
          "launch": "4",
          "business": "7",
          "custom": "Unlimited"
        }
      },
      {
        "label": "CMS",
        "cells": {
          "launch": false,
          "business": true,
          "custom": true
        }
      },
      {
        "label": "Multilingual",
        "cells": {
          "launch": false,
          "business": true,
          "custom": true
        }
      },
      {
        "label": "Custom Design",
        "cells": {
          "launch": false,
          "business": false,
          "custom": true
        }
      }
    ]
  }
}

<ComparisonTable plans={[{"key":"launch","label":"Launch","price":"CHF 3’900"},{"key":"business","label":"Business","price":"CHF 9’900"},{"key":"custom","label":"Custom","price":"On request"}]} rows={[{"label":"Pages","cells":{"launch":"4","business":"7","custom":"Unlimited"}},{"label":"CMS","cells":{"launch":false,"business":true,"custom":true}},{"label":"Multilingual","cells":{"launch":false,"business":true,"custom":true}},{"label":"Custom Design","cells":{"launch":false,"business":false,"custom":true}}]} />