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.
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, 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, após isso repetimos o processo com o campo abaixo do cabeçalho E-mail e selecionamos User.active.email.
Figura 4 - Vinculando coluna ao campo datasource
Após isso a tabela listará o campo selecionado com todos os dados contidos na fonte de dados, veja o exemplo da figura 1 para ver como ficou nossa tabela exemplo.
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