shadcn.io is not affiliated with official shadcn/ui
Sortable Open Metrics Table About Block for React Aria
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
Installation
Overview
A public metrics table for React with React Aria, written for Tallyroom, a fictional tracker that lets startups publish their own numbers. A start header sits over a framed table of seven figures: monthly recurring revenue, paying teams, retention, churn, first-reply time, cash runway and published boards. Each row gives last quarter's reading, this quarter's, the change between them as an arrow and a sign in foreground weights, the target and a thin bar for how far the figure has got toward it. Metric, Change and Target are header buttons: press one to sort by it, press it again to reverse the order. A status dot appears only on a figure that has passed its target, and nowhere else. The first column stays put while the table scrolls sideways on a phone. It's built from Table, Progress, Status and Guides, with CSS transitions and your theme's tokens for every colour. For an about page, an investor update or an open-startup page. The figures are example data.
FAQ
How do I change the metrics and their targets?
Edit METRICS at the top of the file: each has a label, a unit (dollars, count, percent, hours or months), last quarter's and this quarter's reading, a target and whether better is higher or lower. The change, the bar and the sort keys are all computed from those numbers, so nothing else needs editing. The figures are example data.
How is the bar worked out, and what about churn?
For a metric where higher is better the bar is the reading divided by the target; where lower is better (churn, reply time) it is the target divided by the reading, so both read as "how close". The bar stops at 100%, and a lower-is-better target is written with a leading "≤". Only a figure that has reached its target gets the status dot, with "target met" for a screen reader.
How does sorting work, and how is it announced?
Metric sorts A to Z first, Change and Target sort biggest first; pressing the same column again reverses it. The sorted header carries aria-sort and an arrow, and a polite line above the table reads the result, such as "Sorted by progress to target, closest first". Ties fall back to the metric's name.
React Aria's table owns the sorting: each sortable header is a focusable cell that Enter and Space activate, arrow keys move between cells, and the table is named by its aria-label (a grid has no caption).
What happens on a phone?
The table is wider than the screen, so it scrolls sideways inside a region that a keyboard can focus and that is named like the table. The metric column is pinned at the start so you always know which row you are reading. Nothing else on the page scrolls sideways.