Table sort button

TableSortButton turns a column head into a sort key: the column's name in the head's label role and a play glyph that points up for ascending and down for descending (an open diamond while the column is not sorted). It writes aria-sort on its header cell and reports the next order through onSortChange.

Example#

Usage#

Use a sort button in a column head when people need to reorder a table by that column: projects by score, invoices by date. It writes aria-sort on its head cell and reports the next order through onSortChange; the table sorts its own rows.

• States. Ascending points the glyph up, descending down; an open diamond marks a column that can be sorted but is not.
• One sorted column at a time; the others return to the diamond.

Anatomy#

Volume#

Reading layer: identical at every volume.

• Quiet

  Projects by score

  Project	Score
  Fernlight	98
  Pebblepath	91

  Docs, forms, legal and long reads. Flat inks, no art in motion.

• Studio

  Projects by score

  Project	Score
  Fernlight	98
  Pebblepath	91

  The site default. Art on its own plates, one display moment per view.

• Press

  Projects by score

  Project	Score
  Fernlight	98
  Pebblepath	91

  Hero moments, covers and campaigns. Halftone fields and the second ink.

• Rave

  Projects by score

  Project	Score
  Fernlight	98
  Pebblepath	91

  Launches, posters and the 404. Every ink, and the words still win.

Content#

• The label is the column's name; the order is in the glyph and aria-sort, never in extra words.

Do and don't#

Accessibility#

• The header cell, not the button, carries aria-sort, so screen readers announce the order with the column.
• The order never rests on colour: the glyph's direction and shape say it.
• A plain button: Tab reaches it, Enter and Space sort.

The colour pairs it prints, with their contrast on both papers:

Props#

Tokens#

Changelog#