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

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 ↗