Skip to content

Todo para WordPress, el desarrollo web — y mucho más

📊 Creando tablas responsivas en WordPress con wpDataTables

📊 Creando tablas responsivas en WordPress con wpDataTables

Las tablas en WordPress son engañosamente simples. Mientras necesite una o dos cuadrículas estáticas para todo el sitio, el HTML manual es suficiente. Pero en cuanto se enfrenta a actualizaciones periódicas de datos, importaciones desde Excel u Google Sheets u ordenación de columnas, los métodos integrados se convierten en un interminable forcejeo con el código.

Peor aún: su sitio es adaptable, pero las tablas HTML no lo son. En pantallas de móvil se desmoronan, exigen desplazamiento horizontal y rompen toda la maquetación. Añadir interactividad (filtros, búsqueda, edición frontal) con las herramientas estándar de WordPress es prácticamente imposible sin contratar a un desarrollador.

wpDataTables es un plugin que resuelve todos estos problemas con una sola instalación. Sin código, adaptabilidad total desde el primer momento, decenas de fuentes de datos y visualización mediante gráficos. Lo usan más de 80 000 empresas y la versión Lite gratuita se ha instalado más de 60 000 veces en WordPress.org. Analicemos qué puede hacer y cómo trabajar con él.

💡 Resumen rápido:

  • Instale wpDataTables desde CodeCanyon y actívelo en su sitio.
  • Cree una tabla desde CSV, Excel, Google Sheets, MySQL, JSON, XML o manualmente; cualquier fuente funciona.
  • Configure la apariencia: colores, fuentes, alineación, comportamiento adaptable en móviles.
  • Inserte el shortcode resultante en una entrada o página; la tabla aparece de inmediato con filtrado, ordenación y búsqueda.
  • Si lo necesita, construya un gráfico basado en la misma tabla y añádalo del mismo modo.

Qué falla en las tablas HTML en WordPress

La forma estándar de insertar tablas es mediante etiquetas HTML en la pestaña del editor de texto. La estructura básica tiene este aspecto:

1<table style="width: 100%;">
2<tbody>
3<tr>
4<th style="width: 33%;">First</th>
5<th style="width: 34%;">Second</th>
6<th style="width: 33%;">Third</th>
7</tr>
8<tr>
9<td>Jack</td>
10<td>Jackson</td>
11<td>25</td>
12</tr>
13<tr>
14<td>Jane</td>
15<td>Jenson</td>
16<td>30</td>
17</tr>
18</tbody>
19</table>

El resultado es una sencilla tabla de tres columnas. Tiene un aspecto decente si tiene una en su sitio y no piensa actualizarla.

Pero el enfoque presenta tres problemas fundamentales. Primero: las tablas HTML son estáticas. Los datos están incrustados en el código y cada cambio implica volver a editar el código. Segundo: la adaptabilidad. El tema puede ser fluido, pero <table> no lo es. En un teléfono, los usuarios ven columnas cortadas o desplazamiento horizontal. Tercero: sin filtros, sin ordenación, sin búsqueda, solo una cuadrícula inerte.

Su sitio es adaptable. Sus tablas no lo son.

La importación manual de datos desde Excel u Google Sheets tampoco ayuda: copiar y pegar desde hojas de cálculo a WordPress convierte el formato en un caos. Si tiene muchas tablas y se actualizan con frecuencia, pierde tiempo peleándose con la maquetación en lugar de trabajar en el contenido.

Cree tablas sin código con wpDataTables

Interfaz de wpDataTables con una lista de tablas

wpDataTables es un plugin premium que convierte WordPress en un motor completo para trabajar con tablas y gráficos. Ni una sola línea de código. Instálelo, elija una fuente de datos, configure la apariencia y la tabla estará lista para insertar con un shortcode.

El plugin se distribuye a través de CodeCanyon con el modelo de «compre una vez, use para siempre». Los precios parten de 49 $ al año para una licencia de un solo dominio (plan Starter). Hay tres planes superiores: Standard, Pro y Developer, que se diferencian en el número de dominios y en funciones avanzadas como la conexión a múltiples bases de datos y la integración con WooCommerce. La versión Lite gratuita está disponible en el directorio de WordPress.org con funcionalidad básica.

🔗 Más sobre wpDataTables | 🔗 Demo en vivo

Los desarrolladores se centraron en tres aspectos: flexibilidad de fuentes, personalización profunda y trabajo con datos en tiempo real. Repasemos las características clave.

