jQuery se ha perfilado como uno de los métodos más rápidos y sencillos de aplicar efectos de todo tipo a páginas web. En este sentido las clásicas tablas HTML no dejan de beneficiarse de las virtudes de los script jQuery hasta el punto de que puedes convertir una tabla sencilla y simple en algo visualmente muy atractivo e incluso con efectos de animación.
En este artículo recopilamos una serie de plugins jQuery interesantes si estabas pensando mejorar el aspecto de alguna tabla en tus proyectos web de una forma sencilla pero efectiva.
Flexigrid
Flexigrid es un potente plugin que te permite crear tablas jQuery, redimensionar columnas y filas, crear celdas con scroll, cabeceras estáticas e incluso puedes utilizar una fuente XML para proveer de datos a la tabla.
Flexigrid
RowCount jQuery Plugin
Este plugin añade una numeración automática a cada fila de tu tabla.
RowCount jQuery Plugin
Collapser jQuery
Collapser te permite crear listas de elementos que colapsan o que se expanden, ideal para conseguir tablas no muy complejas pero que se comporten de forma dinámica cuando el usuario hace click con el ratón.
Collapser jQuery – Demo
Resaltar filas y columnas en tabla con ‘hover’ cuando el ratón pasa por encima
Al pasar el ratón por encima de filas o columnas se iluminan cambiando de color
Celdas que se cambian de color con hover del ratón – Demo
Tablas paginadas con jQuery
Con este plugin puedes crear tablas paginadas, por ejemplo indicando el número de filas que quieres que se muestren en cada página y paginando cada página sin tener que recargar la página donde esté insertada la tabla.
Tablas paginadas con jQuery
Filtros para tablas
uiTableFilter te permite aplicar filtros a las tablas para seleccionar elementos o para realizar búsquedas.
Filtros para tablas – Demo
jExpand Table
Este plugin para jQuery te permite crear tablas simples con dos columnas, una es la ‘master’ y la otra e la que muestra los detalles.
jExpand Table
Tabla jQuery Drag and Drop
Este plugin te permite reordenar elementos en una tabla simplemente arrastrando y soltando (drag and drop)
Tabla jQuery Drag and Drop
Tablas que se ordenan con jQuery
Con este plugin puedes crear una tabla con columnas que se ordenen alfabéticamente de forma automática.
Tablas que se ordenan con jQuery
Tablas con cabeceras estáticas en jQuery
Con este plugin puedes crear tablas con cabeceras fijas mientras que el contenido de la tabla hace scroll, también puedes definir un pie de tabla opcional.
Fixed Header
Column Manager
Con este plugin puedes crear tablas realmente dinámicas que colapsen o expandan celdas según te interese. Además se guardan las preferencias para la siguiente vez que un visitante vuelve a cargar la página donde está insertada la tabla.
Column Manager – Demo
Tabla animada con jQuery
Este plugin te permite re-ordenar el contenido de una tabla de forma dinámica, por ejemplo, haciendo click sobre la cabecera de una de las columnas los datos se ordenan alfabéticamente. Incluso puedes editar el contenido de las celdas.
Tabla animada con jQuery
Ingrid
Ingrid te permite crear tablas que pueden re-dimensionar sus columnas, paginar resultados de filas, ordenar columnas, aplicar estilos, etc. Bastante potente y con muchas opciones.
Ingrid
CharToTable
Este curioso plugin crea una tabla partiendo de un caracter así que su utilidad final no es la de crear la tabla en sí misma, sino la de crear textos para títulos o rótulos partiendo de tablas.
charToTable – Demo
Data Tables
Data Tables es otro potente plugin que te permite realizar un buen número de opciones diferentes como modificar la anchura de las celdas, filtros y búsquedas por varias columnas simultáneamente o detección de tipos de datos.
Data Tables