Tabela

1. Geral

O componente TABELA é utilizado para exibir dados de forma estruturada em linhas e colunas. Ele oferece funcionalidades como agrupamento, entrada de dados e personalização de layout, facilitando a análise e a manipulação dos dados diretamente pela interface. Entre as interações disponíveis, destacam-se: ação de database, filtrar outros componentes, formulário, modal de detalhes, drill, entre outras.

2. Como Configurar

Arraste para a Tela: Arraste o componente Tabela para a tela onde deseja exibir os dados.

2.1. Dados

Configurar a VIEW: Configure a VIEW através de SQL, VIEW Análise de Dados ou VIEW de Cadastro para alimentar a tabela com informações do seu database.

2.2. Personalizar

2.2.1. Configurações Gerais

Agrupar Tabela: Ative essa opção para agrupar automaticamente as linhas da tabela em grupos e subgrupos. Essa funcionalidade está disponível apenas para VIEWS do tipo Cadastro ou Análise de Dados.

Para que o agrupamento funcione, a VIEW deve conter pelo menos dois agrupadores.

É possível configurar:

• A quantidade de níveis de agrupamento, conforme os agrupadores definidos na VIEW.

• Se os grupos serão exibidos inicialmente expandidos ou recolhidos.

• Se os agrupadores serão clicáveis, permitindo que o usuário copie o texto do agrupador ou abra modais diretamente a partir deles.

• Se os totais por agrupador serão exibidos diretamente na tabela.

Larguras Manuais: Permite definir a largura de cada coluna manualmente após a VIEW estar configurada. Quando ativado para VIEW de SQL, exibe apenas as colunas sem listar eixo e bloco.

Entrada de Dados Automática: Permite que os dados inseridos na tabela sejam salvos automaticamente. Recomendado utilizar em conjunto com as funcionalidades "Atualizar Automaticamente Dados de Colunas" e "Reatividade" para maior otimização da tela. Para mais detalhes, leia o tópico 2 da documentação "Entrada de Dados".

Atualizar Automaticamente Dados de Colunas: Essa funcionalidade permite que os valores de colunas sejam atualizados automaticamente sempre que um dado for alterado.

• Por exemplo: Se você tem uma coluna de cálculo (como um total) que depende de outra coluna (como quantidade), ao alterar a quantidade via entrada de dados, a tabela atualiza automaticamente o valor do total, sem a necessidade de ações adicionais. Isso garante que as informações exibidas na tabela estejam sempre corretas e atualizadas conforme o usuário interage com os dados.

Busca: Ative para permitir a busca direta na tabela por qualquer valor exibido.

Permitir Redimensionar Colunas: Permite que o usuário ajuste o tamanho das colunas manualmente.

Adição de Linhas: Permite que o usuário adicione novas linhas manualmente, através de um formulário.

Grid para quem ama planilhas: Ative para permitir filtros e reordenação de colunas, semelhante ao Excel e Google Sheets.

• Atenção: Essa opção não aceita entrada de dados.

Congelar Colunas: Permite definir quais colunas ficarão fixas ao realizar um scroll horizontal.

2.2.2. Design

Altura da Linha e Header (px): Defina a altura das linhas e do cabeçalho da tabela.

Cores: Define a cor das seções da tabela

Tamanho da Fonte: Define o tamanho da fonte das células e do cabeçalho.

Alinhamento do Conteúdo: Define o alinhamento das colunas dos agrupadores, com as opções: Padrão, Esquerda, Direita ou Centro.

• Para alinhar as demais colunas da tabela, é necessário utilizar a configuração do bloco de dados de cada coluna, disponível ao usar uma VIEW de Cadastro ou uma VIEW de Análise de Dados.

2.2.3. Imagem em Células

Ao utilizar uma VIEW de Cadastro ou uma VIEW de Análise de Dados, é possível configurar a forma como os dados serão exibidos por meio da opção "Mostrar como", disponível nas configurações avançadas de cada bloco de dados.

Os formatos disponíveis são: Texto, Imagem, Documento, Checkbox e Tempo, permitindo que as informações sejam representadas visualmente de diferentes maneiras.

Quando a opção Imagem for selecionada, é possível configurar os seguintes parâmetros na seção de personalização:

• Raio: Define o arredondamento das bordas da imagem.

• Altura: Define a altura da imagem exibida na célula.

• Largura: Define a largura da imagem exibida na célula.

2.2.4. Agrupamento de Blocos

