¿El mejor complemento de tablas y gráficos de WordPress?

¿Necesita una forma de mostrar datos, tablas o gráficos en su sitio de WordPress? En nuestra revisión práctica de wpDataTables, vamos a echar un vistazo a una de las soluciones más poderosas para tablas simples o complejas.

En general, wpDataTables es uno de los complementos de tablas y gráficos más flexibles que encontrará. Puede importar o sincronizar datos de toneladas de fuentes diferentes, incluidas Excel, Hojas de cálculo de Google, CSV, JSON, la base de datos de su sitio de WordPress, bases de datos externas y más. Si es necesario, puede crear una variedad de gráficos a partir de cualquiera de sus tablas.

O, con el nuevo generador de tablas simples, puede diseñar tablas visuales simples, como tablas de comparación de productos o tablas de precios.

Lo mejor de todo es que las interfaces de usuario son excelentes tanto en el frontend como en el backend, lo que proporciona una gran experiencia para sus visitantes y también le facilita el trabajo con sus tablas y gráficos.

En general, creo que el complemento wpDataTables es bastante bueno en lo que hace, por lo que nuestra revisión de wpDataTables en general será bastante positiva.

En las secciones prácticas a continuación, resaltaré las características clave en wpDataTables y le mostraré cómo funciona todo para que pueda comprender de dónde proviene esa positividad.

Nota : originalmente publicamos esta revisión en 2018, pero la actualizamos por completo en octubre de 2021 para tener en cuenta las nuevas funciones y los cambios en la interfaz de wpDataTables.

Revisión de wpDataTables: una mirada rápida a las características

En primer lugar, todas las tablas y gráficos que cree con wpDataTables son receptivos . Lo sé: "responsivo" no es realmente algo sexy en 2021. Pero te sorprendería la cantidad de complementos de tabla que no manejan bien el diseño receptivo, por lo que en realidad es un gran beneficio. Puede configurar sus propios puntos de interrupción personalizados y ocultar columnas específicas en tabletas/dispositivos móviles.

Otra cosa que le gustará de wpDataTables es la cantidad de formas que le brinda para crear tablas y/o importar contenido. Puedes:

• Crear tablas desde cero
• Vincule una tabla a una fuente externa , como Excel, Google Sheets, JSON, SQL query, PHP array, etc. Los datos se actualizarán a medida que cambie el archivo fuente .
• Importe desde una fuente externa , como Excel o Google Sheets. A diferencia de la anterior, esta es una importación única . Los datos no se sincronizan.
• Use un generador de consultas de base de datos para agregar contenido de WordPress a su tabla, como publicaciones, taxonomías, postmeta, etc.
• Utilice una consulta MySQL para extraer datos de su propia base de datos externa .

Si bien no estoy seguro de cómo probarlo, wpDataTables afirma que puede manejar tablas grandes, incluso en millones de filas.

Para editar los datos de su tabla, puede usar un editor similar a Excel donde simplemente hace clic y escribe en los campos. O bien, puede usar un editor "estándar" que le permite editar filas enteras en una ventana emergente.

Para tablas más simples, wpDataTables también lanzó recientemente un generador de "tablas simples". Puede usar esto para crear más tablas visuales, como tablas de comparación de productos, tablas de precios, etc. Básicamente, tablas en las que no necesita trabajar con toneladas de datos, pero sí desea tener más control sobre el diseño.

Más allá de eso, obtiene toneladas de configuraciones para controlar cómo se ven y funcionan sus tablas, que incluyen:

• Formato condicional
• Edición de tablas de front-end
• Ordenar opciones
• Funcionalidad de filtro (incluido un widget dedicado)
• Opción de búsqueda
• Opciones de front-end para exportar tablas a Excel o CSV
• Opciones de front-end para imprimir una tabla

Y oh sí, ¡wpDataTables no es solo para tablas! También puede usarlo para convertir cualquiera de sus tablas en un gráfico atractivo. Puede elegir entre una gran variedad de tipos de gráficos y sus gráficos se actualizarán automáticamente cuando cambie los datos en la tabla. Aquí hay una lista parcial de algunos de los tipos de gráficos:

• Gráfico de linea
• Gráfico de barras
• Gráfico de columnas
• gráfico de área
• Gráfico circular
• gráfico de anillos
• Histograma
• Gráfico de calibre
• gráfico de dispersión
• Gráfico de velas

