# StatementTable

> The shared shell: hierarchy, periods, rules.

Source: https://lopifi.com/components/statement-table
Part of: Lopifi — US GAAP books on autopilot, reviewed by a CPA (https://lopifi.com)

---

- **Family:** Statements — **The largest gap in the market.** Nothing else has these.
- **Status:** Implemented
- **Spec:** https://lopifi.com/docs/catalog/06-statements

## Install

```bash
npx shadcn@latest add @lopifi/theme
npx shadcn@latest add @lopifi/statement-table
```

## Specification

> The shared shell. P&L, balance sheet, and cash flow are all configurations of this.

### Structure
```
┌─ Toolbar: basis · period · comparison · currency · consolidation ─┐
├───────────────────────────────────────────────────────────────────┤
│ Account                 Sep 2026    Aug 2026    Change      %     │  ← sticky header
├───────────────────────────────────────────────────────────────────┤
│ Revenue                                                            │  section
│   Product revenue        482,100     441,200    +40,900   +9.3%   │  L2
│     Subscriptions        390,400     360,100    +30,300   +8.4%   │  L3
│     One-time              91,700      81,100    +10,600  +13.1%   │  L3
│   Services               118,400     102,800    +15,600  +15.2%   │  L2
│                         ─────────   ─────────  ─────────          │  ← single rule
│ Total revenue            600,500     544,000    +56,500  +10.4%   │  subtotal
│                                                                    │
│ …                                                                  │
│                         ═════════   ═════════  ═════════          │  ← double rule
│ Net income               142,880     118,400    +24,480  +20.7%   │  total
└───────────────────────────────────────────────────────────────────┘
```

### The craft

- **Indentation: 24px per level** (16px on phone). Levels 1–5. Deeper than 5 is a chart-of-accounts problem, not a UI problem.
- **Rule lines span the numeric columns only**, each period column independently, gutters unruled. This is the detail that makes it read as an accounting statement rather than a styled table.
- **Sticky account column** (left) and sticky header (top). Both, always. A P&L you scroll horizontally without the account names is unreadable.
- **Sticky total row** at the bottom for the grand total.
- **Expand/collapse is instant** — hundreds of times per close. The chevron rotates 140ms; the rows do not slide, grow, or stagger. This is the [Tier 0 concession](../motion/03-catalog.md).
- **Expansion state is in the URL**, so a shared link opens to the same view.
- **Zero values render as `—`.** Null renders as `n/a`. They are different facts.
- **Right-aligned, `tnum`, `case`, paren column reserved.** Negatives in parentheses, always — this is a statement.
- **Every column header states its period explicitly.** "Sep 2026", never "Current".
- **The statement header carries the full context**: entity, statement type, resolved period, basis (cash/accrual), presentation currency, and generation timestamp. Required for print, and required for the number to mean anything.

### Responsive
One period column at a time on phone, with a swipeable period selector and a fixed account column. Values crossfade at 140ms with no translation — translation would imply the labels moved too. Full spec in [responsive](../craft/04-responsive-and-input.md).

### Accessibility
Real table semantics, `<th scope="row">` on account names, `<caption>` with the resolved period, `data-level` for hierarchy (not `aria-level`, which is invalid outside a treegrid), `aria-expanded`/`aria-controls` on toggles, and subtotal/total status **in the row header text** — the rule line is invisible to a screen reader. Full spec in [accessibility](../craft/02-accessibility.md#financial-statement-semantics).

### Print
Repeating headers, `break-inside: avoid` on rows, `break-before: avoid` on totals so a total never orphans from its rule.

## Rules this component obeys

Money is minor units, never floats. `null` is not `0` and neither is redacted. Negatives render in accounting parentheses with the parenthesis column reserved on both sides. Debit and credit are two columns. Per-currency decimal places. Polarity is explicit — up is not always good. Every figure states its period, entity, currency, basis and as-of.