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. |
| Informações |
|---|
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.
| Nota |
|---|
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
| Índice | ||||
|---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual