StatTable

organisms

Multi-section stats table with totals, subtotals per product type. Thuwan-mandated format: Total Available → Ticket Counts → Sales → ePassLive Fees → Transfer to Bank Account.

ARIA Role: table

Demo

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

Props

Prop	Type	Required	Default	Description
`sections`	`StatSection[]`	Yes	`—`	Stat sections with rows
`currency`	`string`	No	`'CAD'`	Currency code
`locale`	`'en' \| 'fr'`	No	`'en'`	Display locale
`onExport`	`() => void`	No	`—`	Export handler

TypeScript Interface

interface StatTableProps {
  sections: StatSection[];
  currency?: string;
  locale?: 'en' | 'fr';
  onExport?: () => void;
}

Assertions (NASA Rule 5)

[aria]Use <table> with proper <thead>, <tbody>, <th scope>(WCAG 1.3.1)
[aria]Sortable columns must have aria-sort attribute(WAI-ARIA APG)
[validation]Numeric columns right-align by default(NASA Rule 5)

Usage

Import

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

Basic

<Stattable />

With Variants

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