Ordenação de tabelas e números de linha

Ordene as linhas de uma tabela pela coluna em que o cursor está, adicione uma coluna de números de linha que se renumera sozinha e mova linhas e colunas pelos menus de tabela ou arrastando uma coluna. Números, valores monetários, datas e texto são ordenados cada um do jeito que as pessoas esperam.

Ordenada por Total, do maior para o menor, com números de linha adicionados. A coluna Date está sendo arrastada pela alça acima dela; a linha azul mostra onde ela será solta.

Ative o recurso

O recurso é o plugin tabletools.js (também incluído em plugins/all_plugins.js). Ele adiciona "Move Row Up" e "Move Row Down" ao menu de linha da tabela e "Move Column Left" e "Move Column Right" ao menu de coluna. A ordenação e os números de linha não têm botão na barra de ferramentas; chame-os a partir dos seus próprios botões, do menu "/" (plugin de comandos de barra) ou por 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>

Os botões agem sobre a tabela e a coluna em que o cursor foi posicionado por último.

Opções

Opção	Padrão	O que faz
`tableNumberSeries`	`"numeric"`	Rótulos dos números de linha: `numeric`, `upper-alpha`, `lower-alpha`, `upper-roman` ou `lower-roman`.
`tableNumberHeader`	`"#"`	Texto da célula da coluna de números nas linhas de cabeçalho. Tabelas sem linha de cabeçalho não recebem célula de cabeçalho.
`tableColumnDrag`	`true`	`false` remove a alça que arrasta uma coluna.
`tableRowDrag`	`true`	`false` remove a alça de linha (veja O que você precisa saber).

Ordenação

O tipo de cada coluna é detectado a partir das células. Uma coluna com $1,240.00, $95.50 e (500) é ordenada como números (parênteses contábeis indicam valor negativo), uma coluna de datas é ordenada por data, e qualquer outra coisa como texto, com os números dentro dele comparados pelo valor.
As células vazias vão para o fim nas duas direções. Valores iguais mantêm a ordem; assim, ordenar por uma coluna e depois por outra funciona.
As linhas em <thead> e <tfoot> nunca se movem, nem uma primeira linha formada apenas por células <th>.
Uma tabela com células mescladas (rowspan ou colspan no corpo) não é ordenada. A chamada retorna { ok: false, reason: "This table has merged cells. …" }.

Métodos: editor.sortTableAtCaret("asc" | "desc"), editor.sortTableByColumn(index, "asc" | "desc") para a tabela na posição do cursor, e editor.canSortTable(). Uma ordenação retorna { ok, reason, sortedBy, direction, detectedType }. editor.execCommand("sorttable") também ordena, mas sempre em ordem crescente na 2.6.12: o valor do comando não é repassado; por isso, use sortTableAtCaret("desc") para a ordem decrescente.

Números de linha e movimentação

editor.execCommand("tablerownumbers") adiciona ou remove a coluna de números; editor.addTableRowNumbers({ series: "lower-roman" }), editor.removeTableRowNumbers() e editor.hasTableRowNumbers() fazem isso por script. Os números são posicionais: depois de uma ordenação ou de uma movimentação, a linha 1 é a que estiver no topo.

A barra de ferramentas flutuante da tabela com o menu de linha aberto, listando Insert Row Above, Insert Row Below, Delete Row, Move Row Up e Move Row Down — O menu de linha com os dois comandos de movimentação que este plugin adiciona.

As linhas se movem dentro da sua seção, e as linhas de cabeçalho ficam onde estão. editor.moveTableRow(-1 | 1) e editor.moveTableColumn(-1 | 1) fazem o mesmo que os comandos do menu. A coluna de números sempre continua em primeiro lugar. Uma movimentação é uma única etapa de desfazer.

O que você precisa saber

Marcação salva com números de linha:
```
<table data-rte-rownum-series="upper-alpha"><tbody><tr><td data-rte-rownum="value">A</td><td>a</td><td>10</td></tr>…
```
Os números são células comuns; por isso, estão no HTML salvo e aparecem em qualquer lugar. Os sanitizadores precisam manter os atributos data-rte-rownum e data-rte-rownum-series, ou o editor trata a coluna como dados normais na próxima vez.
Na 2.6.12, a alça de linha não aparece em um editor posicionado normalmente (a posição dela é calculada nas coordenadas erradas). Mova as linhas pelo menu de linha, por moveTableRow() ou com Alt+ArrowUp / Alt+ArrowDown do editor. A alça de coluna funciona.
Alt+ArrowUp / Alt+ArrowDown são tratados pelo próprio editor e não renumeram a coluna de números. Os números são corrigidos pela próxima ordenação ou movimentação pelo menu.
A ordenação e a movimentação são recusadas no modo de sugestão (controle de alterações) e não fazem nada quando o editor está somente leitura ou só de comentários.

Relacionados: demonstração de suporte a tabelas, cursor de lacuna, demonstração de comandos de barra.