Função
Tabela Simples, assim como o componente Tabela é um componente que permite a exibição de dados de forma organizada, muito parecida com a grade. No entanto, ainda mais 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
Ao arrastar o componente para uma view, uma tela de configuração aparece para você definir a estrutura da tabela, segue abaixo (Figura 2) a definição dos campos. Após configurar e pressionar o botão de OK, essa janela não poderá ser aberta novamente, apenas arrastando uma nova tabela.
Figura 2 - Tela de configuração do componente Tabela Simples
- Número de Colunas: Define o número de coluna que será usado na tabela
- Número de Linhas: Define o número de linha inicial que será usado na tabela
- Rótulo: Define um título para a tabela
- Tema Cabeçalho: Define o tema para o cabeçalho, podendo ser Info, Sucess, Danger, Warning ou Active.
- Tema Copo: Define o tema das linhas da tabela, podendo ser Info, Sucess, Danger, Warning ou Active.
- Tema Rodapé: Define o tema do Rodapé da tabela, podendo ser Info, Sucess, Danger, Warning ou Active.
- Fonte de dados: Seleciona e configura a fonte de dados que será usada para definir valores dinâmicos em uma tabela, acesse o tópico Principais propriedades na figura 1.3 da documentação da Fonte de dados para mais detalhes.
- Exibir Cabeçalho: Se ativado, Além do corpo da tabela, terá um cabeçalho para cada coluna.
- Exibir Rodapé: Funciona como o Cabeçalho, porém na parte inferior da tabela.
- Exibir Flutuação:
- Exibir Borda: Exibe uma borda separando as células na tabela.
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 3).
Figura 3 - Selecionando campos da tabela
Alterar cabeçalho da tabela
Para alterar o cabeçalho da tabela, basta alterar a propriedade Conteúdo dessa célula (Figura 3.1).
Figura 3.1 - Alterando tema do cabeçalho
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.
Nome em inglês
Simple Table
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual