← Toda la documentación

Ordenación de tablas y números de fila

Ordena las filas de una tabla por la columna donde está el cursor, añade una columna de números de fila que se renumera automáticamente y mueve filas y columnas desde los menús de tabla o arrastrando una columna. Los números, importes, fechas y textos se ordenan como se espera.

Una tabla de pedidos ordenada por Total de mayor a menor, con una columna # que numera las filas del 1 al 4, mientras se arrastra la columna Date por su control y una línea azul señala dónde se soltará, justo después de la columna #
Ordenada por Total de mayor a menor, con números de fila añadidos. Se está arrastrando la columna Date con el control situado encima; la línea azul indica dónde se soltará.

Cómo activarlo

Esta función la ofrece el plugin tabletools.js (también incluido en plugins/all_plugins.js). Añade "Move Row Up" y "Move Row Down" al menú de filas de la tabla, y "Move Column Left" y "Move Column Right" al de columnas. La ordenación y los números de fila no tienen botón en la barra; llámalos desde tus propios botones, desde el menú "/" (plugin de comandos con barra) o desde 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>

Los botones actúan en la tabla y la columna donde se colocó el cursor por última vez.

Opciones

OpciónValor predeterminadoFunción
tableNumberSeries"numeric"Etiquetas para los números de fila: numeric, upper-alpha, lower-alpha, upper-roman o lower-roman.
tableNumberHeader"#"Texto de la celda de la columna numérica en las filas de encabezado. Las tablas sin fila de encabezado no reciben una celda de encabezado.
tableColumnDragtruefalse elimina el control para arrastrar una columna.
tableRowDragtruefalse elimina el control de fila (consulta Aspectos a tener en cuenta).

Ordenación

  • El tipo de cada columna se detecta a partir de sus celdas. Una columna de $1,240.00, $95.50 y (500) se ordena como números (los paréntesis contables indican valores negativos), una columna de fechas se ordena por fecha y cualquier otra como texto, comparando por su valor los números que contiene.
  • Las celdas vacías van al final en ambas direcciones. Los valores iguales conservan su orden, por lo que funciona ordenar por una columna y luego por otra.
  • Las filas de <thead> y <tfoot> nunca se mueven, ni tampoco una primera fila formada solo por celdas <th> .
  • Una tabla con celdas combinadas (rowspan o colspan en su cuerpo) no se ordena. La llamada devuelve { ok: false, reason: "This table has merged cells. …" }.

Métodos: editor.sortTableAtCaret("asc" | "desc"), editor.sortTableByColumn(index, "asc" | "desc") para la tabla donde está el cursor, y editor.canSortTable(). Una ordenación devuelve { ok, reason, sortedBy, direction, detectedType }. editor.execCommand("sorttable") también ordena, pero siempre de forma ascendente en 2.6.12: no se transmite el valor del comando, así que usa sortTableAtCaret("desc") para ordenar de forma descendente.

Números de fila y movimiento

editor.execCommand("tablerownumbers") añade o elimina la columna numérica; editor.addTableRowNumbers({ series: "lower-roman" }), editor.removeTableRowNumbers() y editor.hasTableRowNumbers() lo hacen desde un script. Los números son posicionales: después de ordenar o mover, la fila 1 es la que está arriba.

La barra flotante de la tabla con el menú de filas abierto, que enumera Insert Row Above, Insert Row Below, Delete Row, Move Row Up y Move Row Down
El menú de filas con los dos comandos de movimiento que añade este plugin.

Las filas se mueven dentro de su sección y las de encabezado permanecen en su sitio. editor.moveTableRow(-1 | 1) y editor.moveTableColumn(-1 | 1) hacen lo mismo que los comandos de menú. La columna numérica siempre permanece en primer lugar. Un movimiento es un paso de deshacer.

Aspectos a tener en cuenta

  • Marcado guardado con números de fila:
    <table data-rte-rownum-series="upper-alpha"><tbody><tr><td data-rte-rownum="value">A</td><td>a</td><td>10</td></tr>…
    Los números son celdas normales, por lo que están en el HTML guardado y son visibles en todas partes. Los sanitizadores deben conservar los atributos data-rte-rownum y data-rte-rownum-series o el editor tratará la columna como datos normales la próxima vez.
  • En 2.6.12, el control de fila no aparece en un editor colocado de forma normal (su posición se calcula con coordenadas incorrectas). Mueve las filas con el menú de filas, moveTableRow()o con Alt+ArrowUp / Alt+ArrowDown del editor. El control de columna funciona.
  • Alt+ArrowUp / Alt+ArrowDown los gestiona el propio editor y no renumeran la columna numérica. Los números se corrigen con la siguiente ordenación o movimiento desde el menú.
  • La ordenación y el movimiento se rechazan en el modo de sugerencias (control de cambios), y no hacen nada cuando el editor es de solo lectura o solo comentarios.

Relacionado: demo de compatibilidad con tablas, cursor entre bloques, demo de comandos con barra.