Melhor Plugin de Tabelas e Gráficos do WordPress?

Precisa de uma maneira de exibir dados, tabelas ou gráficos em seu site WordPress? Em nossa revisão prática do wpDataTables, vamos dar uma olhada em uma das soluções mais poderosas para tabelas simples ou complexas.

Em geral, wpDataTables é um dos plugins de tabela e gráfico mais flexíveis que você encontrará. Você pode importar ou sincronizar dados de várias fontes diferentes, incluindo Excel, Planilhas Google, CSV, JSON, banco de dados do seu site WordPress, bancos de dados externos e muito mais. Se necessário, você pode criar uma variedade de gráficos a partir de qualquer uma de suas tabelas.

Ou, com o novo construtor de tabelas simples, você pode criar tabelas visuais simples, como tabelas de comparação de produtos ou tabelas de preços.

O melhor de tudo é que as interfaces de usuário são excelentes tanto no frontend quanto no backend, o que proporciona uma ótima experiência para seus visitantes e também facilita o trabalho com suas tabelas e gráficos.

No geral, acho que o plugin wpDataTables é muito bom no que faz, então nossa revisão do wpDataTables geralmente será bastante positiva.

Nas seções práticas abaixo, destacarei os principais recursos do wpDataTables e mostrarei como tudo funciona para que você possa entender de onde vem essa positividade.

Observação – publicamos originalmente esta revisão em 2018, mas fizemos uma atualização completa em outubro de 2021 para considerar novos recursos e alterações na interface wpDataTables.

Revisão do wpDataTables: Uma rápida olhada nos recursos

Primeiro, todas as tabelas e gráficos que você cria com wpDataTables são responsivos . Eu sei – “responsivo” não é realmente algo sexy em 2021. Mas você ficaria surpreso com o número de plugins de tabela que não lidam bem com o design responsivo, então isso é realmente um grande benefício. Você pode configurar seus próprios pontos de interrupção personalizados e ocultar colunas específicas em tablets/dispositivos móveis.

Outra coisa que você vai gostar no wpDataTables é quantas maneiras ele oferece para criar tabelas e/ou importar conteúdo. Você pode:

• Crie tabelas do zero
• Vincule uma tabela a uma fonte externa , como Excel, Planilhas Google, JSON, consulta SQL, matriz PHP etc. Os dados serão atualizados à medida que você alterar o arquivo de origem .
• Importe de uma fonte externa , como Excel ou Planilhas Google. Ao contrário do anterior, esta é uma importação única . Os dados não sincronizam.
• Use um construtor de consultas de banco de dados para adicionar conteúdo do WordPress à sua tabela, como postagens, taxonomias, postmeta, etc.
• Use uma consulta MySQL para extrair dados de seu próprio banco de dados externo .

Embora eu não tenha certeza de como testá-lo, o wpDataTables afirma que é capaz de lidar com tabelas grandes, mesmo em milhões de linhas.

Para editar os dados da tabela, você pode usar um editor semelhante ao Excel, onde basta clicar e digitar nos campos. Ou você pode usar um editor “padrão” que permite editar linhas inteiras em um pop-up.

Para tabelas mais simples, o wpDataTables também lançou recentemente um construtor de “tabela simples”. Você pode usar isso para criar tabelas mais visuais, como tabelas de comparação de produtos, tabelas de preços e assim por diante. Basicamente, tabelas em que você não precisa trabalhar com toneladas de dados, mas deseja ter mais controle sobre o design.

Além disso, você obtém várias configurações para controlar a aparência e o funcionamento de suas tabelas, incluindo:

• Formatação condicional
• Edição de mesa front-end
• Opções de classificação
• Funcionalidade de filtro (incluindo um widget dedicado)
• Opção de pesquisa
• Opções de front-end para exportar tabelas para Excel ou CSV
• Opções de front-end para imprimir uma tabela

E oh sim, wpDataTables não é apenas para tabelas! Você também pode usá-lo para transformar qualquer uma de suas tabelas em um gráfico de ótima aparência. Você pode escolher entre uma grande variedade de tipos de gráficos e seus gráficos serão atualizados automaticamente quando você alterar os dados na tabela. Aqui está uma lista parcial de alguns dos tipos de gráfico:

