shadcn.io is not affiliated with official shadcn/ui
Total Tally Awards Block for Solid
A scoreboard table for an accounting app: years down the side, the three tiers (grand prize, winner, finalist) and a total across, with column totals in the foot row, all counted from one list of entries.
Installation
Overview
A scoreboard of awards for Solid with Ark UI. A short header sits above one table ruled in bands from rail to rail and ending the block: a row for each year of the Harborwood Awards, newest first, and a column for each tier (grand prize, winner, finalist) and a total. The counts are large, tabular figures that roll up once as they scroll into view, and arrive at once under reduced motion. Each tier's head carries a small drawn medal in a different weight (solid, half, outline) over its name, so the tiers read by shape and word, never by a metal colour; each year's cell names that year's top honour on wider screens, and the foot row carries the column totals. It's built from a native table, the sliding number, Guides and your theme's tokens. The programme and the entries are made up for the example: replace them with your own.
FAQ
How do I change the entries?
Edit ENTRIES at the top of the file. Each entry has a category, a tier ("grand", "winner" or "finalist") and the year of the ceremony, a fixed number. The years, the counts in every cell, the row totals, the column totals and the tally in the header are all counted from that list, so nothing else needs editing: add an entry and every figure follows. The rows run newest first.
How do I add or rename a tier?
TIERS lists the columns in order, each with an id, a label and the weight of its medal ("solid", "half" or "outline"). Add a tier there, add the id to the Tier type and RANK (lower ranks first, for the year's top honour) and give entries that tier. The table gains a column; on a phone, with more than three tiers, let the table scroll sideways in a focusable region instead of narrowing the columns.
What is the top honour in a year's cell?
The best entry of that year: the highest tier first, then the category A to Z. It's worked out from the same list, so it never disagrees with the counts, and it's hidden on phones to keep the columns wide enough for the figures.
Do the numbers always animate?
No. Each count rolls up from zero once, the first time it scrolls into view. With reduced motion the final values are shown straight away. Assistive technology reads the real number the whole time, because the rolling digits are hidden from it and the value is written in text.
How do screen readers read the table?
It's a real table with a caption, column heads and a head for each row, so a screen reader announces the year and the tier for every count. The drawn medals are hidden from assistive technology; the tier's name beside each is the label. Years sit in bdi elements so they keep their order in a right-to-left layout.