De longe, parece que você precisa brincar com muitos dados numéricos e fazer coisas técnicas complicadas para criar células para um mapa de calor de tabela.

No entanto, isso está longe da realidade se você tiver a ferramenta adequada.

Neste artigo, abordarei a criação de uma tabela de mapa de calor com wpDataTables, o plug-in nº 1 do WordPress para criar tabelas e gráficos.

Que tipo de tabela de mapa de calor podemos criar? Bem, algo como este exemplo abaixo:

Sim, essa é uma captura de tela muito longa. Você pode ver a tabela de mapa de calor dinâmico aqui.

Para criar uma tabela de mapa de calor para você ou seus visitantes compararem os valores dos dados com mais facilidade, você tem poucas opções, dependendo dos dados de origem.

Mas antes de ir para o tutorial, gostaria de informar que existem duas seções deste artigo para as quais você pode pular diretamente:

Como criar uma tabela de mapa de calor com wpDataTables

1 Criando uma tabela do zero

Se você não tiver uma fonte de dados, poderá criar sua tabela de mapa de calor do zero com a opção “Criando tabelas manualmente", onde você inserirá os valores dos dados manualmente.

Para começar a criar uma tabela de dados manualmente, abra o painel de administração do WordPress, vá para wpDataTables -> Create a Table, escolha a terceira opção “Create a table manualmente” e clique em “Next”.

Será mostrado o passo do assistente que o ajudará a criar a estrutura da tabela onde você criará 14 colunas: Período, Ano, e todos os outros serão nomes dos meses (Jan, Fev…). Para colunas de período, você deixará o tipo de coluna como "String de uma linha" e para todas as outras, definirá o tipo de coluna "Inteiro" .

Quando terminar de configurar a tabela, clique em “Create the table”. Um menu suspenso será aberto com opções para “Abrir no editor padrão” ou “Abrir no editor do tipo Excel” e pronto. A estrutura da tabela é criada. Agora você inserirá seus valores de dados numéricos no editor padrão ou em um editor semelhante ao Excel.

2 Criando um mapa de calor de tabela a partir de uma fonte de dados

Se você tiver dados em alguma fonte de dados como Excel, CSV, JSON, planilha do Google, XML, array serializado PHP, ou em uma tabela em um banco de dados (fonte SQL), você usará a segunda opção no assistente de tabela.

Para começar a criar uma tabela de dados vinculada a uma fonte de dados existente, abra o painel de administração do WordPress, vá para wpDataTables -> Criar uma tabela, escolha a segunda opção “Criar uma tabela de dados vinculada a uma fonte de dados existente”. e clique em “Avançar”.

Dependendo de qual fonte você tem, você seguirá as instruções:

Para esta tabela, usamos CSV como fonte de dados que você pode baixar aqui. Você escolherá CSV como “Tipo de fonte de dados de entrada” e, em seguida, no botão Procurar, encontrará a fonte que você baixou e enviou anteriormente em seu servidor. Clique em Salvar alterações, para que wpDataTables leia o arquivo CSV que você carregou e a tabela será criada.

Depois de criar a tabela, com qualquer uma das duas opções, você pode personalizar e configurar sua tabela WordPress como precisar.

No nosso caso, primeiro ativamos a opção “Mostrar filtros em um formulário acima da tabela” na guia ” Classificação e filtragem ” nas configurações da tabela e, em seguida, configuramos os filtros avançados para cada coluna. Para a coluna Período, definimos ‘Filtro de caixa de seleção’ e ‘Filtro de número’ para todas as outras colunas.

Em seguida, ativamos a opção “Responsividade” na guia “Exibir” nas configurações da tabela e ocultamos valores como as colunas “Mês” para tablets e dispositivos móveis em cada configuração de coluna ou mais rapidamente no botão Lista de colunas acima da tabela.

Para personalizar a paleta de cores dos dados da tabela de maneira fácil e intuitiva, estamos usando a formatação condicional. Para a primeira coluna, definimos a condição de que, se a célula contiver 2, então “Definir classe CSS da célula ” para “texto azul-branco” para que tenhamos uma cor de fonte branca sobre o fundo azul.

Em seguida, criamos essas classes no campo “CSS personalizado” na guia “Personalizar” nas configurações da tabela como esta:


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

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

Assim:

Onde o número 1 em .wpDataTable-1 é o ID da sua tabela, então você precisará alterá-lo para sua tabela

Para todas as outras colunas, definimos as mesmas condições para definir cores diferentes com base no valor na tabela de temperatura máxima.

Para a segunda tabela “Low Temperature” usamos a mesma abordagem da tabela “Temperature Maximus”, exceto as condições na formatação Condicional. Por ser um valor de temperatura mais baixo, usamos essas condições.

Em seguida, criamos essas classes no campo “CSS personalizado” na guia “Personalizar” nas configurações da tabela como esta:


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

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

Onde o número 2 em .wpDataTable2 é o ID de sua tabela, então você precisará alterá-lo para sua tabela.

É isso!

Agora você tem um mapa de calor de tabela onde pode comparar valores de dados facilmente sem parecer que está lendo as letras miúdas de um contrato.

Se essa foi uma maneira fácil e intuitiva de criar mapas de calor em uma tabela, confira a próxima parte.

Agora o que você precisa fazer é aparecer em suas páginas no front-end. Como em qualquer outro plugin, usamos códigos de acesso para mostrar tabelas nas páginas ou postagens dos usuários. Adicionar códigos de acesso é muito fácil, especialmente se você estiver usando construtores de páginas populares como Elementor, WP Bakery ou Gutenberg.

Exemplos de mapa de calor de tabela

Se você gostou de ler este artigo sobre como criar uma tabela de mapa de calor com wpDataTables, confira este artigo sobre como criar uma tabela.

Também escrevemos sobre alguns assuntos relacionados, como alternativas de DataTables, bibliotecas de tabelas JavaScript, como criar uma tabela de uma tabela de pesquisa e plugins de tabela de preços do WordPress .

Fonte de gravação: wpdatatables.com