Las tablas son uno de los elementos más antiguos del lenguaje HTML que se ha mantenido a lo largo de los años. Incluso se llegó a emplear tanto para organizar contenido como para crear una layout. Por supuesto, esta es una práctica que ya no se emplea pues existen propiedades CSS que permiten la creación de layouts responsive. Sin embargo, las tablas se siguen empleando en la web para un único propósito: mostrar información de forma organizada.
Para poder añadir mayor funciones o características tu tabla creada en HTML, te listamos algunos plugins jQuery que te facilitarán este trabajo.
Dynatable
Dynatable es una tabla interactiva que hace uso de jQuery, HTML5 y JSON. Con Dynatble puedes crear tablas que admiten características como paginación, clasificación y filtro de elementos.
Dynatable escanea tablas HTML y estandariza los datos en elementos JSON. Al hacer este proceso cada colección JSON puede ser clasificada. Por último, renderiza los resultados en el DOM en la tabla respectiva.
Dynatable es un poderoso plugin dirigido a desarrolladores experimentados pues te da un amplio control sobre la renderización y operaciones de búsqueda.
resTables
resTables es un plugin jQuery que te permite añadir características responsive a tu tabla. Ha sido creada en base a otro plugin llamado stackable.js
Puedes descargar el plugin desde la página oficial o instalarlo mediante npm.
DataTables
DataTables es un plugin jQuery flexible que te permite realizar configuraciones avanzadas en tablas HTML. Posee una serie de características que la convierten en una herramienta poderosa, pero algo complicada de manejar por lo que va dirigida a desarrolladores experimentados.
Con DataTables puedes añadir paginación, búsqueda automática y organización de elementos de columna. Asimismo, puedes aplicar diversos temas a tu tabla como Bootstrap o Foundation.
Tabulator
Tabulator es un plugin jQuery ligero para generar tablas. Con Tabulator puedes crear tablas interactivas en cuestión de segundos tomando como base una tabla HTML, array de JavaScript, datos AJAX o JSON. Incluye además una serie de clases CSS para que puedas modificar el aspecto de tus tablas.
FancyGrid
FancyGrid posee varias opciones para crear tablas con diversas funciones y características, ya sea que estés buscando crear una tabla estándar y sencilla o una que posea paginación y filtros, FancyGrid es la solución perfecta.
Puedes usar FancyGrid para aplicar estilos a tus tablas, añadir nuevas funciones o integrarlo con Highcharts para añadir visualización gráfica de datos.
FooTable
FooTable es un plugin jQuery responsive para poder crear tablas en Bootstrap, aunque también funciona sin necesidad de usar esta framework. FooTable permite filtro y clasificación de elementos. Al igual que varios de los plugins mencionados previamente va dirigido a desarrolladores que tengan conocimiento sobre eventos y otro tipo de configuraciones avanzadas. Sin embargo, también puede ser usado como una tabla sencilla por desarrolladores principiantes.
Tabella
Tabella es un plugin para generar tablas dinámicas. Una de sus principales características es que admite gestos táctiles. Para crear tablas con este plugin debes seleccionar el elemento que quieres usar como contenedor e ingresar la información como un objeto.
Tabella, como es de esperarse, es de diseño responsive. Contiene opciones básicas y es ideal si quieres asegurarte que tu tabla se vea bien en dispositivos móviles.
Dynamic Table
Dynamic Table te permite crear tablas para mostrar información de forma similar a una hoja de cálculo. Con Dynamic Table tienes control sobre la edición y guardado de tu tabla, admite filtros y clasificación de elementos. Puedes cargar datos mediante AJAX y manejar eventos.
getTable
getTable es un plugin jQuery sencillo para marcar las celdas de una tabla, ya sea que estén ubicadas en líneas horizontales, verticales o la intersección entre ambas. getTable diferencia entre las celdas que se encuentran en líneas verticales y horizontales y devuelve un objeto jQuery para que puedas modificarlo como mejor te parezca.
La tabla es analizada mediante DOM, de esta manera se asegura su rapidez. También guarda en caché los datos encontrados.
KingTable
KingTable te permite crear tablas con paginación y búsqueda, tanto de lado de servidor como de cliente. También puedes incluir filtros, menú automático para esconder columnas. Puedes exportar la tabla en CSV, JSON y XML.
KingTable es un plugin que te permite crear condiciones de búsqueda avanzadas y que puedes personalizar a tu gusto. Ya que puedes crear tus propios mecanismo para manejado de datos, es recomendable que seas un desarrollador experimentado para poder sacar mayor provecho de este plugin.
HighchartTable
HighchartTable te permite convertir tablas HTML a gráficos estadísticos. Este plugin hace uso de los atributos del HTML5 para especificar cómo es que una tabla será renderizada. Los gráficos resultantes de las tablas también pueden ser personalizados para que puedas colocarlos en un estilo que vaya acorde al diseño de tu sitio web.
Columns
Columns es un plugin jQuery que convierte datos JSON en tablas HTML donde se puede buscar y organizar información, así como incluir paginación. Es un plugin sencillo de usar donde solo debes ingresar los datos y Columns se encargará del resto.
StickySort
StickySort es un plugin jQuery que te permite crear encabezados y columnas que se mantienen siempre visibles en tus tablas. El plugin fue parte de un proyecto de trabajo donde se pedía justamente esto: mantener los encabezados de cada tabla visibles siempre. Como te habrás podido imaginar, es un plugin de gran utilidad cuando se trabaja con tablas que contienen una gran cantidad de datos.
Dragtable
Dragtable es un plugin jQuery que te permite reordenar columnas de una tabla mediante la función drag and drop, de modo que sólo debes seleccionar la columna en cuestión e intercambiarla de lugar. Esta es una función que puede añadir mayor interactividad en tus tablas.
Dragtable es el resultado de la curiosidad del desarrollador por añadir características de arrastre en una tabla.
En conclusión…
Existen diversas soluciones para generar tablas de forma sencilla mediante jQuery, así como varios plugins con diferentes propósitos que te permiten añadir características avanzadas y en muchos casos, únicas a tus tablas creadas en HTML. Esperamos que alguno de los plugins jQuery mencionados te sea especialmente útil en tu próximo proyecto.
