Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Sortable Table Awards Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A sortable award table for Svelte 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.

How is the status told without colour?

Each badge has an icon and the status word, and the outline differs: solid for Won, lighter for Shortlisted, dashed for Entered. Screen readers hear the word.

Are these real awards?

No. Every programme, award and product here is made up for the example, and the years are fixed in the data, so an award given in 2024 stays 2024.

All 137 awards blocks