Documentação HorusBI
Buscar K

Aparência

Tabela ​

O Widget de Tabela é uma ferramenta de alta performance projetada para exibir grandes volumes de dados detalhados dentro dos Dashboards.

🔍 Visões e Navegação (Drill-through) ​

Uma das funcionalidades mais poderosas da Tabela é o sistema de Visões Alternativas. Ele permite criar múltiplas "abas" ou estados diferentes para os mesmos dados, facilitando a exploração progressiva.

1. Visão Principal vs Alternativas ​

  • Visão Principal: É a configuração padrão exibida quando o Widget carrega
  • Visões Alternativas: São configurações adicionais (com colunas, filtros e ordenações próprias) que podem ser acessadas via menu dropdown ou gatilhos automáticos

2. Gatilhos Automáticos (Disparar por Filtro) ​

É possível configurar uma Visão para ser ativada automaticamente quando o usuário realiza um filtro específico no Dashboard.

  • Cenário: Imagine uma tabela de "Vendas por Estado"
  • Configuração: Crie uma Visão Alternativa "Detalhe por Cidade" e configure o gatilho na coluna "Estado"
  • Comportamento: Quando o usuário clicar em uma barra de outro gráfico filtrando "SP", a tabela detecta o filtro e alterna automaticamente para a Visão de "Cidades de SP". Isso cria uma experiência fluida de Drill-through sem necessidade de botões ou links

📐 Layout e Colunas ​

Largura das Colunas ​

Há controle total sobre o comportamento na tela:

  • Automático (Padrão): O navegador decide a largura baseada no conteúdo. Se houver muitas colunas, uma barra de rolagem horizontal aparecerá automaticamente
  • Manual: Permite definir a largura exata de cada coluna em % (porcentagem)
    • Comportamento: O modo manual força a tabela a ocupar exatos 100% da largura disponível, desabilitando a rolagem horizontal. É ideal para criação de tabelas limpas e fixas
    • Texto Excedente: É necessário decidir o que fazer quando o texto for maior que a coluna:
      • Automático: Adapta o texto na coluna
      • Quebrar Linha: Aumenta a altura da linha para melhor encaixe do texto
      • Reticências (...): Corta o texto e adiciona "..." ao final

Congelamento de Colunas ​

  • Congelar Colunas: Fixa as colunas iniciais selecionadas à esquerda, mantendo-as sempre visíveis durante a rolagem horizontal
  • Quantidade de Colunas: Configure quantas colunas congelar (mínimo 1, máximo = total de colunas - 1)

TIP

Essencial para tabelas largas onde a coluna "Nome" ou "Código" precisa estar sempre visível durante a navegação horizontal.