Múltiples fuentes de datos

Selección de la fuente de datos al crear una tabla

El plugin extrae datos de cualquier parte. Excel, CSV, Google Sheets, XML, JSON, arrays PHP serializados y consultas MySQL directas están disponibles al crear una tabla. Puede rellenar manualmente una tabla desde cero a través del editor del backend. O conectarse a una fuente en tiempo real para que la tabla se actualice dinámicamente en cada carga de página.

MySQL merece una mención especial. Usted escribe una consulta y el plugin muestra el resultado como una tabla ordenable con búsqueda. Se admiten conexiones independientes a MS SQL y PostgreSQL, y cada tabla puede extraer datos de su propio servidor. Para proyectos con arquitectura distribuida, esto resuelve el problema de la consolidación de datos sin ETL intermedio.

Personalización avanzada y maquetación adaptable

Ajustes de estilo de tabla: colores y tipografía

El diseño de la tabla se arma con casillas de verificación y selectores de color, sin necesidad de CSS. Las opciones incluyen tipografía, alineación, formatos de fecha y hora, e idioma de la interfaz. Hay temas visuales predefinidos para las tablas: púrpura, oscuro, azul. Para casos complejos, existen campos para JS y CSS personalizados.

La adaptabilidad está implementada sin concesiones. El plugin no se limita a comprimir la tabla al ancho de la pantalla, usted decide cómo se comporta en dispositivos móviles. Puede activar el colapso flexible de columnas, añadir desplazamiento horizontal o limitar el ancho máximo. La tabla se mantiene legible en cualquier dispositivo.

Filtros para una búsqueda eficiente

Interfaz de filtrado de tabla por columnas

Al crear una tabla, usted habilita los filtros y los usuarios obtienen la capacidad de acotar al instante la selección por cualquier columna. Para conjuntos de datos grandes, esto cambia radicalmente la experiencia: en lugar de desplazarse por tres pantallas, la persona ingresa un parámetro y ve solo las filas relevantes.

Los filtros funcionan del lado del servidor. Cada acción del usuario incrementa la carga computacional sobre la base de datos, por lo que el plugin le permite desactivar el filtrado donde sea redundante. El equilibrio entre velocidad y conveniencia se configura por tabla.

Edición MySQL desde el frontend

Ajustes de edición de tabla desde el frontend

Una funcionalidad única: al activar una opción en la pestaña de Edición, usted permite a los usuarios editar los datos directamente desde el frontend del sitio. Esto no es solo cosmético, los cambios se escriben en la base de datos. El acceso se configura por roles: todos los visitantes, solo usuarios registrados o grupos específicos.

Hay muchos escenarios: clientes que actualizan sus registros en una tabla CRM, empleados que marcan el estado de tareas, suscriptores que añaden datos a un registro compartido. Sin panel de administración separado, sin capacitar a los usuarios en WordPress.

Visualización mediante gráficos

Gráfico de ejemplo creado a partir de datos de tabla

Las personas leen las visualizaciones en órdenes de magnitud más rápido que las cifras tabulares. wpDataTables construye gráficos dinámicos basados en Google Charts, HighCharts o Chart.js; usted simplemente especifica la tabla de origen y asigna las columnas a los ejes del gráfico.

Hay más de una docena de tipos de gráfico: líneas, circular, columnas, histograma, dispersión. Tras la configuración, el gráfico obtiene su propio shortcode y se inserta en una entrada de forma independiente a la tabla. Si los datos de origen se actualizan, el gráfico se redibuja automáticamente. Perfecto tanto para blogueros con informes mensuales de ingresos como para paneles corporativos.

Cómo crear una tabla responsiva: guía paso a paso

La teoría está clara, pasemos a la práctica. Tres pasos lo separan de una tabla funcional en su sitio.

Paso 1: instalar wpDataTables

Descarga del plugin desde CodeCanyon en la sección de compras

El plugin se compra en CodeCanyon. Tras el pago, vaya a la sección Descargas de su cuenta, busque wpDataTables y descargue el archivo etiquetado como «Installable WordPress file only». En el administrador de WordPress, vaya a Plugins → Añadir nuevo → Subir plugin, seleccione el ZIP descargado y actívelo.

Para las actualizaciones automáticas, necesitará ingresar el Código de compra del producto de CodeCanyon. También lo necesitará para acceder al soporte premium durante el primer año tras la compra.

