Ordenar tablas HTML con JavaScript

Hace tiempo les recomendaba 10 plugins jQuery para utilizar con tablas, sin embargo puede ocurrir que tengamos la simple necesidad de ordenar tablas y no estemos interesados en agregar el framework jQuery a nuestro proyecto, para estos casos una excelente solución es Sortable.

Sortable es una biblioteca escrita con JavaScript para incorporar la capacidad de ordenamiento a tablas HTML, su principal característica es la de no tener dependencias, simplemente instalamos el recurso a nuestro proyecto y tendremos las tablas ordenadas por campo.

ordenar tablas HTML con javascript

Sortable responde a una tendencia que pude apreciar en los proyectos más nuevos que estoy probando y es la de utilizar soluciones que no tengan ninguna dependencia, en sitios populares como Github se puede ver como los proyectos del tipo standalone cobran cada día más fuerza. Probablemente esto sea el reflejo de la necesidad de los programadores y diseñadores de crear aplicaciones y sitios web cada vez más livianos, esto potenciado por el uso cada día más importante de los teléfonos móviles como dispositivos de navegación.

Utilizar este muy buen recurso, que tiene un peso menos a los 2b, es muy sencillo.

Ejemplo de tabla HTML ordenada con JavaScript

Primero agregamos los estilos y bibliotecas necesarias a nuestro proyecto.

<link rel="stylesheet" href="sortable-theme-dark.css" />
<script src="sortable.min.js"></script>

Luego agregamos la clase a nuestra tabla HTML:

<table class="sortable-theme-dark" data-sortable>
    <!-- ... -->
</table>

A destacar es que Sortable cuenta con themes visuales que se pueden personalizar fácilmente mediante el uso de CSS.

Categorizado en: