shadcn.io is not affiliated with official shadcn/ui
Sortable Table Awards Block for Ark UI
A 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.
Installation
Overview
A sortable award table for React with Ark UI. A start-aligned header counts the awards and how many were won, with a polite line at its end that reads the current order ("Sorted by year, newest first"). Under a ruled band with + marks, a native table has a caption, five column heads that are buttons (Award, Programme, Year, Category and Status), ten rows and a foot row that counts them. Pressing a head sorts by it and pressing it again reverses the order; the sorted head says so with aria-sort and an arrow. The first column carries a small drawn mark and stays in place while the rest scrolls sideways on a phone. Status is an outline badge with an icon and a word (Won, Shortlisted or Entered), so it never depends on colour. 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 rows or the columns?
Edit AWARDS for the rows (title, programme, category, status, a fixed year and a shape for the mark) and COLUMNS for the heads and the words a sorted head reads. The header count, the won count and the foot row are derived from the list.
How does sorting work?
Each head is a button. The first press sorts in the direction people expect (Year newest first, Status Won first, words A to Z); the next press reverses it. Ties fall back to the newest year and then the award's name, so the order never jumps between equal rows.
Why a native table on every library?
A caption, row heads and sorted heads (aria-sort) are real table semantics, and sorting is controlled by the block, so one table works on every target and needs no grid role.
What happens on a phone?
The table keeps all five columns and scrolls sideways in a focusable region, with the award column held in place so each row stays named. Nothing is hidden.