six primitives · one tabular grammar · zero ad-hoc tables
the cockpit can finally ship a real orders table. the league can paginate operators. the journal can tree-view nested decisions. the studio can mark settlement Thursdays. every empty surface gets a calm zero-state. every loading surface gets a breath-driven skeleton. the seven-state cell grammar from the form pack carries through tables so the covenant detector reads one set of selectors.
data-table · live
36 rows of paper trades · sort by any column · filter by side · free-text search by asset or receipt hash · dial density and page size · simulate a fetch to see the breath-driven loading state · the seven-state cell grammar carries through every row.
| receipt | |||||
|---|---|---|---|---|---|
| 18:43:28 | btc-perp | long | 15.59 | -190.30 | #6172cf |
| 18:00:03 | tia-perp | long | 3.53 | -197.80 | #16173c |
| 17:43:10 | tia-perp | short | 15.90 | -190.10 | #636823 |
| 17:28:16 | btc-perp | long | 3.22 | -198.00 | #14218c |
| 17:01:07 | arb-perp | long | 7.06 | -195.60 | #2c2e79 |
| 17:00:22 | eth-perp | short | 6.75 | -195.80 | #2a38e8 |
| 16:14:12 | eth-perp | short | 10.60 | -193.40 | #4245c2 |
| 16:10:26 | tia-perp | long | 19.12 | -188.10 | #7789ae |
| 15:26:09 | arb-perp | long | 19.43 | -187.90 | #797f12 |
| 15:03:15 | btc-perp | short | 14.13 | -191.20 | #585cf3 |
| 14:42:28 | btc-perp | long | 13.82 | -191.40 | #56674e |
| 14:01:18 | btc-perp | long | 10.28 | -193.60 | #404fad |
- rows visible
- 12 (page 1 / 3)
- matched
- 36 of 36
- sort
- ts · desc
- side filter
- all
- long · short · refused
- 12 · 7 · 5
- density
- cozy
- state
- idle
02 data-table · cozy density
tabular numerals throughout · sortable columns · refused row renders the strikethrough cell variant · receipt hash uses the monospace family.
| time | asset | side | size | p/l | receipt |
|---|---|---|---|---|---|
| 14:22:08 | sol-perp | long | 12.40 | +82.30 | #7af3·9 |
| 14:24:51 | eth-perp | short | 4.10 | -14.10 | #a18b·2 |
| 14:31:02 | sol-perp | refused | 0.00 | [refused] | #3c2a·1 |
| 14:39:17 | btc-perp | long | 0.21 | +41.40 | #9f44·6 |
| 14:42:30 | jup-perp | short | 320.00 | +8.10 | #1d77·4 |
| 14:48:09 | eth-perp | long | 6.00 | +19.80 | #bb02·8 |
03 compact
| time | asset | side | size |
|---|---|---|---|
| 14:22:08 | sol-perp | long | 12.40 |
| 14:24:51 | eth-perp | short | 4.10 |
| 14:31:02 | sol-perp | refused | 0.00 |
| 14:39:17 | btc-perp | long | 0.21 |
04 comfortable
| time | asset | side | size |
|---|---|---|---|
| 14:22:08 | sol-perp | long | 12.40 |
| 14:24:51 | eth-perp | short | 4.10 |
| 14:31:02 | sol-perp | refused | 0.00 |
05 pagination
server-renderable when hrefFor is given (the buttons render as <a>). active page is amber-tinted, never solid amber — the chrome budget rule from ADR-007.
06 tree · nested decision history
built on native <details>/<summary> so expand and keyboard work without JS. chevron rotates on [open] via CSS only.
decision · sol-perp long 12.40
- oracle · funding skew within 0.7σ
- oracle · spread 0.04bps
- settlement · paper credit +82.30
decision · sol-perp refused
- reason · funding skew exceeded ceiling
07 calendar · settlement thursdays
event dots in five tones; today is amber-tinted; out-of-month days are dimmed.
08 empty-state
09 skeleton · breath-driven
10 data-table · loading
| time | asset | side | size |
|---|---|---|---|
11 data-table · empty
| time | asset | side | size |
|---|---|---|---|
no rows yetthe table will populate once the operator opens a position. | |||
12 the six
| num | primitive | why it ships |
|---|---|---|
61 | DataTable | sortable · density grammar · sticky header · seven cell-states reused from forms |
62 | Pagination | numeric pages + prev/next/first/last · server-renderable via hrefFor · tabular nums |
63 | Tree | collapsible hierarchy on native <details>/<summary> · keyboard for free |
64 | Calendar | standalone month grid · event dots in five tones · today amber-tinted |
65 | EmptyState | calm zero-state · icon + title + body + optional action · no exclamation marks |
66 | Skeleton | breath-driven placeholder · text · block · circle · reduced-motion safe |