Tabela

1. Geral

A Tabela é o componente para a criação de listas e tabelas interativas. Ele é a escolha ideal para CRUDs (Criar, Ler, Atualizar, Deletar), pois permite visualização de dados, imagens, ícones, edição em linha, ações por registro, busca e paginação de forma nativa.

2. Como Configurar 

A configuração do componente é feita através de um conjunto de variáveis. Abaixo estão as suas funcionalidades e como configurá-las.

3. Dados

3.1. Query

Configure seu SQL e use o preview para validar os dados. Retorne todas as colunas que serão referenciadas na variável dataField na configuração das colunas. Dica: Use alias nas colunas para facilitar a referência. 

Dica para uso de datas: Na query, use DATE_FORMAT(..., '%Y-%m-%d'), casando exatamente com o formato definido na variável de inputDateFormat (exemplo: "yyyy-MM-dd") na configuração da sua coluna de data. 

4. Colunas 

4.1. Colunas

É o coração da lista. Define, através de um JSON, cada coluna da tabela: seu título, o tipo de dado (texto, input, etc.), a largura e a ordem de exibição. Dentro desse JSON, cada linha deve ter:

Campos Obrigatórios:

columnName: Um nome único para a coluna.

headerName: O título que aparecerá no cabeçalho.

dataField: O nome (ou alias) da coluna vinda da sua query.

position: Um número que define a ordem de exibição (menores primeiro).

columnType: O tipo de conteúdo da célula. São eles:

• data_text, data_number: Apenas para exibir dados de texto e número (não editável).

• input_text, input_number, input_date: Campos de texto, número ou data editáveis.

  • Para todos os inputs, defina a variável onValueChangeDBActionID com o ID da Ação de Database que salvará a alteração. Exemplo de Ação de Database:

    UPDATE TABELA SET OBSERVACAO = :VAR_VALUE_ALTER WHERE ID = :

    
    

  • Para input_date, use a variável inputDateFormat (exemplo: "dd/MM/yyyy") de forma que case com o formato de data definido na sua query.

• input_dropdown: Cria uma lista de seleção (dropdown) editável.

  • Use a variável dropdownOptionsWithQuery para definir as opções do dropdown através de uma query em SQL que retorne duas colunas: ID e DESCR. Exemplo de query:

    SELECT ID, DESCRICAO FROM

    
    

  • Ou use a variável dropdownOptions para definir as opções do dropdown através de uma lista estática. Formato esperado: [ {label, value} ]. Exemplo:

    [
        {
            "value": "Baixa",
            "label": "Baixa"
        },
        {
            "value": "Média",
            "label": "Média"
        },
        {
            "value": "Crítica",
            "label": "Crítica"
        },
        {
            "value": "Muito Crítica",
            "label": "Muito Crítica"
        }
    ]

  
  

• data_boolean_checkbox: Exibe um checkbox (marcado/desmarcado) editável.

• action_button: Cria um único botão com texto dentro da célula.

  • buttonText: Defina o texto do botão.

  • buttonVariant: Define o estilo do botão.

    • normal: visual neutro. Use para ações comuns.

    • destructive: visual vermelho. Use só para ações potencialmente irreversíveis ou de alto impacto.

  • interaction: Define a interação do botão. Deve seguir o formato "tipo:id", onde tipo pode ser: "form", "modal", "dbaction" ou "action". Exemplo: “form:2” ou “dbaction:5”.

  • setRowIdVariableForButton: Coloque o nome da variável que recebe o ID do registro ao clicar.

Campos Opcionais:

enableSorting: ativa (true) ou desativa (false) a ordenação de uma coluna. 

width: define a largura fixa da coluna. O valor é passado como string com unidade de medida, por exemplo: "120px".

disabledControlColumn: recebe o nome de uma coluna da query que funciona como "chave de bloqueio". Se o valor dessa coluna for 0, o input correspondente será automaticamente desabilitado, caso seja 1, ele fica habilitado. É útil para criar lógica condicional de edição dentro da própria tabela.

4.2. Colunas de Ícones e Fotos

Permite, através de um JSON, criar colunas especiais que exibem uma imagem (avatar) ou um ícone customizável.

Campos para definir:

columnName: Nome único da coluna.

headerName: O título que aparecerá no cabeçalho.

width: Largura da coluna. Valor em string com unidade de medida (ex.: "60px"). Padrão: 60px.

imageField: Campo da query que retorna a URL da imagem.

iconField: Campo da query que retorna o nome do ícone a ser exibido, só aparece caso a imageField não for definida.

