Função

Tabela Simples, assim como o componente Tabela é um componente que permite a exibição de dados de forma organizada, muito parecida com a grade. No entanto, ainda mais simples. Apesar de poder trabalhar com dados dinâmicos através do vínculo com a Fonte de dados, esse componente normalmente é utilizado para trabalhar com dados estáticos.

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Tabela

Célula Tabela

As propriedades abaixo serão exibidas ao selecionar uma das células da tabela, podendo ser a célula do cabeçalho da tabela ou célula comum.

Layout horizontal

Dentro de cada célula da tabela possui um subcomponente Layout horizontal que tem a função de exibir o conteúdo da célula.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Tabela Simples.

Como usar

Ao arrastar o componente para uma view, uma tela de configuração aparece para você definir a estrutura da tabela. Segue abaixo (Figura 2) a definição dos campos. Após configurar e pressionar o botão de OK, essa janela não poderá ser aberta novamente, apenas arrastando uma nova tabela.

Figura 2 - Tela de configuração do componente Tabela Simples

• Número de Colunas: define o número de coluna que será usado na tabela;
• Número de Linhas: define o número de linha inicial que será usado na tabela;
• Rótulo: define um título para a tabela;
• Tema Cabeçalho: define o tema para o cabeçalho, podendo ser Info, Sucess, Danger, Warning ou Active;
• Tema Copo: define o tema das linhas da tabela, podendo ser Info, Sucess, Danger, Warning ou Active;
• Tema Rodapé: define o tema do Rodapé da tabela, podendo ser Info, Sucess, Danger, Warning ou Active;
• Fonte de dados: seleciona e configure a fonte de dados que será usada para definir valores dinâmicos em uma tabela, acesse o tópico "Principais propriedades" em Componente visual fonte de dados para mais detalhes;
• Exibir Cabeçalho: se ativado, além do corpo da tabela, terá um cabeçalho para cada coluna;
• Exibir Rodapé: funciona como o cabeçalho, porém na parte inferior da tabela;
• Exibir Flutuação: destaca a linha que o cursor do mouse esta em cima;
• Exibir Borda: exibe uma borda separando as células na tabela.

Seleção da tabela

Como o componente é formando por diversas células, pode ser dificultoso selecionar a tabela simples. Assim, um método que funciona com todos os componentes e que pode ajudar bastante nesses casos é selecionar a div da tabela simples através da estrutura de árvore DOM, que fica logo abaixo da área de design (1 da figura 3), ou pela aba de Hierarquia (2 da figura 3). Assim, clique em alguma dessas áreas que ele fará a seleção do componente ou subcomponente (Figura 3).

Figura 3 - Selecionando campos da tabela

Alterar cabeçalho da tabela

Para alterar o cabeçalho da tabela, basta alterar a propriedade Conteúdo dessa célula (Figura 3.1).

Figura 3.1 - Alterando conteúdo do cabeçalho

Vincular coluna ao campo do datasource

Por fim, para linkar os dados da fonte de dados com a coluna da tabela, basta selecionar a célula (item 1 da figura 4) e, na propriedade Conteúdo (2), clicar em ”…” para abrir a janela de configuração do conteúdo. Selecione a aba Campo de tela (3) e escolha qual dos campos da fonte de dados (4) será exibido na célula, após isso repetimos o processo com o campo abaixo do cabeçalho E-mail e selecionamos User.active.email.

Figura 4 - Vinculando a coluna do componente ao campo do datasource

Após isso a tabela listará o campo selecionado com todos os dados contidos na fonte de dados, veja o exemplo da figura 1 como ficou nossa tabela exemplo.