shadcn.io is not affiliated with official shadcn/ui
Searchable Archive Awards Block for React
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 Base 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.
Related
- Pro
Sortable Table Awards
Lists and tablesA sortable table of awards with buttons in the column heads, aria-sort, status badges with an icon and a word, a sticky first column and a count in the foot.
- Pro
Filterable Award List
Filters and searchEighteen awards in two columns narrowed by category chips and a year group, with a live count, a Clear filters button and an empty state.
- Pro
Category Tabs Awards
Filters and searchUnderline tabs by award category, each with a count, over a two-column grid of awards with a drawn mark in a frame, beside a split divider.
- Pro
Year Rail Timeline Awards
TimelinesA vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.
- Pro
Pagination Blog
Post listsA transit-planning blog's archive as rows, four to a page over three pages, with the catalog pagination in a band at the foot, a polite 'Showing 5 to 8 of 12' line and a height that never changes between pages.
- Pro
Count By Year Awards
Charts and figuresA split for a flood-risk analytics tool: a header and a toggle at the start and, at the end, a ruled list of years from 2019 to 2025, each a horizontal bar and its count, counting either awards or programmes.