shadcn.io is not affiliated with official shadcn/ui
Export Panel Reviews Block for React
A review export for a seed company: a format ToggleGroup, column Checkboxes and a ratings Select beside a framed live preview of the first three rows, with Download and Copy.
Installation
Overview
A review export for React with Base UI, for Furrowcase, a fictional seed company. A divider splits the section, with the preview at the start and the options at the end; on a phone the options come first. The options are a format ToggleGroup (CSV or JSON), seven column Checkboxes (date, rating, title, review text, reviewer, verified purchase, helpful votes; at least one stays on), a Select for the ratings to include (every rating, 4 stars and up, 3 stars and below, 1 and 2 stars), then two buttons: the Shine Button downloads the file and Copy puts all of it on the clipboard. The preview is a framed mono block that follows your theme: the file's name and size in a bar, then the first three rows of exactly the file you would get, with a caption that gives the true row count. The file is built in the browser from nine typed reviews: CSV with quoting for commas and quotes, or JSON with the same keys. It's built from ToggleGroup, Checkbox, Select, Field, Copy Button, Shine Button and Guides.
FAQ
Is the preview the real file?
Yes. One function builds the file text from the chosen rows and columns, and both the preview (its first three rows), the size, Download and Copy use it, so what you see is what you get. CSV values that contain a comma, a quote or a line break are wrapped in quotes with inner quotes doubled; JSON is indented by two spaces with the column names as keys (helpful_votes for the last one).
How does Download work, and is anything uploaded?
The browser builds a Blob from the text, points a temporary link at it and clicks it, then frees the address, so the file saves from the page with the name furrowcase-reviews.csv or .json. Nothing is uploaded and no server is involved; a polite status says the file was saved from this page.
How do I use my own reviews and columns?
Edit REVIEWS and COLUMNS at the top of the file (each column has an id, the key used in the file and a label), and add the matching case to cellOf. The rating filters are in RATING_ITEMS and passes. The row count, the size and the caption are worked out from what is chosen, so they stay true.
How do the controls work?
The format group always keeps one choice, and the last ticked column can't be unticked (a line says so). Choosing a rating range changes the rows in both the preview and the file. The preview is a scroll region with a fixed height, so a long JSON file never moves the page, and it takes keyboard focus so it can be scrolled with the arrow keys.
The Checkbox handler receives the new value; the ToggleGroup takes value={[id]} and ignores an empty list.
Related
- Pro
Settings Config Reviews
Merchant toolsDisplay settings for a soap shop's review widget: four Switch rows, an order Select and a lowest-rating Select beside a live preview card that follows each change, with a Save button.
- Pro
Merchant Dashboard Reviews
Merchant toolsWhat is waiting for a reply at a ceramics studio: three worked-out cells (awaiting, replied this month, average rating) beside the queue of reviews that need an answer, each with an inline reply field and Send.
- Pro
Bulk Actions Reviews
ModerationTen skincare reviews in a sortable table with status tabs and counts, a select-all checkbox with a partial state, and a closing action band to Publish, Hide or Delete the chosen rows, Delete behind a confirm dialog.
- Pro
Analytics Summary Reviews
Insights and trendsSix products of one outdoor shop ranked by their reviews: a sortable table of average, count, a five-segment ratings bar, the 30-day change and the answered share, all worked out from typed reviews.
- Pro
Notification Feed Reviews
ModerationA merchant review inbox for a greenhouse-kit maker: Tabs for All, Needs action and Replies with counts, a Mark all as read button and full-width ruled rows under day dividers with inline Approve, Reply and Mark read.
- Pro
Compact List Reviews
Lists and pagesTwelve 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.