Tri des tableaux et numérotation des lignes

Triez les lignes selon la colonne où se trouve le curseur, ajoutez une colonne de numéros qui se renumérote automatiquement, et déplacez lignes et colonnes depuis les menus ou en faisant glisser une colonne. Nombres, montants, dates et texte sont triés selon les conventions attendues.

Un tableau de commandes trié par Total décroissant, avec une colonne # numérotant les lignes de 1 à 4 ; la colonne Date est déplacée par sa poignée et une ligne bleue indique sa destination juste après # — Tri par Total décroissant, avec numéros de lignes ajoutés. La colonne Date est déplacée par sa poignée supérieure ; la ligne bleue indique où elle sera déposée.

Activation

Cette fonctionnalité est fournie par le plugin tabletools.js (également inclus dans plugins/all_plugins.js). Il ajoute « Move Row Up » et « Move Row Down » au menu des lignes, et « Move Column Left » et « Move Column Right » au menu des colonnes. Le tri et la numérotation n’ont pas de bouton dans la barre ; appelez-les depuis vos boutons, le menu « / » (plugin de commandes slash) ou un script.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/tabletools.js"></script>

<div id="editor"><table><tbody><tr><td>b</td><td>2</td></tr><tr><td>a</td><td>10</td></tr><tr><td>c</td><td>9</td></tr></tbody></table></div>
<button type="button" onclick="editor.sortTableAtCaret('asc')">Sort A-Z</button>
<button type="button" onclick="editor.sortTableAtCaret('desc')">Sort Z-A</button>
<button type="button" onclick="editor.execCommand('tablerownumbers')">Row numbers</button>
<script>
var editor = new RichTextEditor("#editor", {
    tableNumberSeries: "upper-alpha",
    tableNumberHeader: "Row"
});
</script>

Les boutons agissent sur le tableau et la colonne où le curseur a été placé en dernier.

Options

Option	Valeur par défaut	Fonctionnement
`tableNumberSeries`	`"numeric"`	Libellés des numéros de lignes : `numeric`, `upper-alpha`, `lower-alpha`, `upper-roman` ou `lower-roman`.
`tableNumberHeader`	`"#"`	Texte de la cellule de numérotation dans les lignes d’en-tête. Les tableaux sans ligne d’en-tête n’en reçoivent pas.
`tableColumnDrag`	`true`	`false` retire la poignée de déplacement des colonnes.
`tableRowDrag`	`true`	`false` retire la poignée des lignes (voir « À savoir »).

Tri

Le type de chaque colonne est détecté à partir des cellules. Une colonne de $1,240.00, $95.50 et (500) est triée comme des nombres (les parenthèses comptables indiquent une valeur négative), une colonne de dates par date, et le reste comme du texte dont les nombres internes sont comparés par valeur.
Les cellules vides vont en bas dans les deux sens. Les valeurs égales gardent leur ordre : on peut donc trier par une colonne puis une autre.
Les lignes dans <thead> et <tfoot> ne bougent jamais, ni une première ligne composée uniquement de cellules <th>.
Un tableau contenant des cellules fusionnées (rowspan ou colspan dans son corps) n’est pas trié. L’appel renvoie { ok: false, reason: "This table has merged cells. …" }.

Méthodes : editor.sortTableAtCaret("asc" | "desc"), editor.sortTableByColumn(index, "asc" | "desc") pour le tableau au niveau du curseur, et editor.canSortTable(). Un tri renvoie { ok, reason, sortedBy, direction, detectedType }. editor.execCommand("sorttable") trie également, mais toujours dans l’ordre croissant en 2.6.12 : la valeur de la commande n’est pas transmise. Utilisez donc sortTableAtCaret("desc") pour l’ordre décroissant.

Numérotation et déplacements

editor.execCommand("tablerownumbers") ajoute ou retire la colonne de numéros ; editor.addTableRowNumbers({ series: "lower-roman" }), editor.removeTableRowNumbers() et editor.hasTableRowNumbers() le font depuis un script. Les numéros indiquent les positions : après un tri ou déplacement, la ligne 1 est celle du haut.

La barre flottante du tableau avec le menu des lignes ouvert : Insert Row Above, Insert Row Below, Delete Row, Move Row Up et Move Row Down — Le menu des lignes avec les deux commandes de déplacement ajoutées par ce plugin.

Les lignes se déplacent dans leur section et les lignes d’en-tête restent fixes. editor.moveTableRow(-1 | 1) et editor.moveTableColumn(-1 | 1) font la même chose que les commandes des menus. La colonne de numéros reste toujours la première. Un déplacement constitue une étape d’annulation.

À savoir

Balisage enregistré avec numéros de lignes :
```
<table data-rte-rownum-series="upper-alpha"><tbody><tr><td data-rte-rownum="value">A</td><td>a</td><td>10</td></tr>…
```
Les numéros sont des cellules ordinaires : ils figurent donc dans le HTML enregistré et sont visibles partout. Les filtres de nettoyage doivent conserver les attributs data-rte-rownum et data-rte-rownum-series, sinon l’éditeur traitera la colonne comme des données ordinaires au prochain chargement.
Dans la version 2.6.12, la poignée des lignes n’apparaît pas dans un éditeur placé normalement (sa position est calculée dans de mauvaises coordonnées). Déplacez les lignes avec leur menu, moveTableRow(), ou Alt+Flèche haut / Alt+Flèche bas de l’éditeur. La poignée des colonnes fonctionne.
Alt+Flèche haut / Alt+Flèche bas sont gérés par l’éditeur lui-même et ne renumérotent pas la colonne. Les numéros sont corrigés au prochain tri ou déplacement par menu.
Le tri et le déplacement sont refusés en mode suggestion (suivi des modifications) et ne font rien en lecture seule ou en mode commentaires uniquement.

Voir aussi : démonstration des tableaux, curseur entre les blocs, démonstration des commandes slash.