BookingsTable

organisms

Recent bookings data table — 5 columns (Customer, Event, Amount, Status, Date). 11px uppercase header. Hover row tint to teal-10. Caption is screen-reader-only.

ARIA Role: table

Demo

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

Props

Prop	Type	Required	Default	Description
`bookings`	`BookingRow[]`	Yes	`—`

TypeScript Interface

interface BookingsTableProps {
  bookings: BookingRow[];
  caption?: string;
  emptyState?: EmptyStateConfig;
}

Assertions (NASA Rule 5)

[type]bookings required; row type includes all 5 fields(NASA Rule 5)
[aria]<caption> must be present (screen-reader only, NOT visible); <th scope='col'> on every column header(WCAG 1.3.1)

Usage

Import

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

Basic

<Bookingstable />

With Variants

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