shadcn.io is not affiliated with official shadcn/ui
Judges Score Table Awards Block for Solid
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.
Installation
Overview
A judge-by-criterion score sheet for Solid with Ark UI. A start-aligned header with the overall score at its end sits above a native table ruled in bands from rail to rail. Its columns are five judges, each with an initials avatar, a short label (J1 to J5) and a first name, and a panel average; its rows are five criteria, each with its weight in the score. Every cell is a score out of 10: the highest in each row is outlined in a heavy ring and the lowest in a thin one, each also announced as text, with a line under the table explaining both. The foot row gives each judge's weighted average and the overall score. Everything is counted from the scores at the top of the file. On a phone the table scrolls sideways in a region that takes focus, with the criteria staying in place. It's built from a native table, Avatar, Guides and your theme's tokens. The Gablemere Awards, the entry and the judges are made up for the example.
FAQ
How do I change the scores, judges and weights?
Edit JUDGES and CRITERIA at the top of the file. Each criterion has a weight in percent (they should add up to 100) and one score per judge, in the order of JUDGES. Adding a judge means adding a score to every criterion; the table gains a column and every average follows.
How are the averages worked out?
A row's panel average is the plain mean of its five scores. A judge's weighted average multiplies each of their scores by its criterion's weight and adds them up; the overall score is the mean of the judges' weighted averages. All of them are shown to one decimal, and none is typed in.
How are the highest and lowest scores marked?
By outline weight, not colour: a heavy ring for the highest score in the row and a thin one for the lowest, with ", highest in this row" or ", lowest in this row" added as hidden text so a screen reader hears it too. If every judge gave the same score in a row, neither is marked. Ties are all marked.
What happens on a phone?
The table is wider than the screen, so it scrolls sideways in a labelled region that takes keyboard focus, while the criteria column stays in place with a hairline beside it. Rows stay compact, and nothing else on the page scrolls sideways.
How do screen readers read the table?
It's a real table with a caption, column heads for the judges and the panel average, and each criterion as the head of its row. A judge's column head reads "J1, Imre Valkonen". The weight and the foot row's labels are plain text, and every number sits in an element that keeps its order in a right-to-left layout.