EventComparisonTable

organisms

Event comparison table — side-by-side comparison of multiple events showing date, venue, price range, and availability. Used for festival multi-event booking. Preserves legacy comparison feature.

ARIA Role: table

Demo

Name	Status	Amount
Invoice #001	Paid	$1,200.00
Invoice #002	Pending	$850.00

Props

Prop	Type	Required	Default
`events`	`ComparableEvent[]`	Yes	`—`
`onAddToCart`	`(eventId: string, tierId: string) => void`	Yes	`—`
`maxEvents`	`number`	No	`5`

TypeScript Interface

interface EventComparisonTableProps {
  events: ComparableEvent[];
  onAddToCart: (eventId: string, tierId: string) => void;
  maxEvents?: number;
}

Assertions (NASA Rule 5)

[type]events must have at least 2 items for comparison(NASA Rule 5)
[aria]Table must have aria-label describing comparison(WCAG 4.1.2)

Usage

Import

import { Eventcomparisontable } from '@epasslive/design-system'

Basic

<Eventcomparisontable />

With Variants

<Eventcomparisontable variant="primary" size="md" />