#219
Table row sparklines
A table of four products with an inline sparkline per row and a text trend label.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Table row sparklines" pattern (@codeatlasdev/ui demo #219, charts/sparklines) in my app.
Call get_demo({ ids: ["#219"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Adding a mini trend line to table rows, such as revenue history per product.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- Sparkline from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<Card flush full>` wraps a plain `<table>`
- `rows` has 4 products: Atlas Pro, Nova Suite, Relay SDK, Mesh API, each with 6 `revenue` values and a `trend`
- `<Sparkline data={row.revenue} trend={row.trend} height="32px" />` in each row
- `labels` maps `up`, `down` and `neutral` to `'▲ Growing'`, `'▼ Declining'` and `'→ Stable'`
- Columns: Product, Last 6 months, Trend
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - Sparkline
@codeatlasdev/ui/charts
How it is built
- `<Card flush full>` wraps a plain `<table>`
- `rows` has 4 products: Atlas Pro, Nova Suite, Relay SDK, Mesh API, each with 6 `revenue` values and a `trend`
- `<Sparkline data={row.revenue} trend={row.trend} height="32px" />` in each row
- `labels` maps `up`, `down` and `neutral` to `'▲ Growing'`, `'▼ Declining'` and `'→ Stable'`
- Columns: Product, Last 6 months, Trend
Related
Loading source.