As tabelas no WordPress são enganadoramente simples. Enquanto precisar de uma ou duas grelhas estáticas para todo o site, o HTML manual é suficiente. Mas assim que enfrenta atualizações regulares de dados, importações do Excel ou Google Sheets, ou ordenação de colunas, os métodos nativos transformam-se numa luta interminável com código.

Pior: o seu site é responsivo, mas as tabelas HTML não são. Nos ecrãs de telemóvel, desfazem-se, exigem deslocamento horizontal e quebram toda a estrutura. Adicionar interatividade (filtros, pesquisa, edição no frontend) com as ferramentas padrão do WordPress é praticamente impossível sem contratar um programador.

O wpDataTables é um plugin que resolve todos estes problemas com uma única instalação. Sem código, responsividade total de raiz, dezenas de fontes de dados e visualização através de gráficos. É utilizado por mais de 80.000 empresas e a versão Lite gratuita já foi instalada mais de 60.000 vezes no WordPress.org. Vamos ver o que pode fazer e como trabalhar com ele.

💡 Visão geral rápida:

• Instale o wpDataTables a partir do CodeCanyon e ative-o no seu site.
• Crie uma tabela a partir de CSV, Excel, Google Sheets, MySQL, JSON, XML ou manualmente; qualquer fonte funciona.
• Configure a aparência: cores, tipos de letra, alinhamento, comportamento responsivo em dispositivos móveis.
• Insira o shortcode pronto numa publicação ou página; a tabela aparece imediatamente com filtros, ordenação e pesquisa.
• Se necessário, crie um gráfico baseado na mesma tabela e adicione-o da mesma forma.

O que há de errado com as tabelas HTML no WordPress

A forma padrão de inserir tabelas é através de etiquetas HTML no separador do editor de Texto. A estrutura básica tem este aspeto:

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>

O resultado é uma tabela simples de três colunas. Tem um aspeto decente se tiver uma no seu site e não planear atualizá-la.

Mas a abordagem tem três problemas fundamentais. Primeiro: as tabelas HTML são estáticas. Os dados estão codificados e cada alteração significa editar o código novamente. Segundo: responsividade. O tema pode ser fluido, mas a <table> não é. Num telemóvel, os utilizadores veem colunas cortadas ou deslocamento horizontal. Terceiro: sem filtros, sem ordenação, sem pesquisa, apenas uma grelha morta.

O seu site é responsivo. As suas tabelas não são.

A importação manual de dados do Excel ou Google Sheets também não ajuda: copiar e colar de folhas de cálculo para o WordPress transforma a formatação num caos. Se tem muitas tabelas e estas são atualizadas com frequência, passa o tempo a lutar com o layout em vez de trabalhar no conteúdo.

Crie tabelas sem código com o wpDataTables

O wpDataTables é um plugin premium que transforma o WordPress num motor completo para trabalhar com tabelas e gráficos. Nem uma única linha de código. Instale-o, escolha uma fonte de dados, configure a aparência e a tabela está pronta a inserir com um shortcode.

O plugin é distribuído através do CodeCanyon num modelo de «compre uma vez, use para sempre». Os preços começam nos 49 $ por ano para uma licença de domínio único (plano Starter). Existem três planos superiores: Standard, Pro e Developer, que diferem no número de domínios e funcionalidades avançadas, como a ligação a múltiplas bases de dados e a integração com o WooCommerce. A versão Lite gratuita está disponível no diretório do WordPress.org com funcionalidades básicas.

🔗 Mais sobre o wpDataTables | 🔗 Demonstração ao vivo

Os criadores focaram-se em três aspetos: flexibilidade de fontes, personalização profunda e trabalho com dados em tempo real. Vamos percorrer as principais funcionalidades.

Múltiplas fontes de dados

O plugin extrai dados de qualquer lado. Excel, CSV, Google Sheets, XML, JSON, arrays PHP serializados e consultas MySQL diretas estão todos disponíveis ao criar uma tabela. Pode preencher manualmente uma tabela de raiz através do editor de backend. Ou ligar-se a uma fonte em tempo real para que a tabela seja atualizada dinamicamente a cada carregamento de página.

O MySQL merece uma menção especial. Escreve uma consulta e o plugin renderiza o resultado como uma tabela ordenável com pesquisa. São suportadas ligações separadas a MS SQL e PostgreSQL, podendo cada tabela extrair dados do seu próprio servidor. Para projetos com arquitetura distribuída, isto resolve o problema de consolidação de dados sem ETL intermédio.

Personalização avançada e layout responsivo

A configuração da tabela é montada com caixas de seleção e seletores de cor, sem necessidade de CSS. As definições incluem tipografia, alinhamento, formatos de data e hora e idioma da interface. Existem skins de tabela prontas a usar: roxa, escura, azul. Para casos complexos, há campos para JS e CSS personalizados.

A responsividade é implementada sem compromissos. O plugin não se limita a comprimir a tabela à largura do ecrã, é você quem decide como ela se comporta em dispositivos móveis. Pode ativar o colapso flexível de colunas, adicionar scroll horizontal ou limitar a largura máxima. A tabela permanece legível em qualquer dispositivo.

