Comparison Table

The ComparisonTable allows you to compare features across different plans or products.

Usage

const plans = [
    { name: 'Basic', description: 'For starters', key: 'basic' },
    { name: 'Pro', description: 'Best value', popular: true , key: 'pro' },
    { name: 'Enterprise', description: 'For big teams', key: 'enterprise' }
];

const features = [
    { category: 'Core Features', items: [
        { name: 'Users', basic: '1', pro: '5', enterprise: 'Unlimited' },
        { name: 'Storage', basic: '1GB', pro: '10GB', enterprise: '1TB' }
    ]},
    { category: 'Support', items: [
        { name: 'Response Time', basic: '48h', pro: '24h', enterprise: '1h' },
        { name: 'Phone Support', basic: false, pro: true, enterprise: true }
    ]}
];

{/* ComparisonTable demo (component not bundled) */}

Example

Props

ComparisonTable

Data Structures

interface Plan {
  name: string;
  description: string;
  popular?: boolean;
}

interface FeatureCategory {
  category: string;
  items: FeatureItem[];
}

interface FeatureItem {
  name: string;
  // Key must match plan name (lowercase)
  // Value can be string, number, or boolean
  [planName: string]: string | number | boolean;
}