How to sort the contents of a table?
  • 29 Sep 2022
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

How to sort the contents of a table?

  • Dark
    Light
  • PDF

Sorting is a great option to have when you provide data artifacts in the table. Follow the below solution to have a sort option for all the tables in your knowledge base.


Solution

  1. Go to SettingsKnowledge base siteCustom CSS & JavaScriptCustom CSS
  2. Paste the below code 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);
}

  1. Click Save
  2. Navigate to Custom JavaScript tab (SettingsKnowledge base siteCustom CSS & JavaScriptCustom JavaScript)
  3. Paste the below code 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);
    });
});

  1. Click Save
How to perform sorting?

To sort the column of the table, the reader should click the column header, and the sorting is applied. The sort icon in the column header shows the sort type (ascending or descending).

Outcome

16_Screenshot-Table_sorting


Was this article helpful?