Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

Are these real awards?

No. Fathomvale and the Tealbrook programmes are made up, and so are the sources and figures. Replace them with your own awards and the data behind them, and keep the notes honest about who measured what.

  • Pro

    Impact Metrics Awards

    Lists and tables

    A 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 figures

    A 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 tables

    A 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

    A 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 scores

    A 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 figures

    Three 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.