• Gráfico de linha
• Gráfico de barras
• Gráfico de colunas
• Gráfico de área
• Gráfico de pizza
• Gráfico de rosca
• Histograma
• Gráfico de medidor
• Gráfico de dispersão
• Gráfico de velas

Se você quiser ver as tabelas e gráficos em ação, confira algumas demos aqui.

Hands-on com wpDataTables: oito coisas que você vai gostar

Ok, agora vamos trabalhar com wpDataTables e mostrarei como esses recursos realmente funcionam. Abordarei isso de forma linear para que você também possa ver como é criar tabelas e gráficos com wpDataTables.

1. Assistente do Construtor de Tabelas

Para ajudá-lo a criar suas tabelas, wpDataTables oferece um assistente de construção de tabelas bem projetado.

Primeiro, você escolherá de onde deseja obter os dados da tabela. Você pode ver as seis opções que mencionei acima – cinco das opções são focadas em tabelas de dados, enquanto você também obtém a nova opção “tabela simples” para tabelas mais visuais:

Eu escolhi Importar de uma fonte de dados . No meu caso, essa é uma tabela publicada do Planilhas Google que contém a idade dos vencedores do Oscar do sexo masculino para cada ano.

Para este método, basta colar a URL:

wpDataTables fornece um resumo das colunas encontradas. Se desejar, você pode alterar o tipo de dados de cada coluna (por exemplo, você pode transformar uma coluna em um número ou uma data). Você também pode adicionar novas colunas manualmente, se necessário:

Quando estiver satisfeito com a aparência das coisas, diga ao wpDataTables para importar a tabela e ela trará todos os dados.

2. Dois Editores de Tabelas Diferentes para Dados, Incluindo o Editor do Tipo Excel

Além do construtor de tabelas simples para tabelas visuais ( que compartilharei com você mais tarde ), o wpDataTables oferece dois editores diferentes para trabalhar com dados:

• Editor do tipo Excel – é assim que parece. Você pode editar dados em seu navegador da mesma forma que digitaria em células do Excel.
• Editor padrão – você obtém uma interface mais visual, juntamente com pop-ups para gerenciar detalhes como configurações de coluna.

Veja como funciona o editor do tipo Excel – para editar um campo, você pode simplesmente clicar duas vezes e digitar ( assim como trabalhar no Excel ):

Para campos que não são de texto, você obterá outros seletores. Por exemplo, você pode abrir um seletor de data para colunas com o tipo de dados de data.

Você também pode abrir uma exibição de lista de colunas que permite configurar colunas rapidamente ou classificar/filtrar seus dados:

E aqui está como funciona usar o editor padrão:

Uma coisa legal aqui é que você pode abrir rapidamente as configurações de uma coluna como um slide-out quando estiver trabalhando no editor padrão.

No geral, o editor do tipo Excel é útil quando você está realmente trabalhando com dados. Mas o benefício do editor padrão é que facilita o acesso aos controles de coluna detalhados. Falando de…

3. Configurações detalhadas da coluna

No editor padrão, você pode acessar configurações detalhadas para cada coluna que permitem controlar configurações como:

• Tipos de dados
• Classes CSS personalizadas
• Se permitir a classificação
• Se permitir filtragem. Se sim, como usar a filtragem
• Formatação condicional. Por exemplo, você pode adicionar uma classe CSS personalizada com base nos dados da célula ( é muito parecido com a formatação condicional no Excel ou no Google Sheets )

4. Configurações gerais detalhadas da tabela

Acima dos dados da tabela, você obtém uma coleção de configurações gerais para sua tabela.

Aqui você pode controlar:

• Configurações de toda a tabela para filtros, classificação e pesquisa.
• Edição de front-end – se as pessoas podem ou não editar a tabela a partir do front-end.
• Ferramentas de tabela – permitem que os usuários imprimam sua tabela ou a exportem para Excel/CSV.

E é aqui também que você pode ativar a capacidade de ocultar certas colunas em vários dispositivos:

Ao ativar o recolhimento responsivo, você obtém novas configurações de coluna que permitem ocultar colunas individuais em dispositivos móveis ou tablets.

Em uma versão recente, wpDataTables também adicionou uma nova guia Personalizar que permite personalizar o design de suas tabelas. Você pode começar escolhendo uma “pele” base. Em seguida, você pode usar as outras opções para controlar cores, tipografia, bordas e outras configurações:

