shadcn.io is not affiliated with official shadcn/ui
Evidence Table Awards Block for React
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 Base 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.
Related
- Pro
Impact Metrics Awards
Lists and tablesA ruled list of three awards for a CI/CD service, each with a drawn mark, the programme and year at the start and, at the end, the three measured results it recognised with the change in words.
- Pro
Connector Map Awards
Charts and figuresA reverse split for a spend-analytics tool: a framed map with four awards in a column at the start, the result each recognised at the end and hairline curves joining each pair, drawn bolder for the award you choose.
- Pro
Trend Arrows Awards
Lists and tablesA ruled table for an investing app comparing five award measures this year and last year, with the change as an arrow icon and words (up 4, flat, down 1) so a change is never told by colour alone.
- Pro
Edition Comparison Awards
Lists and tablesA table by category for a usage-billing API comparing its placement at two editions of an awards programme, each row reading 7th to 3rd with an arrow, the places gained in words, a filled dot on a win and a total row.
- Pro
Judges Score Table Awards
Rankings and scoresA score sheet for a judging platform: five judges as columns with initials avatars, five weighted criteria as rows, the highest and lowest score of each row outlined, and weighted averages in the foot.
- Pro
Before After Awards
Charts and figuresThree awards for a help desk in cells on shared hairlines, each with two results drawn as before and after bars, and a segmented control that switches the large figure between the year before and the year of the award.