Si desea ver las tablas y gráficos en acción, puede ver algunas demostraciones aquí.

Práctica con wpDataTables: ocho cosas que te gustarán

Ok, ahora vamos a ponernos manos a la obra con wpDataTables y te mostraré cómo funcionan realmente esas características. Cubriré esto de forma lineal para que también pueda ver cómo es crear tablas y gráficos con wpDataTables.

1. Asistente del constructor de tablas

Para ayudarlo a crear sus tablas, wpDataTables le brinda un asistente de construcción de tablas bien diseñado.

Primero, elegirá de dónde desea obtener los datos de su tabla. Puede ver las seis opciones que mencioné anteriormente: cinco de las opciones se centran en tablas de datos, mientras que también obtiene la nueva opción de "tabla simple" para más tablas visuales:

Elegí Importar desde una fuente de datos . En mi caso, esa es una tabla publicada de Hojas de cálculo de Google que contiene la edad de los ganadores masculinos del Oscar de cada año.

Para este método, simplemente pegue la URL:

wpDataTables luego le brinda un resumen de las columnas que encontró. Si lo desea, puede cambiar el tipo de datos de cada columna (por ejemplo, puede hacer que una columna sea un número o una fecha). También puede agregar manualmente nuevas columnas si es necesario:

Una vez que esté satisfecho con el aspecto de las cosas, dígale a wpDataTables que importe la tabla y traerá todos los datos.

2. Dos editores de tablas diferentes para datos, incluido un editor similar a Excel

Además del generador de tablas simple para tablas visuales ( que compartiré con usted más adelante ), wpDataTables le brinda dos editores diferentes para trabajar con datos:

• Editor similar a Excel : así es como suena. Puede editar datos en su navegador tal como lo haría en las celdas de Excel.
• Editor estándar : obtiene una interfaz más visual, junto con ventanas emergentes para administrar detalles como la configuración de columnas.

Así es como funciona el editor similar a Excel: para editar un campo, puede hacer doble clic y escribir ( como si trabajara en Excel ):

Para los campos que no son de texto, obtendrá otros selectores. Por ejemplo, puede abrir un selector de fechas para columnas con el tipo de datos de fecha.

También puede abrir una vista de lista de columnas que le permite configurar rápidamente columnas u ordenar/filtrar sus datos:

Y así es como funciona usar el editor estándar:

Una cosa buena aquí es que puede abrir rápidamente la configuración de una columna como un deslizador cuando está trabajando en el editor estándar.

En general, el editor similar a Excel es útil cuando realmente está trabajando con datos. Pero el beneficio del editor estándar es que facilita el acceso a los controles de columna detallados. Hablando de…

3. Configuración de columna detallada

En el editor estándar, puede acceder a configuraciones detalladas para cada columna que le permiten controlar configuraciones como:

• Tipos de datos
• Clases CSS personalizadas
• Ya sea para permitir la clasificación
• Ya sea para permitir el filtrado. Si es así, cómo usar el filtrado.
• Formato condicional. Por ejemplo, puede agregar una clase CSS personalizada basada en los datos de la celda ( de hecho, se parece mucho al formato condicional en Excel o Google Sheets )

4. Configuración general detallada de la tabla

Encima de los datos de la tabla, obtiene una colección de configuraciones generales para su tabla.

Aquí puedes controlar:

• Configuración de toda la tabla para filtros, clasificación y búsqueda.
• Edición de front-end: si las personas pueden o no editar la tabla desde el front-end.
• Herramientas de tabla: permiten a los usuarios imprimir su tabla o exportarla a Excel/CSV.

Y aquí también es donde puede activar la capacidad de ocultar ciertas columnas en varios dispositivos:

Cuando activa el colapso receptivo, obtiene una nueva configuración de columna que le permite ocultar columnas individuales en dispositivos móviles o tabletas.

En una versión reciente, wpDataTables también agregó una nueva pestaña Personalizar que le permite personalizar el diseño de sus tablas. Puede comenzar eligiendo una "piel" base. Luego, puede usar las otras opciones para controlar los colores, la tipografía, los bordes y otras configuraciones:

5. Crear un gráfico a partir de una tabla