Paso 2: crear una tabla

Botón Añadir en el menú de wpDataTables del panel de administración

Un nuevo elemento llamado wpDataTables aparecerá en el menú lateral de WordPress. Haga clic en él y luego en el botón azul Añadir. El plugin le ofrecerá elegir un método de creación de tabla: importar desde CSV/Excel, conectar con Google Sheets, crear manualmente, consulta SQL o enlazar con una API externa.

Carga de un archivo CSV como fuente de datos

Para la demostración, tomemos CSV. Suba el archivo, el plugin reconoce automáticamente los delimitadores y muestra una vista previa. En la siguiente pantalla, establezca el nombre de la tabla y edite las columnas si es necesario: renombre, elimine las innecesarias, añada nuevas.

Pantalla de configuración final de la tabla antes de guardar

La última pantalla es el ajuste fino. Aquí activa las herramientas de tabla (imprimir, copiar, exportar a PDF/Excel), el filtrado y la edición desde el frontend. Todos los cambios se muestran en la vista previa en vivo a la derecha. Hizo clic en Guardar, la tabla está lista.

Paso 3: insertar el shortcode en una entrada o página

Inserción del shortcode de wpDataTables en el contenido de la página

Tras guardar, el plugin le dará un shortcode como [wpdatatable id=X]. Cópielo y péguelo en cualquier entrada o página de WordPress, eso es todo. La tabla aparecerá en el sitio con todas las funciones activadas: ordenación, búsqueda, filtros.

Tabla finalizada con búsqueda y filtros en el sitio

El resultado está en la captura de pantalla anterior: el filtrado está activo, la búsqueda funciona, las columnas se ordenan al hacer clic. Ni una línea de código más allá de un shortcode breve. Usted pasaría una hora construyendo la misma tabla con HTML, y aún así sin interactividad.

Cómo construir un gráfico a partir de una tabla

Botón para crear un gráfico desde una tabla de wpDataTables

Cuando la tabla esté lista, ábrala en la lista y haga clic en Crear un gráfico. Elija un tipo de visualización: columnas, circular, líneas, dispersión, más de una docena de variantes disponibles en total.

Selección de la tabla de origen y asignación de columnas a los ejes del gráfico

En el siguiente paso, especifique la tabla de origen y asigne las columnas a los ejes. Para un gráfico de columnas, necesita al menos dos columnas: categorías y valores. Las columnas numéricas pueden filtrarse con un control deslizante de rango, útil cuando la tabla tiene cientos de filas pero solo necesita mostrar una parte de ellas en el gráfico.

Configuración de la apariencia del gráfico: colores, fuentes, bordes

La tercera pantalla es la de ajustes visuales. Ancho, alto, fondo, bordes, fuentes, colores de las series, etiquetas, información emergente al pasar el cursor. Configurado, guarde, copie el shortcode del gráfico e insértelo en el contenido junto a la tabla o por separado.

Los gráficos están vinculados dinámicamente a la tabla. Si los datos de origen cambian, el gráfico se reconstruye solo. Sin exportar a Excel, actualizar capturas de pantalla manualmente ni otras rutinas.

Extensiones para capacidades adicionales

Lista de extensiones disponibles de wpDataTables

La funcionalidad básica es suficiente para la mayoría de las tareas. Pero si necesita especificidades, el ecosistema de complementos cubre escenarios de nicho.

Filtros potentes. Filtrado en cascada (de izquierda a derecha: categoría seleccionada, filtro de subcategoría se actualiza), búsqueda facetada, ocultación de la tabla hasta que se seleccionen parámetros y búsqueda en vivo mientras escribe. Se habilita con una casilla en los ajustes.

El generador de informes crea documentos Word o Excel directamente desde los datos tabulares. Escenario: los empleados llenaron la tabla a través del frontend, usted hizo clic en un botón, informe mensual listo para imprimir. Útil para hojas de horas, facturas y analíticas periódicas.

Constructor de informes de wpDataTables: configuración de plantilla

Formidable Forms. Los formularios recopilan datos de los usuarios, el plugin convierte automáticamente cada envío en una fila de la tabla. Campo del formulario, columna de la tabla. Sin exportación intermedia.

Gravity Forms. La misma mecánica, pero para el constructor de formularios para WordPress más popular. Tras la integración, Gravity Forms se convierte en una fuente de datos adicional al crear una tabla. Se admite la edición frontal de los registros creados a través de formularios.

