Sortable Tables with JavaScript

Technical Deep Dive & Specifications

2.1 The WAI-ARIA aria-sort Specification

According to the W3C WAI-ARIA 1.2 specification, the aria-sort attribute can be placed on a table header cell (<th scope="col">) or header button to convey the current sorting direction to screen readers.

+------------------------------------------------------------------------+
|                            TABLE HEADER CELL                           |
|  <th scope="col" aria-sort="ascending">                                |
|    <button type="button" class="sort-btn">                             |
|      <span>Employee Name</span>                                        |
|      <span class="sort-indicator" aria-hidden="true">▲</span>          |
|    </button>                                                           |
|  </th>                                                                 |
+------------------------------------------------------------------------+

[!IMPORTANT] Always place interactive sort triggers inside <button type="button"> elements within the <th>. Avoid attaching click listeners directly to <th> without keyboard support (Enter / Space), focus rings, and proper ARIA semantics.

2.2 Multi-Type Sorting Strategies

Raw cell text often contains formatting characters (e.g., $1,299.95, 14.5%, Jan 15, 2026). Parsing formatted strings during every sort comparison introduces overhead and locale bugs. The industry-standard approach uses data-sort-value attributes to store raw, normalized values.

<!-- Formatted display vs Normalized machine value -->
<td data-sort-value="1299.95">$1,299.95</td>
<td data-sort-value="2026-01-15">Jan 15, 2026</td>
<td data-sort-value="Zürich">Zürich</td>

Comparison Algorithms Matrix:

// 1. Text (Locale-sensitive Unicode comparison)
const collator = new Intl.Collator(navigator.language, { numeric: true, sensitivity: 'base' });
const textDiff = collator.compare(valA, valB);

// 2. Number / Currency / Percent
const numDiff = Number(valA) - Number(valB);

// 3. Dates (ISO 8601 or Timestamps)
const dateDiff = new Date(valA).getTime() - new Date(valB).getTime();

2.3 DOM Mutation & Batching Mechanics

When you call parent.appendChild(existingChild), the browser does not create a clone. It moves the child from its current location to the target container.

By passing an array of reordered <tr> elements to tbody.append(...sortedRows), modern browser engines execute a single batched DOM update, triggering only one Layout and Paint cycle.

Array.from(tbody.querySelectorAll('tr'))
   │
   ▼
[ Row C, Row A, Row B ]  (In-Memory Array Sort)
   │
   ▼
[ Row A, Row B, Row C ]
   │
   ▼  tbody.append(...sortedRows)
+──────────────────────+
| <tbody>              |
|   <tr>Row A</tr>     | <── Re-anchored in place
|   <tr>Row B</tr>     | <── Re-anchored in place
|   <tr>Row C</tr>     | <── Re-anchored in place
+──────────────────────+

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 101–123: The table header structure encloses the text and icon inside a <button type="button">. This guarantees keyboard navigability (Tab, Space, Enter) and sets initial aria-sort="none".
• Lines 126–149: Body cells define both human-readable text and clean machine-readable values via data-sort-value (e.g., data-sort-value="1250000.50" vs $1,250,000.50).
• Lines 156–158: Intl.Collator is initialized once outside the loop for high-performance, locale-aware string comparison.
• Lines 164–169: Toggle logic switches from ascending to descending and updates aria-sort while clearing all sibling headers.
• Lines 172–192: Array.from(tbody.querySelectorAll('tr')) collects DOM node references. The comparator dynamically branches on dataType (number, date, string) using data-sort-value.
• Line 195: tbody.append(...rows) re-attaches existing DOM nodes in the new sorted sequence in a single layout tick.

Expected Browser Render Output

• A styled modern table displaying 4 columns.
• Clicking on "Client Name" cycles alphabetical ordering (Acme Corp -> Globex Industries -> Initech Systems -> Soylent Health).
• Clicking on "Assets Under Management" sorts ascending/descending by actual monetary values regardless of currency symbols and commas.
• Screen readers announce "Client Name, column header, sorted ascending".