Skip to content
SuperCoach

Components · Data display

Table

Beta

Shows rows of data, such as payments.

Invoices for October 2026
InvoiceClientIssuedStatusAmount
INV-1042Sara Al-Otaibi12 Oct 2026PaidSAR 450
INV-1043Omar Haddad14 Oct 2026Due in 3 daysSAR 1,215
INV-1044Lina Farouk2 Oct 2026Overdue$120
Total in SARSAR 1,665

When to use

  • To show rows of the same kind of data that coaches compare: invoices, check-ins, payouts.
  • When the columns matter: amounts, dates, statuses side by side.

When not to use

  • For sorting, filtering, selection or pagination: use the data table (Phase 4), built on this one.
  • For a few items with rich content: use Cards or a list.
  • For layout. Tables are for data only.

Anatomy

Check-ins this week
ClientWeight
Sara82.5 kg
  1. 1. Header cell: column name
  2. 2. Body cell
  3. 3. Numeric cell: aligned to the end, tabular numbers
  4. 4. Caption: what the table shows

Variants

One style, with optional parts: a caption, a footer for totals, and a horizontal scroll container on small screens (built in).

States

StateWhat changesToken
Row hoverLight fill, to follow a row acrossbg-muted/50
Row selectedMuted fill (data-state="selected")bg-muted

Usage guidelines

  • Align text to the start and numbers to the end, with tabular-nums, so digits line up.
  • Put units in the header or the cell consistently: "Amount" with "SAR 450" in each cell.
  • Use Badges for statuses; never color a whole row.
  • Keep the first column the identifier the coach scans for: client or invoice.
OmarSAR 1,215
SaraSAR 450
Do.Amounts aligned to the end, so their digits line up.
OmarSAR 1,215
SaraSAR 450
Don't.Centered amounts. Comparing them takes longer.

Content guidelines

  • Header labels are short nouns: "Client", "Issued", "Amount".
  • Dates follow the Content rules: "12 Oct 2026".
  • Empty cells show "—", not blank.

Accessibility

  • A native <table> with <th> header cells: screen readers announce the column name with each cell ("Amount, SAR 450").
  • Always add a caption (visible, or sr-only) that says what the table holds.
  • Identifiers like invoice numbers are dir="ltr" inside Arabic tables.

RTL

Columns run right to left and the first column is on the right. Start and end alignment (text-start, text-end) follows; the upstream component used text-left for headers, which is changed to text-start.

Tokens used

Read from components/ui/table.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.

Semantic color tokens used by this component
TokenUtilitiesSuperCoachCoach
--foregroundtext-foregroundneutral-950neutral-950
--mutedbg-muted/50 bg-mutedneutral-100neutral-100
--muted-foregroundtext-muted-foregroundneutral-600neutral-600
--ringring-ringbrand-600orange-500
  • Radiusrounded-sm
  • Typefont-medium
  • Typetext-sm

Props

<Table>

Also takes every prop of <table>

No props of its own.

<TableHeader>

Also takes every prop of <thead>

No props of its own.

<TableBody>

Also takes every prop of <tbody>

No props of its own.

<TableFooter>

Also takes every prop of <tfoot>

No props of its own.

<TableRow>

Also takes every prop of <tr>

No props of its own.

<TableHead>

Also takes every prop of <th>

No props of its own.

<TableCell>

Also takes every prop of <td>

No props of its own.

<TableCaption>

Also takes every prop of <caption>

No props of its own.

Replaces in coach-admin

From the read-only audit of coach-admin: 93 style values, 124 uses.

Classes and selectors

  • th35
  • thead th8
  • .table-actions8
  • td8
  • .table-link4
  • th, td3
  • .table-bordered thead th, .table-bordered thead td, tbody, t2
  • .table-actions img2
  • tbody td2
  • tbody tr:hover td1
  • .ant-table-tbody .sc-invoices__invoice-row--due:hover td1
  • .ant-table-tbody .sc-invoices__invoice-row--due td1

Files

  • src/reusableComponents/cells/matrix-cell.scss21
  • src/reusableComponents/cells/reorder-cell.scss10
  • src/reusableComponents/cells/exercise-cell/exercise-cell.scss8
  • src/reusableComponents/cells/ReactGridWidget.tsx3
  • src/reusableComponents/cells/DisabledTextCell.tsx2

The inventory lists the first 12 locations of each value, so file counts are a lower bound.

SCSS variables in these styles

  • $invoice-section-line→ nearest neutral-200 (no semantic token)
  • $invoice-ink-secondary→ --foreground-secondary
  • $invoice-surface-bg→ nearest neutral-50 (no semantic token)
  • $border-color→ --border
  • $input-border-colornot a color: spacing, size or layout
  • $blacknot a color: spacing, size or layout
  • $invoice-due-row-bg→ --warning-subtle
  • $scpay-neutral-bg→ --muted
  • $table-border-colornot a color: spacing, size or layout

Related

Badge, Card, Content.