Skip to content

Sortable table

A data table where every column sorts with a click, ascending or descending, with no library.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

Headers hold real buttons and the sorted column carries aria-sort, which screen readers announce. Numbers and dates sort on their value, text in French alphabetical order. On mobile, the table scrolls horizontally in a keyboard-accessible region.

Code

Loading the code…

Archive contents

tableau-triable-html-tailwind.zip3 files · 4 Ko

  • index.html12 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • A real table on large screens whose rows each become a readable card on mobile, with no horizontal scrolling and no JavaScript.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A CSS-drawn video poster with a play button, the testimonial's key quote, its author, and the timestamped transcript in a collapsible panel.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • Four key figures in cards that count up from zero to their value when the section scrolls into view, with icon, unit and label.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component
  • A table of contents that follows the reader through a long article and highlights the current section.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component