Droptables: Tabela de Estilo

1. Formatar em tabela

Na barra de ferramentas, você pode definir o estilo da célula, como: fonte, tamanho da fonte, estilo do texto, cor de fundo da célula, cor do texto, alinhamento horizontal e vertical da célula... Isso pode ser aplicado a uma única célula ou a várias células.

A altura da linha e a largura da coluna podem ser definidas em pixels. Para isso, acesse o menu Formatar > Aplicar tamanho de coluna/linha e selecione Redimensionar coluna / Redimensionar linha . Na janela que abrir, você poderá selecionar o intervalo e definir os valores em pixels para colunas ou linhas. Clique no Concluído para finalizar.

2. Opções de tema e classificação

Em cada tabela, você encontrará de seleção de tema no menu Tema . Basta clicar em um tema para aplicá-lo.

Se você já tiver dados em sua tabela e aplicar um tema, todos os dados serão removidos. Se você aplicar um tema em uma nova tabela, dados e estilos de exemplo serão adicionados e poderão ser editados.

No mesmo menu Tema > Cores alternativas , o recurso "Estilo automático" permite colorir as linhas da sua tabela com para cabeçalho e rodapé . Você pode selecionar os estilos de modelo ou criar os seus próprios nas configurações do plugin.

O parâmetro sortable permite que você faça a ordenação de dados AJAX no frontend. Você pode ver isso em Formatar > Ordenar .

O alinhamento da tabela serve para alinhar a div que contém toda a tabela, centralizando-a completamente, por exemplo. Você pode encontrar essa opção em Formatar > Alinhamento da tabela .

O destaque de células também está disponível como opção. Você pode habilitar as opções Linha, Coluna ou Ambas na configuração . Elas estão desabilitadas por padrão. Você pode ajustar a cor e a opacidade do destaque.

Uma dica de ferramenta que aparece ao passar o mouse sobre a célula também está disponível (precisa ser ativada nas opções do componente). Em cada célula da tabela, você pode ver a de dica de ferramenta ao clicar com o botão direito do mouse sobre ela.

Você pode definir a largura da dica de ferramenta em pixels. Isso abrirá uma dica de ferramenta com um editor para edição.

Adicione o conteúdo e salve, pronto, a dica de ferramenta será exibida no lado público ao passar o mouse sobre ela.

4. Administração de ACL e Frontend

É possível gerenciar suas tabelas a partir da interface do Joomla. No gerenciador de menus do Joomla, adicione um novo item de menu, selecione " Gerenciar Tabelas" como tipo e escolha Droptables frontend - Padrão" como modelo.

Aqui está o que você pode ver do Gerenciador Droptables na interface do usuário.

Nota: Para exibir a interface do gerenciador de tabelas em tela cheia no frontend, você deve escolher Estilo do Modelo > Droptables no frontend.

Você pode usar a ACL do Grupo de Usuários do Joomla para controlar as ações de edição das tabelas. Primeiro, para configurar quem tem permissão para visualizar as tabelas, acesse a Funções de Usuário" na Droptables .

Você pode definir o proprietário de uma mesa em Menu Mesa > Acesso à mesa.

5. Congelamento de linhas e colunas

Congelamento da coluna

O congelamento de colunas está disponível no menu Formatar > Opções responsivas . Você pode congelar até 5 colunas, contando a partir da primeira.

Para congelar colunas/linhas, existe uma opção adicional que permite fixar a altura da tabela (já que o contêiner da tabela pode ter altura infinita).

Depois de selecionar a coluna que deseja congelar, você poderá rolar a tabela e sempre exibirá a coluna fixa.

congelamento de fileiras

Você pode encontrar essa opção em Menu Formatar > Cabeçalho da tabela . A partir daí, você pode ativá-la e definir o número de linhas a serem congeladas (até 5 linhas).

Se você deseja definir a altura da tabela, volte às opções Responsivas.

Em seguida, a primeira linha será congelada no frontend de acordo com a configuração.

6. Filtragem de dados de coluna

Uma opção de filtragem está disponível em Menu Formatar > Filtros . Você pode ativá-la clicando para habilitar os campos de filtragem de dados públicos.

Exemplo de filtros:

7. Preenchimento da célula e raio da borda

Você pode encontrar o ícone de borda na barra de ferramentas, que ajuda a ajustar o espaçamento interno e o raio da borda da célula.

8. CSS personalizado

Vamos um passo além. Se você for um web designer com habilidades em edição de CSS, poderá adicionar CSS em Formatar Menu > CSS Personalizado .

Células, linhas e colunas possuem coordenadas para identificar cada uma e aplicar CSS personalizado. R representa a linha e C a coluna. Aqui, temos linha 1 (r1), coluna 4 (c4) = dtr1 dtc4

O código CSS é colorido usando o recurso de espelhamento de código. O código CSS pode ser mais conciso, e também funciona!

9. Tabelas Joomla responsivas

Minhas tabelas são responsivas ou usam a rolagem em dispositivos pequenos?

Escondendo colunas

Droptables lida com o design responsivo por meio de uma ferramenta de prioridade, como uma opção. Por padrão, o recurso responsivo está desativado, o que resultará em conteúdo que ultrapassa os limites (mas que funciona muito bem em dispositivos móveis). Para usar "Ocultar colunas" , você deve acessar Formatar menu > Opções responsivas.

O modo responsivo é avançado, permitindo definir uma prioridade para ocultar colunas em telas de dispositivos móveis. Quando as colunas estão ocultas, um menu para dispositivos móveis com uma caixa de seleção será exibido para forçar a exibição/ocultação das colunas.
O tamanho da coluna é fixo durante a edição da tabela. Se o tamanho de todas as colunas for muito grande para o contêiner, haverá um estouro de conteúdo, e você poderá rolar facilmente em dispositivos móveis.

Tabela com barra de rolagem (melhor para um número reduzido de colunas)

Tabela com coluna oculta (melhor para um grande número de colunas)

Cabeçalho repetido

Esta é outra opção se você quiser inserir uma tabela em uma área pequena do seu site. Você deve navegar até Formato do Menu > Opções Responsivas. Em seguida, selecione Tipo Responsivo > Cabeçalho Repetido.

Haverá opções de personalização de acordo com a sua necessidade:

Ponto de interrupção responsivo (px): Selecione um valor de ponto de interrupção em pixels para definir quando a tabela alternará para este modo responsivo.
Altura máxima responsiva (px): Quando o modo responsivo está ativado, dependendo do valor do breakpoint, defina uma altura máxima para evitar tabelas muito longas.
Estilo do modo responsivo: Aplique um estilo padrão para este modo responsivo ou use as cores da tabela.

Depois disso, você poderá ver como a tabela ficará na interface do usuário.

10. Baixar tabela

Para compartilhar sua tabela com o público, acesse o Menu Tabela e marque a Exportar para Excel . O tipo de arquivo será *.xlsx ao ser baixado na interface pública.

11. Paginação

Você encontra essa função em Menu Formatar > Paginação em cada edição da tabela. Use o botão de alternância para ativar e selecione o número de linhas a serem exibidas por página.

12. Formato para células individuais

Você pode definir o formato: Data e hora, Moedas, Número para uma ou mais células em Droptables . Primeiro, selecione uma ou mais células. Em seguida, acesse o menu Formatar > Data e hora.

Depois disso, as moedas e os números podem ser feitos da mesma maneira.

13. Imprimir tabela na interface

Às vezes, você precisa imprimir sua tabela. Para exibir o botão Imprimir na interface, primeiro você deve acessar o Menu Tabela e marcar Botão Imprimir .