- Criado por Deborah Melo de Carvalho em 30/09/2019
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
Versão 1 Próxima »
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. |
Para saber mais sobre o layout horizontal, clique aqui.
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
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 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.
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.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.
Nome em inglês
Table
Nessa página
Compatibilidade
Formulário web
Equivalente web / mobile
O link será adicionado no final, após todos os componentes criados.
Botão do Componente
Imagem no Editor Visual
- Sem rótulos