5. Criar gráfico da tabela

Além da funcionalidade de tabela, wpDataTables também inclui uma funcionalidade de gráfico bastante poderosa que permite transformar qualquer uma de suas tabelas em vários tipos de gráficos alimentados por alguns mecanismos de gráficos diferentes.

Quando você for criar um gráfico, primeiro escolherá qual mecanismo de renderização usar. Suas opções são:

• Gráficos do Google
• High Charts
• Chart.js

Em seguida, você pode escolher que tipo de gráfico criar entre os tipos suportados pelo mecanismo de renderização escolhido. Por exemplo, com o Google Charts, você pode escolher entre 14 tipos de gráficos diferentes:

Depois de selecionar o tipo de gráfico, você pode escolher uma de suas tabelas existentes para atuar como fonte de dados para seu gráfico:

Em seguida, você pode escolher exatamente quais dados dessa tabela usar.

Por exemplo, você pode escolher apenas duas ou três colunas específicas.

Você também pode inserir um intervalo para quais linhas incluir e escolher se deseja seguir as opções de filtragem da tabela ( isso é legal porque o gráfico será renderizado novamente se um de seus visitantes alterar suas opções de filtro no front-end do seu site ):

Depois de selecionar quais dados usar, wpDataTables fornecerá uma visualização ao vivo do seu gráfico, bem como opções para controlar:

• Largura do gráfico responsivo
• Agrupamento
• Cores
• Fronteiras
• Rótulos
• Algumas outras configurações menores

Quando estiver satisfeito com suas configurações, o wpDataTables cospe um código de acesso que você pode usar em qualquer lugar do seu site. Ou você também pode usar um bloco dedicado.

6. Widget de Filtro Dedicado

Se você não quiser incluir opções de filtro acima da tabela, wpDataTables também vem com seu próprio widget de filtro dedicado que você pode colocar em qualquer área de widget. Isso funciona com o sistema de widgets clássico do WordPress e o novo editor de widget baseado em bloco.

Ao adicionar o widget, ele incluirá controles de filtro para a tabela ativa:

7. Muitas configurações globais

Além das configurações específicas de tabela/gráfico, wpDataTables também oferece várias opções na área wpDataTables → Configurações . Aqui, você pode configurar coisas como:

• Se deve ou não analisar códigos de acesso em tabelas
• Pontos de interrupção responsivos
• Cores
• Fontes
• CSS e JavaScript personalizados
• Conexões de banco de dados separadas

8. Um novo construtor de tabelas simples para tabelas visuais

No passado, wpDataTables era praticamente exclusivamente para tabelas de dados em que o foco estava nos dados, em vez do design da tabela. Por exemplo, no passado , você não usaria wpDataTables para tabelas de comparação de produtos ou tabelas de preços.

Isso mudou em 2021, quando o wpDataTables lançou seu novo construtor de tabelas simples . Com o construtor de tabelas simples, você obtém uma experiência de criação de tabelas mais visual que inclui recursos úteis, como:

• Células mescladas
• Estilo
• Classificações por estrelas
• E assim por diante

Você obtém mais controle sobre a formatação, mas perde as regras de classificação, filtragem e paginação que obtém com as opções de tabela de dados mais avançadas. Você também não pode criar gráficos a partir de tabelas criadas com o construtor de tabelas simples.

Por esses motivos, acho que o construtor de tabelas simples funciona melhor para tabelas em que você não tem muitos dados, mas como você apresenta esses dados é fundamental. Novamente, um exemplo comum seria uma tabela de comparação de produtos para seus próprios produtos ou produtos afiliados que você está promovendo.

Aqui está um exemplo abaixo – novamente, você pode ver que você tem muito mais opções para formatação. Você também pode inserir facilmente um código de acesso em qualquer célula.

Mais abaixo na página, você também terá uma visualização ao vivo da sua mesa finalizada.

Uma rápida olhada nos outros métodos para importar dados de gráficos

Acima, mostrei como importar dados de uma tabela do Planilhas Google. Mas uma das grandes vantagens do wpDataTables é o quão flexível ele é quando se trata de importar dados.

Portanto, antes de terminar esta revisão do wpDataTables, deixe-me guiá-lo pelas outras maneiras de obter dados em suas tabelas.

Criador de consultas

O construtor de consultas permite consultar:

