---
title: "How to sort the contents of a table"
slug: "how-to-sort-the-contents-of-a-table"
description: "Sorting is a great option to have when you provide data artifacts in the table. "
tags: ["Customization"]
updated: 2025-12-28T13:05:12Z
published: 2026-01-31T17:30:02Z
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.
# How to sort the contents of a table
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. Navigate to **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
2. From the left navigation pane, click on the **CSS** tab and paste the following CSS snippet:
```css
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 **Settings** () > **Knowledge base site** > **Site customization** > **Custom CSS & JavaScript** in the Knowledge base portal.
3. From the left navigation pane click **JavaScript**.
4. Paste the below code snippet:
```javascript
$( "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**.
> [!NOTE]
> ** NOTE
>
> 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
