Droptables : Mesa de estilo

1. Guia Formato

A guia formato está disponível à direita da tela por padrão. Ele contém diferentes parâmetros de estilo.

 

formato de tabela

 

  • Tipo de célula: padrão ou HTML (com editor). O tipo padrão permite fazer o cálculo com ele, inserindo o conteúdo HTML como imagens.
  • O fundo da célula é sobre como definir a cor do plano de fundo, é claro
  • Opções de borda e fonte pode ser aplicado em células únicas ou múltiplas
  • A largura / altura da linha e coluna pode ser definido em pixels. Selecione coluna ou linha em qualquer lugar da tabela e valide o tamanho.

 

tamanho da coluna da linha

 

Uma dica de ferramenta ao passar o mouse da célula também está disponível (precisa ser ativada nas opções do componente). Ao clicar no botão da dica de ferramenta, você pode editar o conteúdo visível no cursor do mouse na célula no frontend.

 

dica de ferramenta de célula de tabela

 

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

No Mesa guia, ainda na parte certa, você tem um seletor de tema em miniatura. Basta clicar em um tema para aplicá-lo. É altamente recomendável aplicar temas em tabelas novas, é realmente mais fácil alterar os dados então.

 

seleção de tema

 

Se você já possui dados em sua tabela e aplica 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.

 

Ainda na guia da coluna da tabela à direita, o parâmetro 2 quadros está aqui para definir a cor das linhas alternativas (linha1, linha2, linha1, linha2 ...)

 

dois quadros

 

O parâmetro classificável permite fazer a classificação de dados AJAX no frontend. Observe que, se você ativar a ferramenta de filtro, uma ferramenta de classificação de dados será ativada por padrão.  

 

tabela de classificação e filtro

 

  • Use tabela classificável: Sim não
  • Alinhar tabela: Central / Direita / Esquerda / Nenhuma
  • Tipo responsivo: Rolagem / ocultação de colunas
  • Ativar filtros: Sim não
  • Ativar paginação: Sim não
  • Número de linhas por página: 10, 20, ...
  • Classifique um cloumn por padrão: selecione o grupo A, B ou C, ...
  • Ordem classifique uma coluna por padrão: ASC / DESC

Filtro de dados e classificação no frontend

 

filtro de dados

 

O alinhamento da tabela é sobre o alinhamento da div que contém toda a tabela, centralize toda a tabela, por exemplo. As opções de congelamento de coluna e linha congelarão a seleção e permitirão uma rolagem no restante.

 

congelamento de linha

 

Tornar minhas tabelas responsivas ou usar a rolagem em dispositivos pequenos?

Droptables lidam com o design responsivo com uma ferramenta prioritária, como uma opção. Por padrão, o recurso responsivo está desabilitado, haverá um estouro (o que funciona muito bem no celular).

 

modo responsivo

 

O modo responsivo é avançado, você pode definir uma prioridade para ocultar colunas em tamanhos móveis. Quando as colunas estão ocultas, um menu móvel com a caixa de seleção será exibido para forçar a exibição / ocultação de 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 e você poderá rolar facilmente em dispositivos móveis.

Mesa com um pergaminho (melhor para uma pequena quantidade de colunas)

 

rolagem de tabela responsiva

 

Tabela com coluna oculta (melhor para uma grande quantidade de colunas)

 

responsive-table-cololumn-hide

 

Um destaque de célula também está disponível como opção. Você pode ativar esse recurso no  configuração. É desativado por padrão. Você pode ajustar a cor e a opacidade do realce.

 

destaque da tabela

 

3) Administração de ACL e Frontend

É possível gerenciar suas tabelas no front-end do Joomla . No gerenciador de menus do Joomla ,  adicione um novo menu item e selecione como tipo Gerenciar tabelas e selecione Droptables frontend como modelo.

 

menu- droptables

 

 

Aqui está o que você pode ver no Droptables Manager no frontend.

 

Droptables frontend

 

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

 

Você pode usar a ACL do grupo de usuários do Joomla para controlar as ações de edição da tabela. Primeiro, para configurar quem tem permissão para exibir tabelas, é necessário ativar o recurso Habilitar acesso à tabela (ACL) na configuração do Droptables .

 

frontend-table-edition

 

Além disso, você pode controlar a visibilidade da interface da tabela para cada tabela nas configurações da tabela (Guia Mais). Escolha um grupo de usuários do Joomla para permitir que um grupo veja a tabela no frontend.

 

user-group-acl

 

4) CSS customizado

Vamos dar um passo além. Se você é um webdesigner com habilidades de edição CSS, poderá adicionar css de  a guia Mais à direita.

Você pode adicionar preenchimento e raio da borda na célula.

 

padding-css

 

Células, linhas, colunas têm coordenadas para identificar cada uma e aplicar css personalizadas. R é linha, C é coluna. Aqui está a linha 1 (r1), coluna 4 (c4) = dtr1 dtc4

 

coordenadas css

 

O código CSS é colorido usando o espelho de código. O código css pode ser menos código, também funciona!

 

css-custom-table