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
Nome | Propriedade | Função |
|---|---|---|
Fonte de dados | crn-datasource | Seleciona uma fonte de dados que já foi previamente criado no formulário. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta o componente. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Célula Tabela
Nome | Propriedade | Função |
|---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta o componente. |
Mesclar colunas | colspan | Campo usado para informar o número de colunas que uma célula irá expandir. |
Mesclar linhas | rowspan | Campo usado para informar o número de linhas que uma célula irá expandir. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Layout horizontal
Nome | Propriedade | Função |
|---|---|---|
Conteúdo | content | Esse campo define o texto que é exibido ao usuário. |
| Informações |
|---|
Para saber mais sobre o layout horizontal, clique aqui. |
Como usar
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 2).
Figura 2 - Selecionando a componente tabela na área de design
Adicionar / Remover coluna
Para adicionar ou remover uma coluna na tabela, basta selecionar a div da tabela e, em propriedades, ir no campo item Itens (Figura 23).
Figura 2 3 - Adicionar e remover coluna
Adicionar: adiciona uma coluna a tabela;
Remover: remove a coluna da tabela.
Alterar ordem da coluna
É possível alterar a ordem das colunas da tabela. Para isso, em itensselecione a tabela e na propriedade Itens, segure a coluna desejada e arraste para cima ou para baixo (Figura 34).
Figura 3 4 - 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.
| Nota |
|---|
Para que os dados sejam mostrados, selecione não na propriedade postergar carga (lazy) da fonte de dados. |
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. |
Vincular a uma fonte de dados
Após inserir e configurar a Insira o componente fonte de dados e configure-a na área de design, selecione . Selecione a div da tabela e, na aba Propriedades, role até o fim, clique em Exibir mais, procure pelo campo Fonte de dados e selecione a fonte de dados na propriedade Fonte de dados configurada (Figura 4.2).
Figura 45.2 1 - 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 Conteúdo dessa célula (Figura 4.3).
Figura 45.3 2 - 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 45.43) 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 (Figura 4.4).
Figura 45.4 3 - 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.
Nome em inglês
Table
Nessa página
| Índice | ||||
|---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual