Função

Tabela é um componente que permite a exibição de dados de forma organizada, muito parecida com a grade. No entanto, ela é extremamente simples.

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Tabela

Célula Tabela

Layout horizontal

Como usar

Adicionar / Remover coluna

Para adicionar ou remover uma coluna na tabela, basta selecionar a tabela e, em propriedades, ir no campo item (Figura 2).

Figura 2 - Adicionar e remover coluna

1. Adicionar: adiciona uma coluna a tabela;

2. Remover: remove a coluna da tabela.

Alterar ordem da coluna

É possível alterar a ordem das colunas da tabela. Para isso, em itens, segure a coluna desejada e arraste para cima ou para baixo (Figura 3).

Figura 3 - Alterando ordem da coluna na tabela

Configurando a tabela

A tabela serve tanto para exibir dados provenientes de uma fonte de dados quanto dados estáticos. Para exibir os dados dinâmicos, primeiro é feito a adição e configuração do componente fonte de dados no formulário.

Seleção da tabela

Como o componente é formando por diversas células e por isso 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 ( destaque em amarelo na Figura 4.1). Assim, clique nessa área que ele fará a seleção do componente.

Figura 4.1 - Selecionando o componente tabela na área de design

Vincular a uma fonte de dados

Após inserir e configurar a fonte de dados na área de design, selecione a tabela e, na aba Propriedades, selecione a fonte de dados na propriedade Fonte de dados (Figura 4.2).

Figura 4.2 - Selecionando a fonte de dados para a tabela

Alterar cabeçalho da tabela

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

Figura 4.3 - Alterando o cabeçalho da coluna

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.4) e, na propriedade Conteúdo, 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 (Figura 4.4).

Figura 4.4 - Selecionando a coluna da fonte para exibir os dados na tabela

Após isso a tabela listará o campo selecionado com todos os dados contidos na fonte de dados.