Svelte 5 component · machines-ui · Graphs
GraphTable
A framed data table with a rule under the header and an optional footer row for totals.
Install
GraphTable is a Svelte 5 ASCII table chart component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphTable } from '@fractaldesign/machines-ui';Usage
<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']}
/>Props
| Name | Type | Default |
|---|---|---|
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 | '' |
Related components
GraphTimeline A vertical timeline of dated events, each marked as done, now or next and linked by a rail.GraphTimer A live timer that counts time elapsed since an instant, time since it happened, or shows the local clock.GraphTree An indented tree with `├─` and `└─` branch characters: each node carries a label, an optional meta tag, and…GraphUptime A calendar-like grid of daily uptime statuses with date bounds and an overall uptime percentage.GraphWaffle Share grid of ~100 cells; filled cells carry the accent.GraphWaterfall A running-total chart that shows how sequential increases and decreases contribute to a final value.