iconColorField: Campo da query que define a cor do ícone.

iconBgColor1Field: Cor de fundo inicial (sólido).

iconBgColor2Field: Cor de fundo final (quando quiser usar gradiente).

position: Número que define a ordem de exibição (menores primeiro).

imageShape: Formato da imagem. Aceita os valores:

• circle: Imagem circular

• rounded: Bordas arredondadas

• square: Imagem quadrada

5. Configurações Gerais

5.1. Título Geral

Define o título que aparece no topo do componente.

5.2. Subtítulo Geral

Define o subtítulo que aparece no topo do componente.

5.3. Variável de ID

Define o nome da variável que armazenará o ID da linha quando um campo for alterado. Exemplo: :VAR_REGISTRO_ID.

5.4. Variável na Alteração

Define o nome da variável que receberá o novo valor do campo alterado. Exemplo: :VAR_VALUE_ALTER.

6. Botões

6.1. Grupo de Botões da coluna “Ações”

Configura, através de um JSON, os botões de ação que aparecem na coluna “Ações” dentro da Tabela, em cada linha. Exemplo: botões para editar e excluir. Cada objeto é um botão com ícone, texto e interação.

Campos para definir:

icon: Nome do ícone (biblioteca Lucide, em PascalCase). Exemplos: Download, Undo, Trash2, Eye, Pencil.

hoverText: Texto do tooltip exibido ao passar o mouse.

interaction: Define a ação ao clicar. Formato "tipo:id", onde tipo pode ser form, modal, dbaction ou action. Exemplos: "form:2", "dbaction:5".

bgColor: Cor de fundo do botão (HEX). Exemplo: "#EF4444".

iconColor: Cor do ícone (HEX). Exemplo: "#FFFFFF".

queryColumn: Caso queria um botão com visibilidade dinâmica, insira o nome da coluna booleana/numérica da query que controla se o botão aparece (1) ou não (0).

Observação: Para os botões funcionarem perfeitamente para cada registro, não se esqueça de definir a Variável de ID.

6.2. Grupo de Botões do Cabeçalho

Configura, através de um JSON, os botões do cabeçalho. Exemplo: “Adicionar Novo Item”. Cada objeto é um botão com texto, ícone, interação.

Campos para definir:

label: Texto do botão.

icon: Nome do ícone (biblioteca Lucide, em PascalCase). Exemplos: Download, Undo, Trash2, Eye, Pencil.

interaction: Define a ação ao clicar. Formato "tipo:id", onde tipo pode ser form, modal, dbaction ou action. Exemplos: "form:2", "dbaction:5".

bgColor: Cor de fundo do botão (HEX). Exemplo: "#EF4444".

textColor: Cor do texto e ícone (HEX). Exemplo: "#FFFFFF".

7. Paginação

7.1. Paginação

Ativa ou desativa a paginação da tabela.

7.2. Quantidade de Linhas por Página

Define o número de registros que serão exibidos por página quando a paginação está ativa. Caso não seja definido, o padrão é 7 registros por página.

8. Design

8.1. Exibição da Borda

Adiciona uma borda e sombra ao redor do componente, criando um visual de “card” mais elegante.

8.2. Exibição da Barra de Buscar

Exibe a barra de busca no cabeçalho, permitindo que o usuário filtre os resultados.

8.3. Estilo de Design da Tabela

Define o estilo visual da tabela. Use o Estilo Clássico para CRUDs (padrão) ou Estilo Análise de Dados para tabelas de análise (mais compacto e próprio para análises, normalmente utilizado sem a Barra de Buscar).

9. Modal

9.1. Tamanho do Modal

Define o tamanho padrão dos modais abertos a partir de uma interação na lista. Use o formato "largura:altura" em percentual (exemplo: "80:90" para um modal que ocupa 80% da largura e 90% da altura da tela). Se deixado em branco, o modal abrirá em tela cheia.

9.2. Fechar ao Recarregar Modal?

O modal aberto será fechado automaticamente após uma ação interna que recarregue a tela do modal. 

10. Reatividade

Mantenha a reatividade manual ativada: ela atualiza automaticamente a interface sempre que variáveis, queries ou filtros mudam — sem “piscadas” ou recarregamentos completos — garantindo experiência fluida, dados sincronizados e preservando o contexto.

11. Configurações Avançadas

Se quiser explorar opções avançadas de personalização, acesse nossa documentação. Lá você encontrará instruções para configurações mais complexas para adaptar o componente exatamente às suas necessidades.