Como criar uma tabela dinâmica baseada em consulta SQL no Elementor

Inicialmente, verifique se o Tables Builder está ativado. A opção necessária está disponível seguindo WordPress Dashboard > JetEngine > Modules > External Modules . 

Ative o Construtor de Tabelas Dinâmicas se não estiver ativado. As alterações serão salvas automaticamente.

Leia a visão geral detalhada do Tables Builder para saber mais sobre seus recursos adicionais.

Agora, construiremos uma consulta SQL. Primeiramente, precisamos importar uma tabela SQL para o PhpMyAdmin . Depois de aberto, encontre o banco de dados que você está usando e abra a guia Importar .

Aqui, você pode pressionar o botão “ Escolher arquivo ” e selecionar o arquivo SQL necessário em seu computador.

Depois que todas as configurações de importação estiverem ajustadas, pressione o botão “ Ir ”.

Você pode alterar o título clicando no nome da tabela importada no diretório e abrindo a aba Operações . Altere o nome no campo Renomear tabela para, se necessário.

Se estiver pronto, reinicie o site WordPress para continuar a configuração.

A etapa seguinte é construir uma consulta . Navegue até WordPress Dashboard > JetEngine > Query Builder e adicione uma nova consulta clicando no botão correspondente.

Dê um nome à consulta e defina seu tipo de consulta como a opção “Consulta SQL/AI”.

Na seção Consulta SQL personalizada , selecione a tabela recém-criada na lista suspensa Da tabela .

Prossiga para a edição adicional. À medida que nossa tabela estatística analisa as estatísticas do YouTube, podemos definir uma ordem de visualizações. Para incorporar algo semelhante, role para baixo até o campo Order & Order By e pressione “ Adicionar novo parâmetro de classificação ”.

Além disso, especificaremos o Limite Mostrar/Por Página para definir quantos itens serão exibidos por página.

Consulte outros campos de personalização e clique no botão “ Adicionar consulta ” para salvar as alterações.

Navegue até Painel do WordPress > JetEngine > Construtor de tabelas . Adicione uma nova tabela clicando no botão “ Adicionar Nova ”.

Vamos começar com a primeira guia Configurações Gerais . Dê um título à tabela e escolha a consulta criada como fonte da Consulta de Dados . Pressione o botão “ Fetch Data ” para ativar a conexão entre a consulta e a tabela.

Indo para a seguinte guia Colunas , anexe as colunas desejadas à tabela. Selecionamos “Valor bruto” como conteúdo da coluna e “Coluna buscada” como fonte de dados .

Adicione o número desejado de colunas pressionando o botão “ Nova coluna ” sempre que precisar configurar uma nova coluna da tabela.

Em seguida, ajuste as configurações disponíveis na guia Estilos de tabela . Aqui são apresentadas todas as colunas criadas. No entanto, você sempre pode estilizar a tabela no Elementor Page Builder se as modificações sugeridas não forem suficientes.

O valor do campo Largura define a largura da coluna. Pode ser apresentado em qualquer string suportada por CSS.

Você também pode clicar no botão “ Recarregar visualização ” para verificar a tabela criada.

Quando terminar, clique no botão “ Criar Tabela ”. A próxima etapa é adicionar a tabela ao site. Prossiga para a página onde deseja colocar a tabela recém-construída.

Vá para Painel do WordPress> Páginas e crie uma nova página ou abra a existente no Elementor Page Builder. 

Coloque o widget Tabela Dinâmica . Escolha a tabela que você acabou de criar como fonte.

Depois de ativar todas as opções necessárias na guia Conteúdo , prossiga para a guia Estilo . Aqui, você pode criar um estilo de tabela personalizado. Verifique a guia Avançado se forem necessárias personalizações adicionais. 

Assim que a tabela Elementor estiver estilizada, clique no botão “ Publicar ”.

Agora você pode verificar o resultado no front end.