shadcn.io is not affiliated with official shadcn/ui
Star Grade Matrix Awards Block for React Aria
A grading-scale matrix of five categories by one to five stars, with a tooltip on each column header, the grade a hotel holds in each category as an outlined cell with filled stars, and who holds it and when.
Installation
Overview
A star-grade matrix for React with React Aria. A native table has the five categories of a made-up hotel guild down the side and its five grades, one to five stars, across the top, with a few words in every cell on what that grade asks for. The hotel's grade in each category is the cell in a ring, with its stars drawn filled and the rest outlined. Each column header says what its grade means in a tooltip, on hover and on focus, and on a tap on a touch screen. A ruled header band carries + marks, the category names stay put while the matrix scrolls sideways on a phone, and a line under it says who holds the grades and the day of the inspection. The star total in the header is worked out from the typed grades. It's built from Guides, Tooltip and a native table. The guild, the hotel and the grades are made up for the example.
FAQ
How do I change the categories and grades?
Edit CATEGORIES and GRADES at the top of the file. A category has a name, what each grade asks for (an array of five short phrases) and held, the grade the hotel holds from 1 to 5. A grade has a name, a meaning for the tooltip and its stars. The star total in the header is worked out from the held values.
How do the column tooltips work?
Each header holds a button. On a pointer device the tooltip opens on hover and on keyboard focus; on a touch screen a tap opens it instead. The meaning is also in the button's text for a screen reader, so nothing is hidden behind the tooltip.
How is the held grade shown without colour?
The cell has a ring around it, its stars are drawn filled (the others in an outline) and a screen reader hears "The hotel holds this grade". The legend under the matrix says what the outline means.
How does it fit on a phone?
The matrix keeps a minimum width and scrolls sideways in a focusable region; the category column is sticky, so each row stays labelled while you scroll.