TierTable

Implemented

Season-pass comparison table — category, per-event price, events included, effective total, perks list, and a Select CTA column. Composes the DataTable organism + the Button atom with a locale-aware TierRow column config (highlight rows tint via rowClassName — Wave-3 L8c). Bilingual chrome via `locale` (default `"fr"` — season-pass page language); the CTA is decorative (no onClick wiring). Exported from the barrel.

Categoryorganisms

Sourcecomponents/organisms/tiertable/TierTable.tsx

AI HintExported from the barrel (the old 'kept unexported per ADR-035' note was stale). Zero live consumers. Presentation-only comparison table: the per-row Select CTA has NO onClick wiring and there is no action/callback slot — do NOT use it for CRUD tier management (an attempted TicketStagesPanel migration on 2026-09-07 was blocked for exactly this: it would have dropped the delete action and shipped a dead CTA). For lists with row actions use DataTable / AdminSortableTable and put the actions in a column formatter.

Tableau comparatif des laissez-passer de saison (par événement, total effectif, avantages). FR-CA : « Comparaison des laissez-passer de saison · Catégorie · Par événement · Concerts inclus · Coût effectif · Avantages · Choisir ».

TierTable

Organism - Commerce family (Family 7)

Tableau de comparaison des forfaits. La catégorie recommandée est mise en évidence (bg-ep-teal/5). Chaque ligne a un CTA localisé.

Laissez-passer 2026-2027 - Orchestre symphonique de Montréal
Catégorie	Par événement	Concerts inclus	Coût effectif	Avantages
Argent	46,00 $	16	736,00 $	Tous les concerts réguliers Programme de saison
Or	58,00 $	16	928,00 $	Tous les concerts Avant-première Rencontre avec les artistes
Platine	78,00 $	22	1 716,00 $	Concerts + galas Salon prestige Place de stationnement 2 invitations

This component supports light and dark mode.

Props

Prop

Type

Default

Description

tiers*

TierRow[]

—

Lignes de forfaits (id, name, pricePerEvent, totalEvents, effectiveTotal, perks, highlight?).

caption

string

—

Légende visible — défaut selon la locale (fr « Comparaison des laissez-passer de saison », en « Season pass comparison »).

locale

"fr" | "en"

—

En-têtes de colonnes, copie du CTA, défauts caption/emptyMessage et gabarits aria-label (défaut "fr").

className

string

—

Classes additionnelles ajoutées à la racine du DataTable.

id

string

—

id du conteneur de défilement (utile pour aria-controls depuis un filtre parent).

emptyMessage

string

—

Message d’état vide (role="status", aria-live="polite") — défaut selon la locale (fr « Aucun laissez-passer disponible pour le moment. », en « No season passes available. »).

Props

Preview

TierTable

Prop

Type

Required

Default

Description

tiers

TierRow[]

Required

—

Row data (id, name, pricePerEvent, totalEvents, effectiveTotal, perks, highlight?).

caption

string

Optional

locale-aware ('Comparaison des laissez-passer de saison' fr / 'Season pass comparison' en)

Visible caption above the table — default follows locale (cascade 2026-09-13).

locale

"fr" | "en"

Optional

'fr'

Drives column-header labels, CTA copy, and CTA aria-label templates.

className

string

Optional

—

Additional CSS classes appended to the DataTable root.

id

string

Optional

—

id on the scroll wrapper (useful for aria-controls wiring from a parent filter/search). Pass-through to DataTable.

emptyMessage

string

Optional

locale-aware ('Aucun laissez-passer disponible pour le moment.' fr / 'No season passes available.' en)

Body copy rendered in the empty state (role=status, aria-live=polite) — default follows locale (cascade 2026-09-13).

Quick use:<TierTable />

Accessibility

ARIA roletable

Usage

Import

tsxSnippet

import { TierTable } from "@epasslive/design-system"

Example 1

tsxSnippet

<TierTable tiers={seasonPassTiers} locale="fr" caption="Comparaison des laissez-passer de saison" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources