Comparison

Side-by-side comparisons for features and specifications

npm run add Comparison

Use the Comparison component to present side-by-side comparisons of features, specifications, or options to help users make informed decisions. You can use them to compare pricing and plans, tiers or service packages.

<Comparison
    headings={['Feature', 'Free', 'Pro']}
    striped="row"
    trueColor="var(--w-color-success)"
    falseColor="var(--w-color-alert)"
    data={[
        ['Image Carousel', true, true],
        ['Customizable CTA', true, true],
        ['Sticky CTA', false, true],
        ['Add Pricing', false, true]
    ]}
/>

The Comparison component is an extended version of the Table component, meaning you can use the component with existing Table component props. The above example uses the following Comparison component-specific props:

• data: The data prop is capable of handling true and false values that renders a check or x icon.
• trueColor: Sets the color of icons rendered by true values.
• falseColor: Sets the oclor of icons rendered by false values.

If no trueColor and falseColor props are present, the icons will take the text color:

Icons

You can customize the default icons using the trueIcon and falseIcon props which must be an SVG string. For example:

---
// Import SVG strings
import { check, close } from 'webcoreui/icons'
---

<Comparison
    headings={['Feature', 'Free', 'Pro']}
    trueIcon={check}
    falseIcon={close}
    trueColor="var(--w-color-success)"
    falseColor="var(--w-color-alert)"
    data={[ ... ]}
/>

Alignment

Alignment of the columns can also be set using the alignment prop. This will set the alignment of icons only and every table heading, except for the first column:

<Comparison
    headings={['Feature', 'Free', 'Pro']}
    alignment="center"
    data={[...]}
/>

<Comparison
    headings={['Feature', 'Free', 'Pro']}
    alignment="right"
    data={[...]}
/>

API

type ComparisonProps = {
    data: (string | boolean)[][]
    trueIcon?: string
    falseIcon?: string
    trueColor?: string
    falseColor?: string
    alignment?: 'center' | 'right'
} & Omit<TableProps, 'data'>