Option demo

Configure sorting from HTML

This product comparison table keeps all sortable-table options in markup, which is useful when a server-rendered page should initialize without a custom JavaScript configuration object.

All demos Basic example

Scenario

Compare hardware for a procurement review

Sort laptops by fit score, price, launch date, and warranty coverage. The table starts with the highest fit score first and allows a third activation to restore the original order.

defaultSort allowUnsort descendingFirstTypes emptyValuesLast

Try it

Sort from the header buttons

Press Tab until a column header button receives focus.
Press Enter or Space to sort by that column.
Activate the same sorted column again until the original order returns.
Sort Warranty to see how empty values are placed first in this demo.

Example

Product comparison table

Laptop shortlist for field support teams

Atlas 14 Rugged	94	$1,899	15 Mar 2026	36 months
HelioBook Air	88	$1,299	20 Jan 2026	Not listed
Northstar Pro	91	$1,649	8 Nov 2025	24 months
FieldPad Max	79	$999	12 Sep 2025	12 months
Vector Studio 16	86	$2,199	2 Apr 2026	Not listed

Developer notes

Options used in markup

<table
  data-a11y-sortable-table
  data-a11y-sortable-table-default-sort="score"
  data-a11y-sortable-table-default-direction="descending"
  data-a11y-sortable-table-allow-unsort="true"
  data-a11y-sortable-table-descending-first-types="number,date,rating"
  data-a11y-sortable-table-empty-values-last="false"
>
  ...
</table>

import {
  enhanceScrollableTableWrapper,
  initSortableTables
} from "../../dist/index.js";

initSortableTables();
enhanceScrollableTableWrapper(document.getElementById("products-wrapper"));

Accessibility notes

What to inspect

Semantic table

The comparison uses a real caption, column headers, table rows, and native buttons inside sortable headers.

Focus and status

Sorting preserves focus on the activated header button and updates aria-sort on the active header cell.

Limitation

Data attributes cover safe scalar options. Use JavaScript options for functions such as custom parsers or custom sorters.