Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Sortable Table Awards Block for React

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 React with Base 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.

  • Pro

    Searchable Archive Awards

    Filters and search

    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.

  • Pro

    Filterable Award List

    Filters and search

    Eighteen 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

    Status Radio Toggle Awards

    Filters and search

    A radio group styled as a pill switch with a sliding thumb filters awards by status, with an icon and a word on every row and a live count.

  • Pro

    Kanban Stages Awards

    Themed formats

    Three board columns, Entered, Shortlisted and Won, with count headers, an arrow showing the path and award cards that carry a drawn mark and a dated badge.

  • Pro

    Awards Table Team

    Recognition

    A table of eight awards for a field-notes app: the winner, the category with a small drawn mark, the company year, and a button that opens the citation in place under the row.

  • Pro

    Posts Table Blog

    Post lists

    Ten posts in a sortable table on one ruled band: title, author, date, reading time and category, with column headings that are buttons and say which way they sort.

All 137 awards blocks