Más allá de la funcionalidad de la tabla, wpDataTables también incluye una funcionalidad de gráficos bastante poderosa que le permite convertir cualquiera de sus tablas en varios tipos de gráficos impulsados ​​por algunos motores de gráficos diferentes.

Cuando vaya a crear un gráfico, primero elegirá qué motor de renderizado usar. Tus opciones son:

• Gráficos de Google
• HighCharts
• Gráfico.js

Luego, puede elegir qué tipo de gráfico crear a partir de los tipos admitidos por su motor de renderizado elegido. Por ejemplo, con Google Charts, puede elegir entre 14 tipos de gráficos diferentes:

Una vez que seleccione el tipo de gráfico, puede elegir una de sus tablas existentes para que actúe como fuente de datos para su gráfico:

Luego, puede elegir exactamente qué datos usar en esa tabla.

Por ejemplo, podría elegir solo dos o tres columnas específicas.

También puede ingresar un rango para qué filas incluir y elegir si desea seguir las opciones de filtrado de la tabla ( esto es genial porque el gráfico se volverá a representar solo si uno de sus visitantes cambia sus opciones de filtro en el front-end de su sitio ):

Una vez que seleccione qué datos usar, wpDataTables le dará una vista previa en vivo de su gráfico, así como opciones para controlar:

• Ancho de gráfico receptivo
• Agrupamiento
• Colores
• Fronteras
• Etiquetas
• Algunas otras configuraciones más pequeñas

Una vez que esté satisfecho con su configuración, wpDataTables escupe un código abreviado que puede usar en cualquier parte de su sitio. O bien, también puede usar un bloque dedicado.

6. Widget de filtro dedicado

Si no desea incluir opciones de filtro encima de la tabla, wpDataTables también viene con su propio widget de filtro dedicado que puede colocar en cualquier área de widgets. Esto funciona tanto con el sistema de widgets clásico de WordPress como con el nuevo editor de widgets basado en bloques.

Cuando agregue el widget, incluirá controles de filtro para la tabla activa:

7. Muchas configuraciones globales

Más allá de la configuración específica de la tabla/gráfico, wpDataTables también le brinda toneladas de opciones en el área wpDataTables → Configuración . Aquí, puedes configurar cosas como:

• Si analizar o no los shortcodes en las tablas
• Puntos de interrupción receptivos
• Colores
• fuentes
• CSS personalizado y JavaScript
• Conexiones de base de datos separadas

8. Un nuevo generador de tablas simple para tablas visuales

En el pasado, wpDataTables era casi exclusivamente para tablas de datos donde el enfoque estaba en los datos, en lugar del diseño de la tabla. Por ejemplo, en el pasado , no habría usado wpDataTables para tablas de comparación de productos o tablas de precios.

Eso cambió en 2021 cuando wpDataTables lanzó su nuevo generador de tablas simple . Con el generador de tablas simple, obtiene una experiencia de creación de tablas más visual que incluye funciones útiles como:

• Celdas combinadas
• Estilismo
• Calificaciones de estrellas
• Y así

Obtiene más control sobre el formato, pero pierde las reglas de clasificación, filtrado y paginación que obtiene con las opciones de tabla de datos más avanzadas. Tampoco puede crear gráficos a partir de tablas que crea con el generador de tablas simple.

Por esos motivos, creo que el generador de tablas simple funciona mejor para las tablas en las que no tiene muchos datos, pero la forma en que los presenta es clave. Nuevamente, un ejemplo común sería una tabla de comparación de productos para sus propios productos o productos afiliados que está promocionando.

Aquí hay un ejemplo a continuación: nuevamente, puede ver que obtiene muchas más opciones para formatear. También puede insertar fácilmente un código abreviado en cualquier celda.

Más abajo en la página, también obtendrá una vista previa en vivo de su tabla terminada.

Un vistazo rápido a los otros métodos para importar datos de gráficos

Arriba, le mostré cómo importar datos de una tabla de Hojas de cálculo de Google. Pero una de las mejores cosas de wpDataTables es lo flexible que es cuando se trata de importar datos.

Entonces, antes de terminar esta revisión de wpDataTables, permítame mostrarle las otras formas en que puede obtener datos en sus tablas.

Consultor de construcción

