shadcn.io is not affiliated with official shadcn/ui
Progress Tracker Table Block for Vue
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.
Installation
Overview
Show how far work has come and whether it is where it should be, with this progress tracker table for Vue with Ark UI. A compact header names the table. Inside a hairline frame with a plus mark on each corner, a band says how the rows are ordered, over a native table of six Milestride initiatives with an owner, a progress bar, the change since last week and a due date. Each bar has three parts worked out from the task counts: done (solid), in review (half strength) and not started (the empty track). A line stands where the initiative was a week ago and a diamond where the plan says it should be today. The change column says "+11 pts" with a trend icon and a word, and "Behind plan" with a warning glyph appears when an initiative is more than ten points under the plan, with no colour thresholds anywhere. The Progress and Change heads sort. A legend closes the panel. It is built from Guides and plain CSS bars, with a CSS entrance only. For initiative trackers, roadmaps, onboarding checklists and any table where progress needs a baseline.
FAQ
How is each bar drawn?
From the task counts: the done share is done / (done + review + todo) rounded to a whole percent, the review share likewise, and the rest of the track is empty. The three parts are widths set from CSS variables on the bar, so the bar is plain CSS with no chart code. The last-week line and the plan diamond use the same scale, so they sit exactly where their percentages say.
When does Behind plan show, and why no colours?
When the plan's percentage minus the done percentage is more than BEHIND (ten points). The flag is a warning glyph and two words, and the line it sits on is always there, hidden when not needed, so rows never change height. Status carried by colour alone fails for many readers and for greyscale printing; here the words, a sign and an icon carry it and the whole table works in one tone.
How do I use my own initiatives?
Edit INITIATIVES: a name, an owner, the tasks done, in review and not started, the percent done a week ago, the percent the plan wants today and the due date. Progress, change and the flag are derived from those numbers. The array is in due-date order, which is also what a third press on a head returns to.
How do the sortable heads behave?
Progress and Change start with the most first, the second press reverses and the third restores due-date order. The sorted head has aria-sort, the others say none, ties fall to the name and a polite line reads out the order. The rows are rebuilt for each order, so nothing animates under the pointer.
What stays local, and how do I wire real data?
The counts are constants and the sort is one useState; nothing is requested or saved. To use real data, map your tracker's tasks to the three counts and store the previous week's percentage in a weekly snapshot, then pass INITIATIVES in. Nothing else in the table needs to change.