How to sort the contents of a table

Adding sortable columns to your tables lets readers reorder table content by clicking any column header. Clicking a header once sorts ascending (▴); clicking again sorts descending (▾). The implementation requires two additions to your Custom CSS & JavaScript settings, a CSS snippet that styles the sort indicators, and a JavaScript snippet that handles the sort logic.

When to use sortable tables

• Reference tables with many rows: sorting lets readers quickly find the entry they are looking for rather than scanning the entire table.
• Comparison tables: readers can sort by any attribute (price, name, feature availability) to compare options on their own terms.
• Data-heavy articles: sorting reduces the need for readers to request a filtered or reordered version of the data.

How to add sortable columns to tables

This requires two steps: adding the CSS for visual indicators, then adding the JavaScript for the sort logic.

Add the CSS

1. In the Knowledge Base portal, go to Settings > Knowledge base site > Custom CSS & JavaScript.

2. Select the CSS tab and paste the following snippet:

table th {
    cursor: pointer;
}

table .th-sort-asc::after {
    content: "\25b4";
}

table .th-sort-desc::after {
    content: "\25be";
}

table .th-sort-asc::after,
table .th-sort-desc::after {
    margin-left: 5px;
}

table .th-sort-asc,
table .th-sort-desc {
    background: rgba(0, 0, 0, 0.1);
}

3. Click Save.

Add the JavaScript

1. In the same Custom CSS & JavaScript settings page, select the JavaScript tab.
2. Paste the following snippet:

$( "table" ).addClass("table-sortable");

/**
 * Sorts a HTML table.
 * 
 * @param {HTMLTableElement} table The table to sort
 * @param {number} column The index of the column to sort
 * @param {boolean} asc Determines if the sorting will be in ascending
 */
function sortTableByColumn(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 from the table
    while (tBody.firstChild) {
        tBody.removeChild(tBody.firstChild);
    }

    // Re-add the newly sorted rows
    tBody.append(...sortedRows);

    // Remember how the column is currently sorted
    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);
}

document.querySelectorAll(".table-sortable th").forEach(headerCell => {
    headerCell.addEventListener("click", () => {
        const tableElement = headerCell.parentElement.parentElement.parentElement;
        const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
        const currentIsAscending = headerCell.classList.contains("th-sort-asc");

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

3. Click Save.

Outcome

After saving both snippets, all table column headers on your Knowledge Base site become clickable. Clicking a header sorts the table rows by that column. A sort direction indicator appears in the active column header.