shadcn.io is not affiliated with official shadcn/ui
Top Reviewers Table Reviews Block for Vue
A ranked table of eight recipe-community reviewers that a toggle group re-ranks by reviews, helpful votes or helpful rate, with a hover card of each one's latest review.
Installation
Overview
A top-reviewers table for Vue with Ark UI, for Gleanwood, a fictional recipe community. A header with a "Rank by" toggle group at its end sits over a real table running from rail to rail: rank, reviewer, reviews written, helpful votes, helpful rate and a bar. Press Most reviews, Most helpful or Helpful rate and the eight reviewers are ranked again, the ranked column turns to full weight and the bar is scaled to that figure. The helpful rate is worked out from each reviewer's helpful votes over the votes cast on their reviews. Every name is a button: hover, focus or press it and a card shows that reviewer's latest review (stars, recipe, text, date). On a phone the table keeps the rank, the reviewer and the one figure it is ranked by. It's built from Table markup, Toggle Group, Hover Card, Rating and Guides.
FAQ
How do I put in my own reviewers?
Edit REVIEWERS at the top of the file: each has reviews (written), helpful (helpful votes received), cast (votes cast on their reviews) and a latest review. The rate, the order and the bar widths are worked out from those when the block renders; ties fall back to the name.
What does re-ranking change?
The row order, the weight of the ranked column and the bar. The table keeps its height, so nothing below it moves, and a hidden status line says "Ranked by most helpful". There is no podium: it's a plain ranked table.
How do I read a reviewer's latest review without a mouse?
Tab to the name: the card opens on focus and closes on Escape. On a touch screen a press opens it. Hovering also opens it, so the card works with a pointer, a keyboard and a finger.