- Criado por Deborah Melo de Carvalho, última alteração em 03/12/2020
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
« Anterior Versão 6 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 a 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 mobile
Não possui.
Botão do Componente
Imagem no Editor Visual
- Sem rótulos