Table
GraphTable
Framed data table with an optional footer row for totals.
Command
pnpm dlx shadcn@latest add <origin>/r/graph-table.jsonResearch cost
Numeric columns, right-aligned, with a footer total.
| Agent | Tokens | Tool calls | Time |
|---|---|---|---|
| Inks and paper | 115,207 | 120 | 16m |
| Overprint and drift | 135,218 | 164 | 16m |
| Naming the patterns | 186,716 | 112 | 18m |
| Total | 437,141 | 396 | ~50m |
Taste, explained
Two copy columns. No footer.
| Decision | Reason |
|---|---|
| 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
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Caption drawn on the top edge of the frame. |
| headers | string[] | — | Column headings. Sentence case. |
| rows | ReactNode[][] | — | Body cells, one array per row. |
| footer | ReactNode[] | — | Optional totals row under a rule. |
| align | ("left" | "right")[] | left, then right | Per-column alignment. Defaults to left on the first column. |
| className | string | — | Passed to the outer frame. |