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.

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Tabela

Célula Tabela

Layout horizontal

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.

Seleção da tabela

Como o componente é formando por diversas células, pode ser dificultoso selecionar a tabela. Assim, um método que funciona com todos os componentes e que pode ajudar bastante nesses casos é selecionar a div da tabela através da estrutura de árvore DOM, que fica logo abaixo da área de design. Assim, clique nessa área 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 tema 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 5.3) 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 coluna ao campo 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 para ver como ficou nossa tabela exemplo.