---
title: "Comment trier le contenu d’un tableau"
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-06-22T08:31:03Z
published: 2026-06-22T08:31:03Z
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.

# Comment trier le contenu d’un tableau

Ajouter des colonnes triables à vos tableaux permet aux lecteurs de réorganiser le contenu des tables en cliquant sur n’importe quel en-tête de colonne. Cliquer une fois sur un en-tête trie en montant (▴) ; cliquer à nouveau trie en descendant (▾). L’implémentation nécessite deux ajouts à vos paramètres CSS & JavaScript personnalisés : un extrait CSS qui stylise les indicateurs de tri, et un extrait JavaScript qui gère la logique de tri.

---

## Quand utiliser des tables triables

- **Tableaux de référence avec de nombreuses lignes** : le tri permet aux lecteurs de trouver rapidement l’entrée qu’ils recherchent plutôt que de parcourir toute la table.
- **Tableaux comparatifs** : les lecteurs peuvent trier par n’importe quel attribut (prix, nom, disponibilité des fonctionnalités) pour comparer les options selon leurs propres conditions.
- **Articles axés sur les données** : le tri réduit le besoin pour les lecteurs de demander une version filtrée ou réorganisée des données.

 NOTE

Cette implémentation s’applique **à toutes les tables** de votre site de base de connaissances. Le tri est déclenché lorsque le lecteur clique sur n’importe quel en-tête de colonne. L’icône de tri dans l’en-tête indique la direction de tri actuelle — ascendante (▴) ou descendante (▾).

---

## Comment ajouter des colonnes triables dans des tables

Cela nécessite deux étapes : ajouter le CSS pour les indicateurs visuels, puis ajouter le JavaScript pour la logique de tri.

### Ajoutez le CSS

1. Dans le portail de la Base de connaissances, rendez-vous sur **Paramètres** > **site de la Base de connaissances** > **CSS & JavaScript personnalisés**.

![Knowledge base site settings page showing the Custom CSS and JavaScript option in the left navigation.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)

1. Sélectionnez l’onglet **CSS** et collez l’extrait suivant :

```
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. **Cliquez sur Enregistrer**.

![Custom CSS editor showing the sort table CSS snippet pasted in the CSS tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Sort%20table%20content%20-%20custom%20css.png)

### Ajouter le JavaScript

1. Dans la même page **de paramètres personnalisés CSS & JavaScript** , sélectionnez l’onglet **JavaScript** .
2. Collez l’extrait suivant :

```
$( "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. **Cliquez sur Enregistrer**.

![Custom JavaScript editor showing the sort table JavaScript snippet pasted in the JavaScript tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Sort%20table%20content%20-%20custom%20js.png)

---

## Conséquences

Après avoir sauvegardé les deux extraits, tous les en-têtes de colonnes de tableau sur votre site de Knowledge Base deviennent cliquables. Cliquer sur un en-tête trie les lignes du tableau par cette colonne. Un indicateur de direction de tri apparaît dans l’en-tête de colonne actif.

![Knowledge Base site table showing clickable column headers with ascending sort indicator applied to the active column.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-sort_the_contents_of_a_table.png)