Contador de Linhas (#) ​

  • Adiciona uma coluna à esquerda numerando as linhas (1, 2, 3...)

NOTE

Este número é visual e fixo. Se a tabela for reordenada, o primeiro registro continuará sendo o número 1.

Alinhamento Padrão ​

Configure o alinhamento padrão para toda a tabela:

  • Alinhamento do Cabeçalho: Define como os títulos das colunas são alinhados. Opções: Padrão, Esquerda, Centralizado, Direita
  • Alinhamento do Corpo: Define como os dados nas células são alinhados. Opções: Padrão, Esquerda, Centralizado, Direita

TIP

No modo "Padrão", os números são automaticamente alinhados à direita e textos à esquerda. Use as opções "Forçar" para sobrescrever esse comportamento.

📊 Totalizadores ​

A tabela pode exibir uma linha de rodapé com totais. Existem dois modos de cálculo, configuráveis por coluna (Engrenagem > Lógica do Totalizador):

1. Nativo (Expressão) ​

  • O que é: O valor vem calculado diretamente do banco de dados/backend
  • Uso: Obrigatório para médias ponderadas, tickets médios ou razões (% Margem). O backend sabe a fórmula correta (Sum(Lucro) / Sum(Venda))

2. Manual (Soma/Média/Min/Max) ​

  • O que é: O frontend pega os valores visíveis na tabela e aplica uma operação matemática simples
  • Uso: Útil quando o usuário deseja apenas somar o que "está vendo"

WARNING

Em tabelas filtradas, isso pode gerar confusão se o conceito matemático da métrica não permitir soma simples (somar porcentagens).

🎨 Formatação Avançada ​

Cada coluna possui um menu de configuração detalhado (ícone de Engrenagem ou clique no cabeçalho na edição).

1. Estética da Célula ​

  • Rótulo Customizado: Renomeie a coluna apenas para esta visualização
  • Alinhamento: Esquerda, Centro ou Direita (pode sobrescrever o padrão numérico)
  • Tooltip: Adicione explicações que são reveladas ao passar o mouse sobre o cabeçalho (útil para dicionário de dados)

2. Formatação Numérica ​

  • Listas: Formatos pré-definidos (Moeda, Porcentagem, Inteiro)

3. Coloração Condicional ​

Existem três estratégias para colorir células ou textos (Vermelho/Verde):

  • Por Escala (Heatmap): Define faixas numéricas (0 a 50 = Vermelho, 50 a 100 = Verde)
  • Por Valor: Define cores para textos exatos (exemplo: Status "Atrasado" = Vermelho)
  • Por Expressão (JavaScript): Regra livre para lógica complexa
    • Exemplo: if (this.value > 1000) return '#00ff00' (Retorna em coloração verde se venda for alta)
  • Estilo: É possível colorir a Célula Inteira (fundo) ou apenas adicionar um Indicador (bolinha colorida "traffic light") ao lado do valor

4. Formatação de Linha Inteira (Row Formatter) ​

Na configuração global da tabela, é possível definir uma expressão que reflete na linha inteira, não apenas em uma célula.

  • Colore o fundo da linha de cinza se o produto estiver "Inativo"
  • Para configurar, marque a opção "Formatação avançada de linha", na seção "Avançado" da aba Visual
  • Utilize expressões JavaScript para retornar estilos CSS baseados nos valores da linha

🖥️ Aparência Global ​

Estilo Visual ​

  • Aparência: Escolha entre Padrão, Transparente ou Destacado para alterar a moldura visual do Widget
  • Densidade (Espaçamento): Pequeno, Médio ou Grande. Reflete na altura das linhas
  • Zebrado: Alterna cores de fundo das linhas para facilitar a leitura em tabelas largas
  • Fonte: Configura o tamanho das fontes em Pequeno, Médio ou Grande

Quebra de Linha ​

Configure se os textos realizam quebra de linha automaticamente:

  • Quebra no Cabeçalho: Títulos longos organizados em múltiplas linhas
  • Quebra no Corpo: Conteúdo nas células organizado em múltiplas linhas

NOTE

Útil para tabelas com pouco espaço horizontal onde as colunas têm nomes ou valores extensos.

Cores Personalizadas ​

Marque a opção "Customizar Cores" na aba Visual para ter controle total sobre as cores da tabela:

  • Cor do Texto do Cabeçalho: Cor da fonte nos títulos das colunas
  • Cor de Fundo do Cabeçalho: Cor de fundo da linha de títulos
  • Cor do Texto do Corpo: Cor da fonte nas células de dados
  • Cor de Fundo do Corpo: Cor de fundo das linhas de dados
  • Cor da Linha Ímpar (Zebrado): Cor de fundo para linhas ímpares quando o zebrado está ativo
  • Cor do Texto do Rodapé: Cor da fonte na linha de totais
  • Cor de Fundo do Rodapé: Cor de fundo da linha de totais

Bordas das Células ​

Controle fino sobre as bordas internas das células:

  • Estilo: Nenhuma, Horizontal, Vertical ou Todas
  • Espessura: Fina, Média ou Grossa
  • Cor: Coloração da borda (disponível quando cores personalizadas estão ativas)

⚙️ Comportamento ​

Campos para Relatório (Drill-through) ​

  • Defina quais colunas serão exibidas na visualização detalhada ao clicar em uma linha
  • Permite criar Relatórios exploratórios a partir dos dados da tabela

Mostrar Itens Sem Valores ​

  • Quando ativado, exibe linhas mesmo que não haja dados para algumas colunas

TIP

Útil para garantir que todas as dimensões apareçam, mesmo sem métricas associadas.

Limite de Linhas (Top N) ​

  • Define um número máximo de linhas a serem exibidas
  • Valor 0 significa sem limite

TIP

Útil para criar rankings ou listas "Top 10".