Desde lejos, parece que necesita jugar con muchos datos numéricos y hacer cosas técnicas complicadas para crear celdas para un mapa de calor de tabla.

Sin embargo, eso está lejos de la realidad si tiene la herramienta adecuada.

En este artículo, repasaré la creación de una tabla de mapa de calor con wpDataTables, el complemento n.º 1 de WordPress para crear tablas y gráficos.

¿Qué tipo de tabla de mapa de calor podemos crear? Bueno, algo como este ejemplo a continuación:

Sí, esa es una captura de pantalla muy larga. Puede ver la tabla de mapas de calor dinámicos aquí.

Para crear una tabla de mapa de calor para que usted o sus visitantes comparen valores de datos más fácilmente, tiene pocas opciones dependiendo de sus datos de origen.

Pero antes de dirigirme al tutorial, quería informarle que hay dos secciones de este artículo a las que puede acceder directamente:

Cómo crear una tabla de mapa de calor con wpDataTables

1 Creando una tabla desde cero

Si no tienes una fuente de datos puedes crear tu tabla de mapa de calor desde cero con la opción “Crear tablas manualmente" donde insertarás valores de datos manualmente.

Para comenzar a crear una tabla de datos manualmente, abra su panel de administración de WordPress, vaya a wpDataTables -> Crear una tabla, elija la tercera opción "Crear una tabla manualmente" y haga clic en "Siguiente".

Se le mostrará el paso del asistente que lo ayudará a crear la estructura de la tabla donde creará 14 columnas: Período, Año y todos los demás serán nombres de los meses (enero, febrero…). Para las columnas de Período, dejará el tipo de columna como "Cadena de una línea" y para todos los demás, establecerá el tipo de columna "Entero" .

Cuando haya terminado de configurar la tabla, haga clic en "Crear la tabla". Se abrirá un menú desplegable con opciones para "Abrir en un editor estándar" o "Abrir en un editor similar a Excel" y eso es todo. Se crea la estructura de la tabla. Ahora insertará sus valores de datos numéricos en el editor estándar o en un editor similar a Excel.

2 Creación de un mapa de calor de tabla a partir de una fuente de datos

Si tiene datos en alguna fuente de datos como Excel, CSV, JSON, hoja de cálculo de Google, XML, matriz serializada de PHP o en una tabla en una base de datos (fuente SQL), utilizará la segunda opción en el asistente de tablas.

Para comenzar a crear una tabla de datos vinculada a una fuente de datos existente, abra su panel de administración de WordPress, vaya a wpDataTables -> Create a Table, elija la segunda opción "Crear una tabla de datos vinculada a una fuente de datos existente". y haga clic en "Siguiente".

Dependiendo de la fuente que tenga, seguirá las instrucciones:

Para esta tabla, usamos CSV como fuente de datos que puede descargar desde aquí. Elegirá CSV como "Tipo de fuente de datos de entrada" y luego, sobre el botón Examinar, busque la fuente que descargó y cargó previamente en su servidor. Haga clic en Guardar cambios para que wpDataTables lea el archivo CSV que cargó y se cree la tabla.

Después de crear la tabla, con cualquiera de las dos opciones, puedes personalizar y configurar tu tabla de WordPress como necesites.

En nuestro caso, primero activamos la opción "Mostrar filtros en un formulario encima de la tabla" en la pestaña " Ordenar y filtrar " en la configuración de la tabla y luego configuramos los filtros avanzados para cada columna. Para la columna Período, configuramos ‘Filtro de cuadro de selección’ y ‘Filtro de número’ para todas las demás columnas.

Luego, activamos la opción "Capacidad de respuesta" en la pestaña "Mostrar" en la configuración de la tabla y ocultamos valores como las columnas "Mes" para tabletas y dispositivos móviles en la configuración de cada columna o más rápido en el botón de lista de columnas sobre la tabla.

Para personalizar la paleta de colores de datos de la tabla de una manera fácil e intuitiva, usamos el formato condicional. Para la primera columna, establecemos la condición de que si la celda contiene 2, entonces "Establecer clase CSS de celda " en "texto azul-blanco" para que tengamos un color de fuente blanco sobre el fondo azul.

Luego creamos esas clases en el campo "CSS personalizado" en la pestaña " Personalizar" en la configuración de la tabla como esta:


.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}

Como esto:

Donde el número 1 en .wpDataTable-1 es el ID de su tabla, por lo que deberá cambiarlo para su tabla

Para todas las demás columnas, establecemos las mismas condiciones para establecer diferentes colores en función del valor de la tabla de temperatura máxima.

Para la segunda tabla "Temperatura baja" usamos el mismo enfoque que para la tabla "Temperatura máxima", excepto las condiciones en el formato Condicional. Debido a que es un valor de temperatura más bajo, usamos estas condiciones.

Luego creamos esas clases en el campo "CSS personalizado" en la pestaña " Personalizar" en la configuración de la tabla como esta:


.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}

.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}

Donde el número 2 en .wpDataTable2 es el ID de su tabla, por lo que deberá cambiarlo para su tabla.

¡Eso es todo!

Ahora tiene un mapa de calor de tabla donde puede comparar valores de datos fácilmente sin que parezca que está leyendo la letra pequeña de un contrato.

Si esa fue una forma fácil e intuitiva de crear mapas de calor en una tabla, consulte la siguiente parte.

Ahora lo que debe hacer es aparecer en sus páginas en el front-end. Al igual que con cualquier otro complemento, usamos códigos abreviados para mostrar tablas en las páginas o publicaciones de los usuarios. Agregar códigos abreviados es muy fácil, especialmente si está utilizando creadores de páginas populares como Elementor, WP Bakery o Gutenberg.

Ejemplos de mapas de calor de tablas

Si disfrutó leyendo este artículo sobre cómo crear una tabla de mapa de calor con wpDataTables, debe consultar este sobre cómo diseñar una tabla.

También escribimos sobre algunos temas relacionados, como las alternativas de DataTables, las bibliotecas de tablas de JavaScript, cómo crear una tabla, una tabla de encuestas y los complementos de la tabla de precios de WordPress .

Fuente de grabación: wpdatatables.com