- Criado por Deborah Melo de Carvalho, última alteração por Wesley Miranda de Oliveira em 09/07/2021
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 8 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. |
Aba de Estilos
Na tabela abaixo esta descrito os tipos de estilos disponíveis para o componente Tabela.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Cabeçalho da tabela | Table header | Estiliza o cabeçalho do componente. |
Linha ímpar | Ood line | Estiliza a linha ímpar do componente. |
Linha par | Even line | Estiliza a linha par do componente. |
Linha Hover | Hover Line | Estiliza a linha hover do componente. |
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
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 Itens (Figura 3).
Figura 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, selecione a tabela e na propriedade Itens, segure a coluna desejada e arraste para cima ou para baixo (Figura 4).
Figura 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.
Para que os dados sejam mostrados, selecione não na propriedade postergar carga (lazy) da fonte de dados.
Vincular a uma fonte de dados
Insira o componente fonte de dados e configure-a na área de design. 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 configurada (Figura 4.2).
Figura 5.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 dessa célula (Figura 4.3).
Figura 5.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 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.
Figura 5.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
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual
- Sem rótulos