shadcn.io is not affiliated with official shadcn/ui
Sparkline Scrubber Table Block for React
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 Base UI. 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.
Related
- Pro
An initiative tracker whose progress bars show tasks done, in review and not started, with a line for last week and a diamond for the plan, a change in points, a Behind plan flag, and sortable Progress and Change heads.
- Pro
Baseline Comparison Table
Totals and comparisonFive camera bodies compared against one you pick: every figure shows its own value and, under it, a signed difference or Same or Different against the baseline, with sticky spec names and grouped rows.
- Pro
Shared-Scale Week Comparison Stats
ComparisonsA week-on-week traffic comparison with two sparklines drawn on one shared scale, so the two weeks can be compared by eye.
- Pro
Sparkline Tile Grid Stats
KPI bands and tilesFour KPI tiles for a subscription-box company, each holding the same twelve weeks as an area sparkline, with one slider that moves a cursor through all four and rewrites their values to the chosen week.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Table Footer With Totals
Totals and comparisonA timesheet table with a real footer row whose totals (hours, average rate, amount, paid and pending) are worked out from the rows shown, so a client filter changes every figure.