Filtros para uma pesquisa eficiente

Ao criar uma tabela, ativa os filtros e os utilizadores passam a poder restringir instantaneamente a seleção por qualquer coluna. Para grandes volumes de dados, isto muda radicalmente a experiência: em vez de percorrer três ecrãs, a pessoa introduz um parâmetro e vê apenas as linhas relevantes.

Os filtros funcionam do lado do servidor. Cada ação do utilizador aumenta a carga computacional na base de dados, pelo que o plugin permite desativar a filtragem onde esta for redundante. O equilíbrio entre velocidade e conveniência é configurado por tabela.

Edição MySQL no frontend

Uma funcionalidade única: ao ativar uma opção no separador Editing, permite que os utilizadores editem os dados diretamente a partir do frontend do site. Isto não é meramente cosmético, as alterações são escritas na base de dados. O acesso é configurado por perfis: todos os visitantes, apenas utilizadores registados ou grupos específicos.

Existem muitos cenários: clientes atualizam os seus registos numa tabela CRM, colaboradores marcam estados de tarefas, subscritores acrescentam dados a um registo partilhado. Sem painel de administração separado, sem necessidade de formar utilizadores no WordPress.

Visualização através de gráficos

As pessoas leem visualizações muito mais rapidamente do que números em tabela. O wpDataTables constrói gráficos dinâmicos baseados no Google Charts, HighCharts ou Chart.js; basta especificar a tabela de origem e mapear as colunas para os eixos do gráfico.

Existem mais de uma dezena de tipos de gráfico: linhas, circular, colunas, histograma, dispersão. Após a configuração, o gráfico recebe o seu próprio shortcode e é inserido num artigo independentemente da tabela. Se os dados de origem forem atualizados, o gráfico é redesenhado automaticamente. Perfeito para bloggers com relatórios de rendimentos mensais e para dashboards empresariais.

Como criar uma tabela responsiva: guia passo a passo

A teoria está clara, passemos à prática. Três passos separam-no de uma tabela funcional no seu site.

Passo 1: instalar o wpDataTables

O plugin é adquirido no CodeCanyon. Após o pagamento, vá à secção de Downloads da sua conta, localize o wpDataTables e descarregue o ficheiro com o rótulo «Installable WordPress file only». No painel de administração do WordPress, vá a Plugins → Adicionar Novo → Enviar Plugin, selecione o ZIP descarregado e ative.

Para atualizações automáticas, terá de introduzir o Código de Compra do Item (Item Purchase Code) do CodeCanyon. Também precisará dele para aceder ao suporte premium durante o primeiro ano após a compra.

Passo 2: criar uma tabela

Um novo item chamado wpDataTables aparecerá no menu lateral do WordPress. Clique nele e, em seguida, no botão azul Adicionar. O plugin oferecerá a escolha de um método de criação de tabela: importar de CSV/Excel, ligar ao Google Sheets, criar manualmente, consulta SQL ou ligar a uma API externa.

Para demonstração, vamos usar CSV. Carregue o ficheiro, o plugin reconhece automaticamente os delimitadores e mostra uma pré-visualização. No ecrã seguinte, define o nome da tabela e edita as colunas, se necessário: renomear, eliminar as desnecessárias, adicionar novas.

O último ecrã é o de ajustes finos. Aqui ativa as ferramentas da tabela (imprimir, copiar, exportar para PDF/Excel), filtragem e edição no frontend. Todas as alterações são exibidas na pré-visualização ao vivo, à direita. Clique em Guardar, a tabela está pronta.

Passo 3: inserir o shortcode numa publicação ou página

Após guardar, o plugin fornecer-lhe-á um shortcode como [wpdatatable id=X]. Copie-o e cole-o em qualquer publicação ou página do WordPress, e pronto. A tabela aparecerá no site com todas as funcionalidades ativadas: ordenação, pesquisa, filtros.

O resultado está na captura de ecrã acima: a filtragem está ativa, a pesquisa funciona, as colunas ordenam-se ao clicar. Nem uma linha de código além de um shortcode curto. Passaria uma hora a construir a mesma tabela com HTML, e ainda assim sem interatividade.

Como construir um gráfico com base numa tabela

Quando a tabela estiver pronta, abra-a na lista e clique em Criar um Gráfico. Escolha um tipo de visualização: colunas, circular, linhas, dispersão, mais de uma dúzia de variantes disponíveis no total.

No passo seguinte, especifica a tabela de origem e mapeia as colunas para os eixos. Para um gráfico de colunas, precisa de, pelo menos, duas colunas: categorias e valores. As colunas numéricas podem ser filtradas com um controlo deslizante de intervalo, útil quando a tabela tem centenas de linhas, mas só precisa de exibir parte delas no gráfico.

O terceiro ecrã é o de configurações visuais. Largura, altura, fundo, bordas, tipos de letra, cores das séries, rótulos, dicas ao passar o rato. Configurado, guarde, copie o shortcode do gráfico e insira-o no conteúdo, ao lado da tabela ou em separado.