Habilita o agrupamento automático de colunas em blocos. Cada coluna pode ser considerada um bloco individual, mas caso deseje agrupar duas ou mais colunas em um mesmo bloco, basta atribuir o mesmo nome de grupo às colunas desejadas.

2.2.5. Reatividade

Escolher manualmente os componentes que serão atualizados: Caso queira entender como e porque usar esta funcionalidade, acesse a documentação "Reatividade".

2.3. Interações

Nenhuma: O componente não terá interação.

Ação: Define uma ação a ser executada ao interagir com a tabela.

Ação de Database: Permite realizar operações de manipulação de dados como INSERT, UPDATE ou DELETE.

Filtrar Outros Componentes: Permite que a tabela atue como filtro para outros componentes exibidos na tela.

Formulário: Permite abrir um formulário ao interagir com a tabela.

Modal de Detalhes: Permite abrir um modal com detalhes específicos de um item da tabela.

Modal: Permite abrir um modal ao interagir com a tabela.

Outras Interações:

• Drill: Permite aprofundar os dados exibidos na tabela.

• Foco: Permite destacar a tabela sobre a tabela.

• Esconder Colunas: Permite ocultar colunas específicas.

• Exportar para XLSX: Permite exportar os dados da tabela para um arquivo Excel.

• Trocar Componente: Permite trocar o componente da tabela por outro tipo de componente.

• Habilitar iReport: Ative para habilitar relatórios personalizados.

• Utilizar eixo X em seleções: Define se o eixo X será passado como filtro em outras interações.

3. Entrada de Dados

A funcionalidade de entrada de dados, disponível ao utilizar VIEW de Cadastro ou VIEW de Análise de Dados, permite que o usuário edite informações diretamente nas células da tabela. Para ativar a entrada de dados, acesse a VIEW utilizada na tabela, localize a coluna desejada, clique nos três pontinhos e ative a opção "Entrada de Dados".

A tabela pode apresentar diferentes comportamentos visuais de acordo com o estado da célula:

• Sem Entrada de Dados: Célula com aparência padrão, sem possibilidade de edição.

• Entrada de Dados Ativada, sem salvamento: Célula com destaque visual (rosa forte), indicando que houve edição, mas os dados ainda não foram salvos.

• Entrada de Dados Ativada, dados salvos: Célula com destaque em rosa claro, indicando que é permitido a edição do dado e que os dados estão salvos.

A entrada de dados é compatível com diferentes tipos de campos, e o comportamento da célula varia de acordo com o tipo de dado configurado na VIEW:

• Campos de texto: Permitem a digitação livre de qualquer valor textual diretamente na célula.

• Campos numéricos: Aceitam apenas números e exibem validações automáticas ao tentar inserir outros tipos de valor.

• Campos de data: Exibem automaticamente um calendário para facilitar a seleção da data.

• Campos do tipo FK (chave estrangeira): Apresentam uma lista suspensa (dropdown) com as opções disponíveis no cadastro relacionado, permitindo que o usuário selecione um valor válido.

Para aprender a configurar a entrada de dados da sua tabela, leia a documentação de "Entrada de Dados".

4. Botão Dentro da Célula da Tabela

É possível adicionar um botão diretamente dentro de uma célula da tabela, permitindo que o usuário execute uma ação a partir da própria linha onde o dado está exibido.

4.1. Como configurar

• Crie um atributo do tipo função na sua VIEW (apenas VIEW de Cadastro ou VIEW de Análise de Dados).

• No conteúdo da função, insira o título do botão entre aspas (ex: "Apagar").

• Após isso, vá até as configurações desse dado e vincule a ação desejada.

O botão será exibido na célula e acionará a ação configurada quando clicado. É ideal para situações onde o usuário precisa realizar interações rápidas diretamente nos registros exibidos.

4.2. Bloqueio de Botão

Também é possível bloquear o botão por linha, utilizando um segundo bloco de dado na VIEW para controlar essa condição.

Para isso: Crie um novo dado do tipo função na VIEW ou utilize um atributo que já retorne os valores necessários.

Esse atributo deve retornar:

• Qualquer valor diferente de 0 ou null para bloquear o botão;

• 0 para liberar o botão.

Nas configurações do bloco de dados que representa o botão, utilize a opção "Bloqueio de Botão" para selecionar a coluna da VIEW que controlará essa funcionalidade.

Para que esse dado de controle não seja exibido como uma coluna da tabela na interface, marque-o como oculto, garantindo que ele atue apenas como uma regra interna de bloqueio.