shadcn.io is not affiliated with official shadcn/ui
Sheet Detail Awards Block for Radix UI
A table of six awards whose names open a side sheet with a drawn seal, how the award was judged, its facts and Previous and Next buttons.
Installation
Overview
An awards table with a detail sheet for React with Radix UI. Under a compact header, a table of six awards runs rail to rail on hairlines and ends the block: each row has a drawn seal, the award's name as a button, the programme, the category and the year. The name opens the catalog Sheet from the end edge on a wide screen and from the bottom on a phone, with a larger seal, what the award is for, an ordered list of how it was judged, a data list of its category, entries and prize, and a link to the programme. Previous and Next step through the awards without closing the sheet, a polite line announces each one, and closing returns focus to the row of the award last shown, not the one that opened it. On a phone the programme folds into the name cell and the category drops out. It's built from the catalog Sheet, Data List, Button and Guides. The awards and programmes are made up for the example: swap AWARDS for your own.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file. Each has a title, programme, category, a fixed year, the number of entries judged, the prize, a summary, three criteria for the ordered list and a mark: a scalloped seal made with sealOf(lobes, glyph), so changing a seal means changing two numbers and a path. The tally in the header is counted from the list.
Where does focus go when the sheet closes?
To the name button of the award that was shown last: step to the fourth award with Next, press Escape, and the fourth row has focus. Each row's button has its own id, built with useId, so two copies of the block on a page never collide.
onCloseAutoFocus on the sheet content prevents the default and focuses the row.
Which edge does the sheet come from?
From the end edge of the page on a screen 640 pixels wide or more: the right in a left-to-right page and the left in a right-to-left one, chosen from the page's direction when a row is pressed. On a narrower screen it comes up from the bottom and fills most of the height, scrolling inside if the detail is long.
Is it a real table?
Yes: a native table with a caption, column headers and the award's name as each row's header, on every target (the catalog's React Aria table is a grid, which has no captions). On a phone the Programme and Category columns are hidden and the programme repeats under the name, so nothing scrolls sideways.