shadcn.io is not affiliated with official shadcn/ui
Searchable Archive Awards Block for Ark UI
A decade of awards in a table of eight rows a page, with a search field, a year Select, a live Showing 1 to 8 of 29 line and the catalog Pagination.
Installation
Overview
An award archive for React with Ark UI. A centred header counts the awards and the years they span. A ruled band holds a search field and a year Select; under it a real table (year, award with a small drawn mark, programme, category) on hairlines rail to rail shows eight rows a page, and a foot carries a live "Showing 1 to 8 of 29 awards" line beside the catalog Pagination (page 1 of 4). Typing or choosing a year narrows the whole archive and returns to page 1; a search with no match shows an empty state with a way back. Every row is the same height and the table frame is as tall as eight rows, so changing page or filter never moves the block. On a phone the programme and category fold into the award cell. The awards and programmes are made up for the example: replace them with the recognition your product has actually received.
FAQ
How do I change the awards or the page size?
Edit AWARDS: each has a title, a programme, a category and a fixed year; PAGE_SIZE sets the rows per page. The header, the year Select, the page count and the "Showing" line are all derived from the list.
What does the search look through?
The award, the programme, the category and the year, as one lowercase string, so "audit", "Brackenmoor", "security" and "2022" all work. The year Select narrows the same list, and both apply together.
Do the page links work without script?
Each number is a real link to ?page=n; the click swaps the rows in place and keeps the page where it is. The Previous and Next links dim and leave the tab order at either end. On React Aria they are buttons that call the same handler.
What do screen readers hear?
A labelled, focusable table region with a caption, header cells with column scope, and a polite line after every change ("Showing 9 to 16 of 29 awards"). The drawn marks are hidden from assistive technology and the award is always in the text.