machines-ui
graphs

Table

A framed data table with a rule under the header and an optional footer row for totals.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphTable } from '@fractaldesign/machines-ui';

Preview

[ WHAT THE RESEARCH COST ]
AgentTokensTool callsTime
Inks and paper115,20712016m
Overprint and drift135,21816416m
Naming the patterns186,71611218m
Total437,141396~50m
<GraphTable
  title="WHAT THE RESEARCH COST"
  headers={['Agent', 'Tokens', 'Tool calls', 'Time']}
  align={['left', 'right', 'right', 'right']}
  rows={[
    ['Inks and paper', '115,207', '120', '16m'],
    ['Overprint and drift', '135,218', '164', '16m'],
    ['Naming the patterns', '186,716', '112', '18m']
  ]}
  footer={['Total', '437,141', '396', '~50m']}
/>
[ TASTE, EXPLAINED ]
DecisionReason
ease-out on enterfeels snappier
180ms, not 400msfeels faster, more responsive
springs for gesturesthey carry your momentum
scale 0.97 on pressit makes the UI feel alive
no animation at allyou open it hundreds of times
import { GraphTable } from '@fractaldesign/machines-ui';

<GraphTable
  title="TASTE, EXPLAINED"
  headers={['Decision', 'Reason']}
  rows={[
    ['ease-out on enter', 'feels snappier'],
    ['180ms, not 400ms', 'feels faster, more responsive'],
    ['springs for gestures', 'they carry your momentum'],
    ['scale 0.97 on press', 'it makes the UI feel alive'],
    ['no animation at all', 'you open it hundreds of times']
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
headers* string[] —Column headers, left to right.
rows* Cell[][] —Body rows; each cell is a string, number, or snippet.
footer Cell[] —Optional totals row, one cell per column.
align ('left' | 'right')[] —Per-column alignment; defaults to left for the first column and right for the rest.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
CelltypeFramed data table with an optional footer row for totals.
Snippet | string | number

Related

Built from

src/lib/components/graphs/GraphTable.svelte

machines-ui