El generador de consultas le permite consultar:

• Datos de la base de datos de su sitio de WordPress (publicaciones, taxonomías, etc.)
• Cualquier dato de una base de datos MySQL externa

Si elige la base de datos de su sitio de WordPress, wpDataTables le brinda este generador de consultas realmente útil donde puede revisar sus diversos tipos de publicaciones y crear un filtro específico:

De manera similar, wpDataTables puede ayudarlo a generar consultas a una base de datos externa utilizando la misma interfaz visual.

Sincronizar con una fuente externa

Otra buena opción es sincronizar con una fuente externa. Con este método, el complemento actualizará automáticamente la tabla para cada recarga de página ( o cada vez que se borre el caché si está utilizando un complemento de almacenamiento en caché).

Aquí, puede elegir entre una variedad de fuentes:

• consulta SQL
• archivo CSV
• archivo Excel
• Hoja de cálculo de Google
• archivo XML
• archivo JSON
• Matriz de PHP serializada

Creación manual de tablas

Finalmente, siempre puedes crear una tabla desde cero. Cuando siga esa ruta, primero configurará las columnas para usar, así como sus tipos de datos asociados:

Luego, puede ingresar sus datos utilizando el editor similar a Excel o el editor estándar.

Precios de wpDataTables: versión gratuita limitada / Pro desde $ 59

Hay una versión limitada de wpDataTables en WordPress.org. Sin embargo, es solo eso: "limitado". Puede usarlo para tablas simples con el generador de tablas simples, pero en realidad no será una opción para tablas de datos serias.

Si necesita específicamente un complemento de tabla gratuito para tablas de datos o gráficos, es mejor que use una opción diferente.

Sin embargo, donde realmente brilla wpDataTables es en la versión premium.

Puede comprar una licencia con un año de soporte y actualizaciones o puede comprar una licencia con soporte y actualizaciones de por vida. Todas las licencias incluyen todas las funciones; la única diferencia es la cantidad de sitios en los que puede usarlo:

• Un sitio : $59 por una licencia de un año o $189 por una licencia de por vida.
• Tres sitios : $109 por una licencia de un año o $389 por una licencia de por vida.
• Sitios ilimitados : $249 por una licencia de un año o $589 por una licencia de por vida.

También puede ahorrar algo de dinero con nuestro exclusivo código de cupón wpDataTables.

Nota : asegúrese de comprar directamente desde el sitio web del desarrollador. En el pasado, wpDataTables se vendía exclusivamente a través del mercado CodeCanyon de Envato. El desarrollador aún mantiene la página de listado en CodeCanyon, pero el precio es mucho más alto que comprarlo directamente al desarrollador, por lo que no recomendamos pasar más por CodeCanyon.

Revisión de wpDataTables: nuestros pensamientos finales

Después de haber usado muchos complementos de tablas de WordPress, me siento bastante seguro al decir que wpDataTables es definitivamente una de las mejores soluciones que existen.

Es flexible en la forma en que importa los datos de su tabla. Y la interfaz hace que lo que podría ser un proceso complicado sea sorprendentemente simple.

Más allá de eso, es fácil editar tus tablas gracias a los dos editores diferentes. Y tiene mucho control sobre sus tablas completas o columnas individuales en las diversas áreas de configuración.

Con el nuevo generador de tablas simple, también puede usar wpDataTables para más que, bueno, tablas de datos. También puede usarlo para tablas de comparación de productos más visuales, tablas de precios, etc.

Finalmente, poder crear gráficos desde el mismo complemento es útil y la funcionalidad de los gráficos es realmente fácil de usar.

El único inconveniente es que la versión gratuita de wpDataTables en WordPress.org es bastante limitada, por lo que deberá pagar la versión premium para acceder a la mayoría de las funciones.

Dicho esto, si está dispuesto a pagar por la versión Pro, esta es definitivamente una que debe considerar.

Y si desea ver otras opciones para trabajar con tablas en WordPress, consulte nuestro tutorial de TablePress.

Obtener wpDataTables

️ No olvides usar nuestro cupón exclusivo de wpDataTables para obtener un 20 % de descuento.

¿Todavía tiene alguna pregunta sobre wpDataTables o nuestra revisión de wpDataTables? Infórmenos en la sección para comentarios.