Basic example

A11y Sortable Table

A minimal sortable invoices table that imports the built GitHub Pages runtime from ../../dist/index.js and ../../dist/styles.css.

Full demo and docs GitHub repository

Try it

Sort the table

Use Tab to reach a column header button. Press Enter or Space to sort and confirm focus remains on the activated button.

Invoices

INV-1001	Acme Corp	30 May 2026	€199.99
INV-1002	Globex Inc	18 Apr 2026	€89.50
INV-1003	Initech	5 Mar 2026	€450.00

Accessibility notes

What to inspect

Header controls are native buttons.
The sorted header cell receives aria-sort.
The table keeps semantic <table> markup.
The scroll wrapper is enhanced only when horizontal overflow exists.

Import path

Built package output

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

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