---
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: 2026-09-17T13:56:23Z
published: 2026-09-17T13:56:23Z
canonical: "docs.document360.com/how-to-sort-the-contents-of-a-table"
---
> ## 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
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.
NOTE
This implementation applies to **all tables** across your Knowledge Base site. Sorting is triggered by the reader clicking any column header. The sort icon in the header indicates the current sort direction — ascending (▴) or descending (▾).
---
## 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**.
1. 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);
}
```
1. Click **Save**.
### Add the JavaScript
1. In the same **Custom CSS & JavaScript** settings page, select the **JavaScript** tab.
2. Paste the following snippet:
```
/**
* 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];
// Sort only data rows (rows with | ), so the header row of | is not moved
const rows = Array.from(tBody.querySelectorAll("tr")).filter(row => row.querySelector("td"));
// 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();
// Compare as numbers when both values are numeric, otherwise compare as text
const aNum = parseFloat(aColText.replace(/[^0-9.-]/g, ""));
const bNum = parseFloat(bColText.replace(/[^0-9.-]/g, ""));
const bothNumeric = aColText !== "" && bColText !== "" && !isNaN(aNum) && !isNaN(bNum);
const result = bothNumeric ? (aNum - bNum) : aColText.localeCompare(bColText);
return result * dirModifier;
});
// Re-add the newly sorted rows below the header row
sortedRows.forEach(row => tBody.appendChild(row));
// 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);
}
// Attach click-to-sort to every table; safe to run repeatedly
function initSortableTables() {
document.querySelectorAll("table").forEach(table => {
if (table.classList.contains("table-sortable")) return; // already set up
table.classList.add("table-sortable");
table.querySelectorAll("th").forEach((headerCell, headerIndex) => {
headerCell.addEventListener("click", () => {
const currentIsAscending = headerCell.classList.contains("th-sort-asc");
sortTableByColumn(table, headerIndex, !currentIsAscending);
});
});
});
}
// Run on first load
initSortableTables();
// Re-run whenever the reader opens another article (the site loads articles without a full page reload)
setInterval(initSortableTables, 1000);
```
1. 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.
|