shadcn.io is not affiliated with official shadcn/ui
Sparkline Scrubber Table Block for React Aria
A KPI table of five metrics, each with a 30-day sparkline in its row, and one range slider under the table that moves a cursor across every line and updates the value and change for the chosen day, with a 14 or 30 day window.
Installation
Overview
Read a whole sheet of metrics on the same day, with this sparkline table for React with React Aria. A compact header holds a Toggle Group that narrows the window to the last 14 or 30 days. Inside a hairline frame with a plus mark on each corner, a band says which day and window you are on, over a native table of Sparkbook's five metrics: monthly recurring revenue, active workspaces, trial conversion, support backlog and first response. Each row draws its last days as a thin line with a dot on the chosen day. A slider in the closing band, one step per day, moves a cursor across every line at once, and the "On 14 Sep" column and the change since the start of the window update with it, with a trend icon, a sign and a word. The lines are drawn with plain SVG and are hidden from assistive technology, because the table already holds every number they show. It is built from Toggle Group and Guides, with a CSS entrance only. For KPI sheets, weekly reviews, status pages and any table where the shape of a trend matters beside its latest figure.
FAQ
How does the scrubber work?
It is a native range input from the first day of the window to the last, one step a day, with aria-valuetext set to the date. Its value is the only state the lines need: each line puts its cursor at that day's place, and the value and change columns read the same day from the same series. Because it is a real input it takes arrow keys, Home, End and Page keys and works by touch, and the date is shown beside it as text.
How do I use my own metrics?
Replace METRICS. Each one has a name, a note, a unit (money, percent, minutes or count) and a series of 30 values, oldest first, which the demo works out from a base, a drift and two waves with seriesOf so the drawing is the same on every load. Pass your own array instead, keep DAYS equal to its length, and set AS_OF to the date of the last value; day labels are counted back from it, never from the clock.
What do 14 d and 30 d change?
They change how many of the last days are drawn and what the change column compares against: the change is measured from the first day of the window to the day you are on. The line is rescaled to the window, so a short window shows its own ups and downs. If the cursor was on a day outside the shorter window it moves to the first day inside it.
What stays local, and how do I wire real data?
The series are constants and the window and day live in two useState calls; nothing is requested. To use live data, load the series for your window on the server or in an effect and pass them in. The drawing, the scrubber and the columns only read series, so they need no other change. For long series, send already-bucketed daily values rather than raw events.
Is a table of sparklines accessible?
Yes. The table is a native table with a caption and scope heads, and the sparklines are aria-hidden decoration with a title for tooling. Every number is text in the table, the change says up, down or no change in words, and the status line reads the chosen day and window. The slider has a visible label and a spoken value, and the table region is focusable for sideways scrolling.
How does it look on a phone?
The Change column goes and its figure moves under the value, so the table keeps Metric, the line and the value. The lines get a little narrower. The slider spans the width of the panel with the first and last days under its ends. The block is the same height in both windows.