[Joomla] Comment créer un tableau triable avec du Javascript

Il est possible d'exécuter du Javascript dans un article Joomla comme pour trier un tableau en cliquant sur les en-têtes de colonnes.
Attention, par défaut les scripts sont nettoyés lors de l'enregistrement. Il faut donc les autoriser dans l'éditeur ainsi que dans Joomla en allant dans Configuration Globale → Filtres de textes → et mettre "Aucun filtre" pour le type d'utilisateur⋅rice.
Pour JCE, il faut aller sur son profil via Profiles → Editor Parameters :

• → Cleanup & Output → Validate HTML → Inherit (pour avoir le même paramétrage général de Joomla ci-dessus) ou Non
• → Advanced → et Allow Javascript ainsi que Allow CSS

Voici un exemple permettant de trier par ordre alphabétique pour du texte et ordre croissant/décroissant pour des nombres à virgules (le code est utilisé dans cette page : https://ddcm11.org/index.php/dossiers/88-point-sur-les-differents-projets-photovoltaiques-du-territoire) :

Code dans la page d'article :

<style>
  table {
    border-collapse: collapse;
    width: auto;
    margin-bottom: 1em;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
    cursor: pointer;
  }
  th.sorted-asc::after {
    content: " ▲";
    font-size: 0.8em;
  }
  th.sorted-desc::after {
    content: " ▼";
    font-size: 0.8em;
  }
</style>
<table id="monTableau">
<thead style="background-color: #e8e3e3;">
<tr><th style="border: 1px solid #000000; text-align: center;" onclick="trierColonne(this, 0)">Commune</th><th style="border: 1px solid #000000; text-align: center;" onclick="trierColonne(this, 1)">Surfaces (ha)</th><th style="border: 1px solid #000000; text-align: center;" onclick="trierColonne(this, 2)">Stade</th></tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #000000;">Bages</td>
<td style="border: 1px solid #000000; text-align: right;">52,3</td>
<td style="border: 1px solid #000000; text-align: center;">En projet</td>
</tr>
<tr>
<td style="border: 1px solid #000000;">Bizanet</td>
<td style="border: 1px solid #000000; text-align: right;">19,0</td>
<td style="border: 1px solid #000000; text-align: center;">En projet</td>
</tr>
<tr>
<td style="border: 1px solid #000000;">Camplong/Fabrezan</td>
<td style="border: 1px solid #000000; text-align: right;">200,0</td>
<td style="border: 1px solid #000000; text-align: center;">En projet</td>
</tr>
<tr>
<td style="border: 1px solid #000000;">Cavanac</td>
<td style="border: 1px solid #000000; text-align: right;">15,5</td>
<td style="border: 1px solid #000000; text-align: center;">En projet</td>
</tr>
<tr>
<td style="border: 1px solid #000000;">Conilhac-Corbières</td>
<td style="border: 1px solid #000000; text-align: right;">34,0</td>
<td style="border: 1px solid #000000; text-align: center;">En projet</td>
</tr>
</tbody>
</table>
<script>
  let dernierTri = { index: null, asc: true };

  function trierColonne(th, indexColonne) {
    const table = th.closest("table");
    const tbody = table.querySelector("tbody");
    const lignes = Array.from(tbody.rows);

    const asc = dernierTri.index === indexColonne ? !dernierTri.asc : true;
    dernierTri = { index: indexColonne, asc };

    lignes.sort((a, b) => {
      let valA = a.cells[indexColonne].textContent.trim();
      let valB = b.cells[indexColonne].textContent.trim();

      // Tentative de conversion en nombre
      valA = valA.replace(/\s| /g, '').replace(',', '.');
      valB = valB.replace(/\s| /g, '').replace(',', '.');

      valA = isNaN(valA) ? valA : parseFloat(valA);
      valB = isNaN(valB) ? valB : parseFloat(valB);

      return asc
        ? (valA > valB ? 1 : -1)
        : (valA < valB ? 1 : -1);
    });

    lignes.forEach(row => tbody.appendChild(row));

    // Réinitialise les flèches de tri
    table.querySelectorAll("th").forEach(th => {
      th.classList.remove("sorted-asc", "sorted-desc");
    });

    // Applique la bonne flèche
    th.classList.add(asc ? "sorted-asc" : "sorted-desc");
  }
</script>