Cómo Ordenar una Tabla usando JavaScript

• 26/03/2025

¡Aprende a Ordenar Tablas con JavaScript de Forma Dinámica y Eficiente!

Las tablas HTML son esenciales para mostrar datos organizados en aplicaciones web. Sin embargo, cuando los datos crecen, se vuelve necesario ordenarlos de manera eficiente. En este artículo, aprenderás a ordenar tablas usando JavaScript desde cero, con ejemplos prácticos y explicaciones paso a paso.

Únete a nuestra comunidad de Discord

¿Por Qué Ordenar una Tabla en JavaScript?

Cuando los datos en una tabla no están ordenados, puede ser difícil encontrar información relevante. Ordenar tablas mejora la experiencia del usuario y facilita la lectura de datos.

Beneficios de una Tabla Ordenada en HTML

• - Facilita la comprensión de la información.

• - Permite encontrar datos rápidamente.

• - Mejora la interactividad de la aplicación web.

• - Ayuda a visualizar tendencias en datos.

Casos de Uso en Aplicaciones Web

Algunos casos donde es útil ordenar una tabla:

• - Listas de productos en tiendas online.

• - Tablas de calificaciones en plataformas educativas.

• - Registros de usuarios en aplicaciones de administración.

---

Métodos Para Ordenar Datos en JavaScript

JavaScript nos ofrece varias formas de ordenar datos, según el tipo de información.

Usar el Método Sort en JavaScript para Ordenar Datos

El método sort() permite ordenar arrays de forma sencilla.

let numeros = [4, 2, 9, 1, 5];
numeros.sort((a, b) => a - b);
console.log(numeros); // [1, 2, 4, 5, 9]

Ordenar un Array de Objetos en JavaScript

Cuando tenemos datos más complejos, podemos ordenar arrays de objetos.

let usuarios = [
  { nombre: "Ana", edad: 25 },
  { nombre: "Luis", edad: 20 },
  { nombre: "Carlos", edad: 30 }
];

usuarios.sort((a, b) => a.edad - b.edad);
console.log(usuarios);

Cómo Ordenar JSON en JavaScript

Si los datos provienen de una API, podemos ordenar un JSON así:

fetch('https://api.ejemplo.com/usuarios')
  .then(response => response.json())
  .then(data => {
    let ordenado = data.sort((a, b) => a.nombre.localeCompare(b.nombre));
    console.log(ordenado);
  });

---

Implementando la Función para Ordenar una Tabla HTML con JavaScript

Para ordenar una tabla, necesitamos manipular el DOM.

Crear una Tabla Dinámica en JavaScript

<table id="miTabla">
  <thead>
    <tr>
      <th onclick="ordenarTabla(0)">Nombre</th>
      <th onclick="ordenarTabla(1)">Edad</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Juan</td><td>28</td></tr>
    <tr><td>Ana</td><td>25</td></tr>
    <tr><td>Carlos</td><td>30</td></tr>
  </tbody>
</table>

Ordenar una Tabla por Columna en JavaScript

function ordenarTabla(columna) {
    let tabla = document.getElementById("miTabla"); // Obtener la tabla por ID
    let filas = Array.from(tabla.rows).slice(1); // Convertir las filas en un array, excluyendo la fila de encabezado
    let ordenAscendente = tabla.dataset.orden === "asc" ? false : true; // Verificar el estado del orden actual

    filas.sort((a, b) => {
        let valorA = a.cells[columna].innerText.trim(); // Obtener el contenido de la celda en la columna seleccionada
        let valorB = b.cells[columna].innerText.trim(); 

        // Si los valores son numéricos, convertirlos antes de comparar
        if (!isNaN(valorA) && !isNaN(valorB)) {
            return ordenAscendente ? valorA - valorB : valorB - valorA;
        }

        // Si son texto, utilizar localeCompare para comparación alfabética
        return ordenAscendente ? valorA.localeCompare(valorB) : valorB.localeCompare(valorA);
    });

    // Reinsertar las filas ordenadas en la tabla
    filas.forEach(fila => tabla.appendChild(fila));

    // Guardar el estado del orden (ascendente o descendente)
    tabla.dataset.orden = ordenAscendente ? "asc" : "desc";
}

