A11y Sortable Table

Option 1: th with a button

Author the native button yourself when you want full control over the label, classes, and icon markup.

<th scope="col">
  <button
    class="a11y-sortable-table__button"
    type="button"
    data-sort-key="amount"
    data-sort-type="number"
  >
    Amount
    <span class="a11y-sortable-table__icon" aria-hidden="true"></span>
  </button>
</th>

Option 2: th without a button

Put sorting data on the header cell and the plugin will generate the button during progressive enhancement.

<th
  scope="col"
  data-sort-key="amount"
  data-sort-type="number"
  data-align="end"
>
  Amount
</th>

HTML

<table class="a11y-sortable-table" data-a11y-sortable-table>
  <caption>Invoices</caption>
  <thead>
    <tr>
      <th scope="col">
        <button
          class="a11y-sortable-table__button"
          type="button"
          data-sort-key="amount"
          data-sort-type="number"
        >
          Amount
          <span class="a11y-sortable-table__icon" aria-hidden="true"></span>
        </button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-sort-value="199.99">$199.99</td>
    </tr>
  </tbody>
</table>

JavaScript

import { createSortableTable } from "a11y-sortable-table";
import "a11y-sortable-table/styles.css";

const table = document.querySelector("[data-a11y-sortable-table]");

if (table instanceof HTMLTableElement) {
  createSortableTable(table, {
    defaultSort: { key: "amount", direction: "descending" },
    allowUnsort: true
  });
}