Os gráficos estão dinamicamente ligados à tabela. Se os dados de origem mudarem, o gráfico é reconstruído automaticamente. Sem exportações para Excel, atualizações manuais de capturas de ecrã ou outras rotinas.

Extensões para capacidades adicionais

A funcionalidade base é suficiente para a maioria das tarefas. Mas se precisar de especificidades, o ecossistema de addons cobre cenários de nicho.

Filtros poderosos. Filtragem em cascata (da esquerda para a direita: categoria selecionada, atualização do filtro de subcategoria), pesquisa facetada, ocultação da tabela até que os parâmetros sejam selecionados e pesquisa ao vivo enquanto digita. Ativado com uma caixa de seleção nas definições.

O construtor de relatórios gera documentos Word ou Excel diretamente a partir de dados tabulares. Cenário: os funcionários preencheram a tabela através do frontend, clicou num botão, relatório mensal pronto para impressão. Útil para folhas de horas, faturas e análises periódicas.

Formidable Forms. Os formulários recolhem dados dos utilizadores, o plugin transforma automaticamente cada submissão numa linha da tabela. Campo do formulário, coluna da tabela. Sem exportação intermédia.

Gravity Forms. A mesma mecânica, mas para o construtor de formulários WordPress mais popular. Após a integração, o Gravity Forms torna-se uma fonte de dados adicional ao criar uma tabela. A edição no frontend dos registos criados através de formulários é suportada.

Plano de subscrição e preços

O wpDataTables tem uma grelha de preços simples com quatro níveis:

Todos os planos incluem um ano de suporte premium e atualizações mensais. A licença é vitalícia: se não renovar, o plugin continua a funcionar, mas perde o acesso a atualizações e suporte. Existe uma garantia de reembolso de 15 dias.

A melhor forma de avaliar o plugin antes da compra é o sandbox ao vivo no site do wpDataTables. Tem acesso total ao backend: crie tabelas, construa gráficos, experimente as definições. Nada de demonstrações em vídeo e capturas de ecrã, um verdadeiro test drive no navegador.

Para um início rápido, existe uma versão Lite gratuita no WordPress.org (mais de 60 000 instalações ativas). A funcionalidade é limitada, mas suficiente para perceber se o plugin se adequa à sua tarefa.

⁉️🤔 Perguntas frequentes

Preciso de saber programar para trabalhar com o wpDataTables?

Não, todas as tabelas e gráficos são criados através de uma interface visual, um assistente guiá-lo-á desde a seleção da fonte até à inserção do shortcode. Existem campos para JS e CSS personalizados, mas são opcionais. Os programadores apreciarão a capacidade de escrever as suas próprias consultas SQL, ligar-se a bases de dados externas e usar a REST API para obter dados de serviços de terceiros.

O que acontece às tabelas após remover o plugin?

Por predefinição, as tabelas são guardadas na base de dados mesmo que desative ou elimine o wpDataTables. Na reinstalação, serão restauradas. Isto é configurável: nas opções, pode escolher a eliminação completa dos dados juntamente com o plugin. As tabelas não ficam permanentemente vinculadas ao plugin, pode sempre exportar os dados para CSV e transferi-los para outra ferramenta.

Como é que a versão paga difere da Lite?

A versão Lite permite criar tabelas a partir de CSV, Excel, Google Sheets, JSON e XML, bem como manualmente. A ordenação e pesquisa básicas estão disponíveis. Mas faltam: consultas MySQL, ligação a múltiplas bases de dados, gráficos, edição no frontend, filtragem, integração com WooCommerce e todos os addons. Se gere dados de fontes externas e pretende construir gráficos, precisa da versão paga. Para tabelas estáticas, a Lite provavelmente será suficiente.

O plugin suporta WooCommerce?

Sim, a partir do plano Standard. Pode criar tabelas de produtos dinâmicas que se atualizam automaticamente quando o catálogo do WooCommerce muda. Os clientes obtêm uma lista de produtos ordenável e filtrável, com preços e stock atuais. Para lojas com grandes sortidos, isto substitui um plugin de catálogo separado.

Quantas tabelas posso criar?

Quantas precisar. Nenhum plano limita o número de tabelas e gráficos. A única restrição da licença é o número de domínios onde o plugin está ativado.

O que escolher para a sua tarefa

O wpDataTables cobre todo o espetro do trabalho com tabelas no WordPress, desde a simples saída de CSV até consultas distribuídas a bases de dados com visualização em gráficos. E fá-lo sem exigir código, o que é raro no ecossistema WordPress.

A mecânica é simples: escolha uma fonte, configure o design, insira o shortcode. Depois a tabela vive a sua própria vida: atualiza quando a fonte muda, filtra ao clique do utilizador, ordena por qualquer coluna e permanece legível em dispositivos móveis. Nem uma linha de HTML, sem layout móvel separado.

O plugin é pago, mas com um test drive gratuito na sandbox e uma versão Lite para cenários básicos. O plano inicial de $49 por ano é comparável a uma ou duas horas de trabalho de um programador e dá-lhe uma ferramenta para o ano que tem pela frente.

🔗 Descarregue a versão Lite em WordPress.org