shadcn.io is not affiliated with official shadcn/ui
Compact List Reviews Block for Radix UI
Twelve one-line reviews of a notes app as a real table with sortable column heads, a Select that mirrors the sort, and nothing to open.
Installation
Overview
A compact list of reviews for React with Radix UI, for Gleangate, a fictional notes app. A start-aligned header states the count and the average (both worked out from the twelve typed reviews) and carries a Select at its end that orders the rows. Under it a real table runs from rail to rail beneath a rule with + marks: the rating as stars and a number, the title over a one-line excerpt, the reviewer with a verified mark, the date and the helpful count. Everything is visible and nothing opens. The Rating, Reviewer, Date and Helpful column heads are buttons that sort the same table and set aria-sort, and a polite line says which order is on. On a phone the Reviewer and Date columns drop and the rating becomes one star and a number. It's built from Select, Rating, Guides and the Button styles.
FAQ
How do I use my own reviews?
Edit REVIEWS at the top of the file: each entry has an id, the name, a rating from 1 to 5, an ISO date, a title, a one to three sentence body, verified and a helpful count. The count and the average in the header are computed from the array, so they follow your edits. Dates are fixed text, never computed from today.
How does sorting work, and is it announced?
Each of the four sortable column heads is a button inside its th. The first press sorts a column biggest first (names A to Z), the next reverses it, and the th carries aria-sort="ascending", "descending" or "none". The Select lists all eight orders and always shows the one in force, so the two controls stay in step. A polite status line, hidden from sight, says "Sorted by newest first." after every change. Ties fall back to the newest review, so the order never flickers.
Why is the table a native table?
It needs a caption, column headers with scope and aria-sort, and a column set that drops on a phone, and a plain table gives all of that the same way on every library. The scroll region around it is named and reachable by keyboard.