Añadir Botones para Ordenar una Tabla con JavaScript

<button onclick="ordenarTabla(0)">Ordenar por Nombre</button>
<button onclick="ordenarTabla(1)">Ordenar por Edad</button>

---

Código Práctico: Ejemplo Paso a Pas

A continuación, vamos a construir una tabla HTML y aplicar JavaScript para ordenarla de forma dinámica. Este ejemplo te guiará paso a paso desde la estructura básica hasta la implementación de la función de ordenación.

HTML y CSS para la Estructura de la Tabla

Comenzamos creando una tabla sencilla con datos ficticios. Agregaremos algunos estilos básicos con CSS para mejorar su apariencia.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordenar Tabla con JavaScript</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f4f4f4;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h2>Tabla de Datos</h2>
    <table id="miTabla">
        <thead>
            <tr>
                <th onclick="ordenarTabla(0)">Nombre</th>
                <th onclick="ordenarTabla(1)">Edad</th>
                <th onclick="ordenarTabla(2)">Ciudad</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Juan</td>
                <td>25</td>
                <td>Madrid</td>
            </tr>
            <tr>
                <td>Ana</td>
                <td>30</td>
                <td>Barcelona</td>
            </tr>
            <tr>
                <td>Luis</td>
                <td>22</td>
                <td>Sevilla</td>
            </tr>
        </tbody>
    </table>

    <script>
        function ordenarTabla(columna) {
            let tabla = document.getElementById("miTabla");
            let filas = Array.from(tabla.rows).slice(1); // Excluir la fila de encabezados
            let ordenAscendente = tabla.dataset.orden === "asc" ? false : true;

            filas.sort((a, b) => {
                let valorA = a.cells[columna].innerText.trim();
                let valorB = b.cells[columna].innerText.trim();

                // Si los valores son números, convertirlos antes de comparar
                if (!isNaN(valorA) && !isNaN(valorB)) {
                    return ordenAscendente ? valorA - valorB : valorB - valorA;
                }

                return ordenAscendente ? valorA.localeCompare(valorB) : valorB.localeCompare(valorA);
            });

            // Reordenar las filas en la tabla
            filas.forEach(fila => tabla.appendChild(fila));

            // Guardar el estado del orden actual
            tabla.dataset.orden = ordenAscendente ? "asc" : "desc";
        }
    </script>

</body>
</html>

Explicación del Código

1. Estructura HTML:

   • - Se crea una tabla con tres columnas: Nombre, Edad y Ciudad.

   • - Cada encabezado <th> tiene un onclick que llama a la función ordenarTabla(columna).

2. CSS Básico:

   • - Se aplican estilos a la tabla y los encabezados para que sean más visuales.

   • - Se añade cursor: pointer; a los <th> para indicar que son interactivos.

3. Función ordenarTabla(columna):

   • - Convierte las filas en un array y las ordena según la columna seleccionada.

   • - Si los datos son numéricos, los convierte a números antes de ordenarlos.

   • - Si son cadenas de texto, los ordena alfabéticamente con localeCompare().

   • - Al hacer clic nuevamente en el mismo encabezado, cambia el orden de ascendente a descendente.

---

Conclusión

Ordenar tablas en JavaScript mejora la organización y usabilidad de nuestras aplicaciones. Hemos aprendido:

• - Diferentes métodos para ordenar datos.

• - Cómo aplicar sort() a arrays y objetos JSON.

• - Cómo hacer que una tabla HTML sea interactiva con JavaScript.

Ahora puedes implementar esto en tus proyectos y mejorar la interactividad de tus tablas. ¡Prueba el código y experimenta!