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".