Cómo ordenar el contenido de una tabla

Añadir columnas ordenables a tus tablas permite a los lectores reordenar el contenido de la tabla haciendo clic en cualquier encabezado de columna. Al hacer clic en un encabezado una vez, ordena ascendente (▴); Al hacer clic de nuevo ordena descendentes (▾). La implementación requiere dos añadidos a tus configuraciones personalizadas de CSS y JavaScript: un fragmento de CSS que estiliza los indicadores de ordenación y un fragmento de JavaScript que gestione la lógica de ordenación.

Cuándo usar tablas ordenables

• Tablas de referencia con muchas filas: la ordenación permite a los lectores encontrar rápidamente la entrada que buscan en lugar de escanear toda la tabla.
• Tablas comparativas: los lectores pueden ordenar por cualquier atributo (precio, nombre, disponibilidad de funcionalidades) para comparar opciones en sus propios términos.
• Artículos con muchos datos: la ordenación reduce la necesidad de que los lectores soliciten una versión filtrada u reordenada de los datos.

Cómo añadir columnas ordenables a tablas

Esto requiere dos pasos: añadir el CSS para los indicadores visuales y luego añadir el JavaScript para la lógica de ordenación.

Añadir el CSS

1. En el portal de la Base de Conocimiento, ve a Configuración > Base de Conocimientos > CSS & JavaScript personalizados.

2. Selecciona la pestaña CSS y pega el siguiente fragmento:

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);
}

3. Haz clic en Guardar.

Añadir el JavaScript

1. En la misma página de configuración personalizada de CSS y JavaScript , selecciona la pestaña JavaScript .
2. Pega el siguiente fragmento:

$( "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);
    });
});

3. Haz clic en Guardar.

Resultado

Tras guardar ambos fragmentos, todas las cabeceras de las tablas en tu sitio de la Base de Conocimientos se vuelven clicables. Al hacer clic en una cabecera, ordenas las filas de la tabla por esa columna. Un indicador de dirección de ordenación aparece en la cabecera activa de la columna.