shadcn.io is not affiliated with official shadcn/ui
Evidence Table Awards Block for Ark UI
An evidence table for a data warehouse: five awards as claims, each with its measure, period, source with a numbered note and the result with its change, plus notes and a How we measure band that folds open.
Installation
Overview
An evidence table for React with Ark UI. Five awards are claims, one row each: the award, its programme and year, the measure behind it, the period measured, the source with a numbered note, and the result in a monospaced figure with its change in words and an arrow ("up 2.4 points, from 96.8%"). The numbered notes sit under the table, and a "How we measure" band under them folds open with a Collapsible. The table scrolls sideways in a focusable region on a phone with its first column fixed, and rules run rail to rail. The page's rails and top rule come from the Guides spine. It's built from Guides, Collapsible, a native table and your theme's tokens. The awards, sources and figures are made up for the example: replace them with your own.
FAQ
How do I change the claims?
Edit CLAIMS at the top of the file. Each claim has the award's name, programme and year, a measure, a period, a source and the number of its note, and the before and after figures with their prefix, unit and decimals. Edit NOTES to change the numbered notes under the table; a note is shared by every claim that names its number.
How is the change worked out?
From the two figures. A figure marked rate (a share in per cent) is compared in points, so 96.8% to 99.2% reads "up 2.4 points"; anything else is compared in per cent of the figure before, so 6.4 seconds to 1.9 reads "down 70%". The direction is a word and an arrow, never a colour.
How do the numbered notes work?
Each source ends in a small superscript number that links to its note under the table; the note is a list item with an anchor id, and the link reads "Note 1" to a screen reader. Notes can be shared by several rows. Clicking a link changes the page's address to the note's anchor, as any in-page link does.
How does the table behave on a phone?
It keeps its five columns and scrolls sideways inside a labelled region that you can focus and scroll with the arrow keys. The award column is fixed at the start so each row stays named while you scroll. Nothing else on the page scrolls sideways.
What does the How we measure band do?
It is a Collapsible: its heading is the trigger, and it opens to three short explanations of how figures are compared, in points or in per cent, and of what the table does not show. Space or Enter toggles it, and the three entries are hidden while it is closed. Rewrite the three entries to describe your own method.