• Dados do banco de dados do seu site WordPress (posts, taxonomias, etc.)
• Quaisquer dados de um banco de dados MySQL externo

Se você escolher o banco de dados do seu site WordPress, o wpDataTables oferece este construtor de consultas realmente útil, onde você pode percorrer seus vários tipos de postagem e criar um filtro direcionado:

Da mesma forma, wpDataTables pode ajudá-lo a gerar consultas a um banco de dados externo usando a mesma interface visual.

Sincronizar com uma fonte externa

Outra opção interessante é sincronizar com uma fonte externa. Com este método, o plug-in atualizará automaticamente a tabela para cada recarregamento de página ( ou cada vez que o cache for limpo se você estiver usando um plug-in de cache ).

Aqui, você pode escolher entre uma variedade de fontes:

• consulta SQL
• arquivo CSV
• arquivo Excel
• Planilha do Google
• arquivo XML
• arquivo JSON
• Matriz PHP serializada

Criação Manual de Tabelas

Finalmente, você sempre pode criar uma tabela do zero. Ao seguir esse caminho, você primeiro configurará as colunas a serem usadas, bem como seus tipos de dados associados:

Em seguida, você pode inserir seus dados usando o editor do tipo Excel ou o editor padrão.

Preço do wpDataTables: Versão gratuita limitada / Pro a partir de US $ 59

Há uma versão limitada do wpDataTables no WordPress.org. No entanto, é apenas isso – “limitado”. Você pode usá-lo para tabelas simples com o construtor de tabelas simples, mas não será realmente uma opção para tabelas de dados sérias.

Se você precisar especificamente de um plug-in de tabela gratuito para tabelas de dados ou gráficos, talvez seja melhor usar uma opção diferente.

Onde wpDataTables realmente brilha, porém, é na versão premium.

Você pode comprar uma licença com um ano de suporte e atualizações ou pode comprar uma licença com suporte vitalício e atualizações. Todas as licenças incluem todos os recursos; a única diferença é o número de sites em que você pode usá-lo:

• Um site – $ 59 para uma licença de um ano ou $ 189 para uma licença vitalícia.
• Três sites – $ 109 para uma licença de um ano ou $ 389 para uma licença vitalícia.
• Sites ilimitados – $ 249 para uma licença de um ano ou $ 589 para uma licença vitalícia.

Você também pode economizar algum dinheiro com nosso código de cupom exclusivo wpDataTables.

Nota – Certifique-se de comprar diretamente no site do desenvolvedor. No passado, wpDataTables vendia exclusivamente através do mercado CodeCanyon da Envato. O desenvolvedor ainda mantém a página de listagem no CodeCanyon, mas o preço é muito mais alto do que comprar diretamente do desenvolvedor, então não recomendamos mais passar pelo CodeCanyon.

Revisão do wpDataTables: Nossas Considerações Finais

Depois de ter usado muitos plugins de tabela do WordPress, sinto-me bastante confiante em dizer que o wpDataTables é definitivamente uma das melhores soluções disponíveis.

É flexível na forma como você importa seus dados de tabela. E a interface torna o que poderia ser um processo complicado surpreendentemente simples.

Além disso, é fácil editar suas tabelas graças aos dois editores diferentes. E você tem muito controle sobre suas tabelas inteiras ou colunas individuais nas várias áreas de configuração.

Com o novo construtor de tabelas simples, você também pode usar wpDataTables para mais do que tabelas de dados. Você também pode usá-lo para tabelas de comparação de produtos mais visuais, tabelas de preços e assim por diante.

Finalmente, ser capaz de criar gráficos a partir do mesmo plugin é útil e a funcionalidade de gráficos é muito fácil de usar.

A única desvantagem é que a versão gratuita do wpDataTables no WordPress.org é bastante limitada, então você precisará pagar pela versão premium para acessar a maioria dos recursos.

Com isso dito, se você estiver disposto a pagar pela versão Pro, essa é definitivamente uma que você deve considerar.

E se você quiser ver algumas outras opções para trabalhar com tabelas no WordPress, confira nosso tutorial TablePress.

Obter wpDataTables

️ Não se esqueça de usar nosso cupom exclusivo wpDataTables para obter 20% de desconto.

Você ainda tem alguma dúvida sobre wpDataTables ou nossa revisão wpDataTables? Deixe-nos saber na seção de comentários.