---
title: "Cómo ordenar el contenido de una tabla"
slug: "how-to-sort-the-contents-of-a-table"
description: "Sorting is a great option to have when you provide data artifacts in the table. "
tags: ["Customization"]
updated: 2026-06-22T08:48:10Z
published: 2026-06-22T08:48:10Z
canonical: "docs.document360.com/how-to-sort-the-contents-of-a-table"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

 NOTA

Esta implementación se aplica a **todas las tablas** de tu sitio de Base de Conocimiento. La ordenación se activa cuando el lector hace clic en cualquier encabezado de columna. El icono de ordenación en el encabezado indica la dirección de ordenación actual — ascendente (▴) o descendente (▾).

---

## 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**.

![Knowledge base site settings page showing the Custom CSS and JavaScript option in the left navigation.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Custom%20css%20&%20js.png)

1. 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);
}
```

1. Haz clic **en Guardar**.

![Custom CSS editor showing the sort table CSS snippet pasted in the CSS tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Sort%20table%20content%20-%20custom%20css.png)

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

1. Haz clic **en Guardar**.

![Custom JavaScript editor showing the sort table JavaScript snippet pasted in the JavaScript tab with the Save button visible.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Sort%20table%20content%20-%20custom%20js.png)

---

## 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.

![Knowledge Base site table showing clickable column headers with ascending sort indicator applied to the active column.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-sort_the_contents_of_a_table.png)