Tabela
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
Aba de Propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
|---|---|---|
Fonte de dados | crn-datasource | Seleciona um Componente visual 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. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Cronapp MVC usada para mostrar ou oculta o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Itens | - | Permite adicionar, ordenar, configurar e excluir as colunas da tabela. |
Aba de Eventos
Na tabela abaixo estão descritos os eventos disponíveis para o componente.
Nome | Propriedade | Função |
|---|---|---|
Ao Iniciar | ng-init | Executa uma ação assim que o componente é renderizado na tela. |
Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
Ao Duplo Clicar | ng-dblclick | Executa uma ação quando o usuário clica duas vezes seguidas com o botão do mouse em um componente. |
Ao Entrar com Mouse | ng-mouseenter | Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do componente. |
Ao Sair com Mouse | ng-mouseleave | Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do componente. |
Ao Mover Mouse | ng-mousemove | Executa uma ação enquanto o ponteiro do mouse está sendo movido sobre o componente. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente.
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
As propriedades abaixo serão exibidas ao selecionar uma das células da tabela, podendo ser a célula do cabeçalho da tabela ou célula comum.
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. |
Estilo | style | Altera o estilo geral do componente da foram inline. |
Exibir | ng-show | Propriedade Cronapp MVC 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. (ex: 2) |
Mesclar linhas | rowspan | Campo usado para informar o número de linhas que uma célula irá expandir. (ex: 2) |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Layout horizontal
Dentro de cada célula da tabela possui um subcomponente Layout horizontal que tem a função de exibir o conteúdo da célula.
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. |
Conteúdo | content | Esse campo define o texto que é exibido ao usuário. |
Estilo | style | Altera o estilo geral do componente da foram inline. |
Exibir | ng-show | Propriedade Cronapp MVC 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. (ex: 2) |
Mesclar linhas | rowspan | Campo usado para informar o número de linhas que uma célula irá expandir. (ex: 2) |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
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. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Configuração
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 (1 da figura 2), ou pela aba de Hierarquia (2 da figura 2). Assim, clique em alguma dessas áreas 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
O componente visual Tabela é utilizado para exibir dados dinâmicos vinculados ao Componente visual 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 visual fonte de dados e configure-o na área de design. Selecione a div principal da tabela e selecione a fonte configurada da propriedade Fonte de dados (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
Ao selecionar o campo rowData.titulo, a tabela listará o título de 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