AHA demos
← All demos

Sortable table

Click a column header to sort. The URL updates, the back button works, and a reload keeps the order.

NameYear ↓Creator
Mojo2023Modular
V2019Alexander Medvednikov
Zig2016Andrew Kelley
Gleam2016Louis Pilfold
Swift2014Chris Lattner
Crystal2014Ary Borenszweig
Julia2012Bezanson, Karpinski, Shah, Edelman
TypeScript2012Anders Hejlsberg
Elm2012Evan Czaplicki
Kotlin2011JetBrains
Dart2011Bak and Lund
Elixir2011José Valim
Rust2010Graydon Hoare
Go2009Griesemer, Pike, Thompson
CoffeeScript2009Jeremy Ashkenas
Nim2008Andreas Rumpf
Clojure2007Rich Hickey
F#2005Don Syme
Scala2004Martin Odersky
D2001Walter Bright
C#2000Anders Hejlsberg
OCaml1996Xavier Leroy et al.
Ruby1995Yukihiro Matsumoto
Java1995James Gosling
JavaScript1995Brendan Eich
PHP1995Rasmus Lerdorf
Racket1995PLT
Lua1993Ierusalimschy et al.
R1993Ihaka and Gentleman
Python1991Guido van Rossum
Visual Basic1991Microsoft
Haskell1990Hudak, Hughes, Peyton Jones, Wadler
Tcl1988John Ousterhout
Perl1987Larry Wall
Eiffel1986Bertrand Meyer
Erlang1986Joe Armstrong
C++1985Bjarne Stroustrup
Objective-C1984Cox and Love
Common Lisp1984Steele et al.
MATLAB1984Cleve Moler
Ada1980Jean Ichbiah
Modula-21978Niklaus Wirth
Awk1977Aho, Weinberger, Kernighan
Scheme1975Sussman and Steele
SQL1974Chamberlin and Boyce
ML1973Robin Milner
C1972Dennis Ritchie
Smalltalk1972Alan Kay et al.
Prolog1972Alain Colmerauer
Forth1970Charles Moore
Pascal1970Niklaus Wirth
Simula1967Dahl and Nygaard
Logo1967Papert, Feurzeig, Solomon
BASIC1964Kemeny and Kurtz
ALGOL 601960Backus, Naur et al.
COBOL1959Grace Hopper et al.
Lisp1958John McCarthy
Fortran1957John Backus

What to look at

There is no API route for this one. Each header link points at this very page with ?sort= and ?dir=. hx-select="#table" tells htmx to pull only the table out of the full response and swap it in.

hx-push-url="true" pushes that URL into the browser history. Go back and forth with the browser buttons: htmx restores the page. Reload, and Astro renders the same order on the server, because the page reads the same query string.

The links have a real href too. Without JavaScript, they still sort the table with a full page load. That is progressive enhancement for free.

Source

Loading source…

Every file of this demo, as it runs. Or browse it on GitHub ↗