Table: Striped

function sortTable(table, column, asc = true) {
    const dirModifier = asc ? 1 : -1;
    const tBody = table.tBodies[0];
    const rows = Array.from(tBody.querySelectorAll("tr"));

    // Sort each row
    const sortedRows = rows.sort((a, b) => {
        const aColText = a.querySelector(`td:nth-child(${column + 1})`).textContent.trim();
        const bColText = b.querySelector(`td:nth-child(${column + 1})`).textContent.trim();

        return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
    });

    // Remove all existing TRs
    while (tBody.firstChild) {
        tBody.removeChild(tBody.firstChild);
    }

    // Add sorted TRs
    tBody.append(...sortedRows);

    // Record sort direction
    table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
    table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
    table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);

    // Add/Move aria-sort attribute to sorted column
    table.querySelectorAll("th").forEach(th => th.removeAttribute("aria-sort"));
    let ariaSort = (asc) ? "ascending" : "descending";
    table.querySelector(`th:nth-child(${column + 1})`).setAttribute("aria-sort", ariaSort);

    // Modify aria-pressed values on buttons
    table.querySelectorAll("th button").forEach(button => button.setAttribute("aria-pressed", "false"));
    table.querySelector(`th:nth-child(${column + 1}) button`).setAttribute("aria-pressed", "true");

    // Update aria-live region
    let caption = table.querySelector("caption").textContent;
    let columnName = table.querySelector(`th:nth-child(${ column + 1}) button`).textContent;
    let announcement = `${ columnName } is now sorted in ${ ariaSort } order.`;
    table.parentElement.querySelector(".bux-table--announcement-region").textContent = announcement;
}

// Query for tables with Sortable property and add Click event
document.querySelectorAll(".bux-table--sortable th button").forEach(button => {
    button.addEventListener("click", () => {
        const headerCell = button.parentElement;
        const tableElement = headerCell.parentElement.parentElement.parentElement;
        const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
        const currentIsAscending = headerCell.classList.contains("th-sort-asc");

        sortTable(tableElement, headerIndex, !currentIsAscending);
    });
});