Skip to main content

EventComparisonTable

Implemented

Event comparison table — side-by-side comparison of multiple events showing title, date, venue, from-price, star rating and a sold-capacity meter, plus an sr-only remove column for shortlist curation. Used for festival multi-event booking. Wave-3 L8c domain wrapper: composes the canonical DataTable organism with a locale-aware EventComparisonRow column config. Exported from the barrel since the ADR-035 barrel-orphans Wave 1 promotion (commit 9d4e6ec4) along with EventComparisonTableProps and EventComparisonRow. Dormant (0 app consumers — ADR-035 disposition pending) but part of the public API.

Categoryorganisms
Sourcecomponents/organisms/eventcomparisontable/EventComparisonTable.tsx
AI HintComposes the canonical DataTable organism — reach for DataTable directly when you need sorting/selection/row-navigation. Use this wrapper for the storefront event-shortlist pattern: it owns only the FR/EN column config, the ★ rating cell (aria-hidden glyphs + role='img' accessible name) and the capacity meter (teal < 70, amber ≥ 70, red ≥ 90 with an adjacent % text so the value is never color-only). Remove button meets --ep-tap-min (44px). Note: the remove control is visual-only in the current API (no onRemove callback — ADR-035 disposition pending).

Tableau comparatif d'événements avec note en étoiles, prix et barre de capacité. FR-CA : « Comparer les événements · Note · Places vendues ».

EventComparisonTable

Organism — Commerce family (Family 7)

Compare des événements côte à côte : titre, date, lieu, prix « à partir de », note en étoiles (0–5, rendue arrondie) et barre de capacité — teal < 70 %, ambre 70–89 %, rouge ≥ 90 %. Légende visible ; la colonne « Retirer » est visuelle seulement (aucun callback dans l'API).

Comparer les événements
ÉvénementDateLieuÀ partir deNotePlaces venduesRetirer
Festival Jazz MTL — Quartet24 juin 2026Place des Festivals48,00 $
92%
OSM — Symphonie n° 518 avril 2026Maison symphonique88,00 $
68%
Lion d'Or — Gala Jazz2 mai 2026Lion d'Or54,00 $
31%

This component supports light and dark mode.

EventComparisonTable (EN)

Organism — Commerce family (Family 7)

English locale variant — caption, headers, and remove-button labels switch to English.

Compare events
EventDateVenueFromRatingSoldRemove
Festival Jazz MTL — QuartetJune 24, 2026Place des Festivals$48.00
92%
OSM — Symphony No. 5April 18, 2026Maison symphonique$88.00
68%
Lion d'Or — Gala JazzMay 2, 2026Lion d'Or$54.00
31%

This component supports light and dark mode.

Props

Prop
Type
Default
Description
events*
EventComparisonRow[]
—

Lignes à comparer (id, title, date, venue, fromPrice, rating 0-5, capacityPct 0-100). Aucune limite de nombre d’événements.

locale
'fr' | 'en'
fr

Légende, en-têtes et libellés du bouton Retirer ; le contenu des lignes est localisé par l’appelant.

className
string
—

Classes CSS additionnelles sur la racine DataTable.

Props

Preview

EventComparisonTable

Prop
Type
Required
Default
Description
events
EventComparisonRow[]
Required
—

Rows to compare — { id, title, date, venue, fromPrice, rating (0-5, rounded to whole stars), capacityPct (0-100) }. No enforced minimum count; a single row renders a one-row table.

className
string
Optional
—

Additional CSS classes appended to DataTable's scroll wrapper.

locale
"fr" | "en"
Optional
'fr'

Bilingual literal labels (caption, column headers, remove aria-labels, star-rating accessible name). FR default — EN consumers pass 'en'. Unlike the Admin* wrappers this domain table is FR-default.

Quick use:<EventComparisonTable />

Accessibility

ARIA roletable

ARIA

1 rule

WCAG 4.1.2

Table is named by its visible localized caption (captionVisible) which also serves as the scroll-region/table accessible name; star cluster carries role='img' + localized aria-label ('N étoiles sur 5' / 'N of 5 stars'); remove buttons get row-specific localized aria-labels (WCAG 4.1.2)

tap-target

1 rule

WCAG 2.5.5 / 2.5.8

Remove button meets WCAG 2.5.5/2.5.8 minimum tap target via --ep-tap-min on both axes (44px)

Usage

Import

tsxSnippet
import { EventComparisonTable } from "@epasslive/design-system"

Example 1

tsxSnippet
<EventComparisonTable events={shortlist} />

Example 2

tsxSnippet
<EventComparisonTable events={shortlist} locale="en" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not color-code capacity without the adjacent % text — the bar is a redundant cue, the number carries the value

Design System v4.1.0 | ePassLive