Plan de suscripción y precios

wpDataTables tiene una cuadrícula de precios sencilla con cuatro niveles:

Página de precios de wpDataTables: planes Starter, Standard, Pro y Developer

Plan

Dominios

Diferencias clave

Precio (año)

Starter

1

Funciones básicas: tablas, gráficos, importación CSV/Excel/Google Sheets, filtros

$49

Standard

1

Añadido: múltiples conexiones a BD, integración con WooCommerce, tablas desde API

$79

Pro

3

Todo lo de Standard más el generador de informes

$149

Developer

25

Acceso completo a todas las funciones y complementos

$329

Todos los planes incluyen un año de soporte premium y actualizaciones mensuales. La licencia es vitalicia: si no renueva, el plugin sigue funcionando, pero pierde el acceso a actualizaciones y soporte. Hay una garantía de devolución de 15 días.

La mejor forma de evaluar el plugin antes de comprarlo es el sandbox en vivo en el sitio de wpDataTables. Obtiene acceso completo al backend: cree tablas, construya gráficos, experimente con los ajustes. Nada de demos en video ni capturas de pantalla, una prueba de manejo real en el navegador.

Para un inicio rápido, existe una versión Lite gratuita en WordPress.org (más de 60 000 instalaciones activas). La funcionalidad es limitada pero suficiente para entender si el plugin se ajusta a su tarea.

⁉️🤔 Preguntas frecuentes

¿Necesito saber programar para trabajar con wpDataTables?

No, todas las tablas y gráficos se crean a través de una interfaz visual, un asistente lo guiará desde la selección de la fuente hasta la inserción del shortcode. Existen campos para JS y CSS personalizados, pero son opcionales. Los desarrolladores apreciarán la posibilidad de escribir sus propias consultas SQL, conectarse a bases de datos externas y usar la API REST para obtener datos de servicios de terceros.

¿Qué sucede con las tablas después de eliminar el plugin?

Por defecto, las tablas se guardan en la base de datos incluso si desactiva o elimina wpDataTables. Al reinstalarlo, se restaurarán. Esto es configurable: en las opciones puede elegir la eliminación completa de los datos junto con el plugin. Las tablas no están vinculadas permanentemente al plugin, siempre puede exportar los datos a CSV y transferirlos a otra herramienta.

¿En qué se diferencia la versión de pago de la Lite?

La versión Lite permite crear tablas desde CSV, Excel, Google Sheets, JSON y XML, así como manualmente. Están disponibles la ordenación y búsqueda básicas. Pero faltan: consultas MySQL, conexión a múltiples bases de datos, gráficos, edición frontal, filtrado, integración con WooCommerce y todos los complementos. Si gestiona datos de fuentes externas y quiere construir gráficos, necesita la versión de pago. Para tablas estáticas, probablemente Lite sea suficiente.

¿El plugin es compatible con WooCommerce?

Sí, a partir del plan Standard. Puede crear tablas de productos dinámicas que se actualizan automáticamente cuando cambia el catálogo de WooCommerce. Los clientes obtienen una lista de productos ordenable y filtrable con precios y existencias actuales. Para tiendas con surtidos grandes, esto sustituye a un plugin de catálogo independiente.

¿Cuántas tablas puedo crear?

Todas las que necesite. Ningún plan limita el número de tablas y gráficos. La única restricción de la licencia es el número de dominios donde se activa el plugin.

Qué elegir para su tarea

wpDataTables cubre todo el espectro del trabajo con tablas en WordPress, desde la simple salida de CSV hasta consultas distribuidas a bases de datos con visualización mediante gráficos. Y lo hace sin requerir código, algo poco común en el ecosistema WordPress.

Página de inicio de wpDataTables: plugin de tablas y gráficos para WordPress

La mecánica es simple: elija una fuente, configure el diseño, inserte el shortcode. Luego la tabla vive su propia vida: se actualiza cuando la fuente cambia, filtra al clic del usuario, ordena por cualquier columna y se mantiene legible en dispositivos móviles. Ni una línea de HTML, sin maquetación móvil separada.

El plugin es de pago, pero con una prueba gratuita en el entorno de pruebas y una versión Lite para escenarios básicos. El plan inicial de $49 al año equivale aproximadamente a una o dos horas de trabajo de un desarrollador y le proporciona una herramienta para todo el año.

🔗 Descargar la versión Lite desde WordPress.org