📚 addTable() - Guia Completo

A função addTable() é o coração do sistema de tabelas do OndeVou.

Ela transforma uma configuração JSON em uma tabela HTML interativa com:

📋 Padrão de Nomenclatura

📋 Exemplos Reais

// 1. CONFIGURAÇÃO (JSON)
function addTableCilindros_tipos(elemPai, setups) {
    var parameters = {
        'table-id': 'cilindros_tipos',
        'data-table-ondevou': 'cilindros_tipos',
        // ...
    };
    var el = addTable(parameters, elemPai, setups);
    return (el);
}

// 2. LISTA (Múltiplos registros) - USANDO PLURAL
function getCilindros_tipos() {
    var painel = globais.dados_pagina.visivel.painel;
    var slide = globais.dados_pagina.visivel.slide;
    
    // 🔥 Obtém o JSON via getParameters
    var parametersTable = addTableCilindros_tipos('getParameters');
    var parametersFormSearch = parametersTable['formsearch'];
    globais.dados_pagina.paineis[painel][slide]['formsearch'] = parametersFormSearch;
    
    // Cria a tabela
    var elemFormTable = addForm({});
    var elemTable = addTableCilindros_tipos(elemFormTable);
    
    // Vincula todos os elementos
    document.getElementById(slide).querySelectorAll('FORM, .btn, .painel-slide-taskbar').forEach(element => {
        element.setAttribute('id-table', elemTable.id);
    });
    
    elemFormTable.style.width = "100%";
}

// 3. FORMULÁRIO (Registro único) - USANDO SINGULAR
function getCilindro(parameters) {
    // ... estrutura de 3 colunas, formulário, etc
    var setups = parameters['setups'] || {};
    var elemTable = addTableCilindros(elemForm, setups);
    // ...
}

// 1. CONFIGURAÇÃO
function addTableVeiculos(elemPai, setups) {
    var parameters = {
        'table-id': 'veiculos',
        'data-table-ondevou': 'veiculos',
        // ...
    };
    return addTable(parameters, elemPai, setups);
}

// 2. LISTA - USANDO PLURAL
function getVeiculos() {
    var parametersTable = addTableVeiculos('getParameters');
    var parametersFormSearch = parametersTable['formsearch'];
    globais.dados_pagina.paineis[painel][slide]['formsearch'] = parametersFormSearch;
    
    var setups = { 
        'search': 'nao', 
        'html': 'nao',
        'controls': ['edit', 'qrcode']
    };
    
    var elemTable = addTableVeiculos(elemFormTable, setups);
    // ...
}

// 3. FORMULÁRIO - USANDO SINGULAR
function getVeiculo(parameters) {
    // ... estrutura de 3 colunas
    var setups = parameters['setups'] || {};
    var elemTable = addTableVeiculos(elemForm, setups);
    // ...
}

📋 Tipos de data-view

📊 Comparação de Modos

📋 Exemplo: data-view='form'

// Rotina de INCLUSÃO
function ondevou_25(parameters) {
    var setups = {};
    setups['data-view'] = 'form';  // ← Modo formulário
    setups['controls'] = ['copy', 'save', 'qrcode'];
    // ...
    getCilindro(parameters);
}

// Rotina de EDIÇÃO
function ondevou_26(parameters) {
    var setups = {};
    setups['data-view'] = 'form';  // ← Modo formulário
    setups['controls'] = ['save', 'qrcode'];
    setups['inputs'] = {
        'Id': { 'required': 'required' },
        'Tipo': { 'readonly': 'readonly' }
    };
    // ...
    getCilindro(parameters);
}

📌 Fonte: ondevou-app-0006.js

Uma tabela é definida por uma função que retorna a configuração:

function addTableCilindros(elemPai, setups) {
    var parameters = {
        'table-id': 'cilindros',
        'data-table-ondevou': 'cilindros',
        'controls': ['add', 'edit', 'save', 'delete', 'remove'],
        'headers': { ... },
        'columns': { ... },
        'formsearch': { ... }
    };
    
    var el = addTable(parameters, elemPai, setups);
    return el;
}

📌 Exemplo baseado na tabela principal cilindros

📚 Veja a documentação completa: ondevou-db-cilindros.html

📋 Parâmetros Principais

Exemplo Real da Tabela apps

{
  "Id": {
    "width": "10%"
  },
  "Ordem": {
    "width": "10%"
  },
  "Ativo": {
    "width": "10%"
  },
  "Nome": {
    "width": "30%"
  },
  "Descrição": {
    "width": "30%"
  },
  "Icone": {
    "width": "20%"
  }
}

📋 Propriedades do Header

1. Campo Simples (text)

O tipo mais comum. Aceita entrada de texto simples.

'Campo': {
    'input': {
        'required': 'required',
        'data-type-ondevou': 'text',
        'data-field-ondevou': 'campo',
        'data-table-ondevou': 'minha_tabela',
        'placeholder': 'Digite o valor...',
        'maxlength': '100',
        'formsearch': { 'required': '' }
    }
}

📋 Propriedades do tipo text

2. Campo Número (number)

Para valores numéricos com formatação automática.

'Valor': {
    'input': {
        'required': 'required',
        'data-type-ondevou': 'number',
        'data-field-ondevou': 'valor',
        'data-table-ondevou': 'minha_tabela',
        'onkeyup': 'setInputFormatNumber(this,`2`)',
        'onblur': 'setInputFormatNumberFull(this, 2)',
        'onfocus': 'setInputNumberOnFocus(this)'
    }
}

📋 Propriedades do tipo number

3. Campo Data (date)

Para datas com seletor de calendário.

'Data': {
    'input': {
        'data-type-ondevou': 'date',
        'data-field-ondevou': 'data_emissao',
        'data-table-ondevou': 'minha_tabela',
        'type': 'date',
        'class': 'datepicker',
        'placeholder': 'DD/MM/YYYY'
    }
}

📋 Propriedades do tipo date

4. Campo Checkbox

Para valores booleanos (Sim/Não).

'Ativo': {
    'input': {
        'data-type-ondevou': 'text',
        'type': 'checkbox',
        'checkbox-options': JSON.stringify({ 
            'Sim': ['S', 'N'] 
        }),
        'data-field-ondevou': 'ativo'
    }
}

📋 Propriedades do checkbox

5. Campo ID (Primary Key)

Chave primária da tabela. Gerada automaticamente.

'Id': {
    'input': {
        'readonly': 'readonly',
        'data-type-ondevou': 'number',
        'data-field-ondevou': 'id',
        'data-field-alias-ondevou': 'id_campo',
        'data-table-ondevou': 'minha_tabela,auditor_minha_tabela'
    }
}

📋 Propriedades do ID

6. Campo com Getdata (Relacionamento)

Busca dados de outra tabela (relacionamento).

'Tipo': {
    'input': {
        'data-type-ondevou': 'number',
        'data-id-field-ondevou': 'id_tipo',
        'data-field-ondevou': 'nome_tipo',
        'data-table-ondevou': 'minha_tabela',
        'getdata': JSON.stringify(addInputParametersGetDataTipos())
    }
}

📋 Propriedades com getdata

7. Campo QR Code (canvas)

Geração automática de QR Code.

'qrcode': {
    'input': {
        'readonly': 'readonly',
        'type': 'canvas',
        'qrcode-type': 'cl',
        'qrcode-text-fields': 'referencia',
        'data-type-ondevou': 'text',
        'data-field-ondevou': 'qrcode',
        'data-table-ondevou': 'qrcode'
    }
}

📋 Propriedades do QR Code

8. Campo com Eventos

Eventos JavaScript para interação.

'Campo': {
    'input': {
        'data-type-ondevou': 'text',
        'data-field-ondevou': 'campo',
        'onclick': 'minhaFuncao(this)',
        'onchange': 'outraFuncao(this)',
        'onkeyup': 'setInputFormatNumber(this,`2`)',
        'onblur': 'setInputFormatNumberFull(this, 2)',
        'onfocus': 'setInputNumberOnFocus(this)'
    }
}

📋 Eventos Disponíveis

📋 Resumo: Todas as Propriedades do Input

📋 Como os Setups Funcionam

Quando você passa setups para a função, eles substituem as configurações padrão da tabela:

// Configuração padrão da tabela (no parameters)
var parameters = {
    'table-id': 'cilindros',
    'data-table-ondevou': 'cilindros',
    'readonly': 'sim',
    'controls': ['info', 'add', 'edit', 'save', 'delete'],
    'headers': {
        'Id': {'width': '70px'},
        'Nome': {'width': '200px'}
    }
}

// setups substitui configurações
var setups = {
    'readonly': 'nao',           // ← Sobrescreve
    'controls': ['save', 'qrcode'], // ← Sobrescreve
    'headers': ['Id', 'Nome'],   // ← Filtra colunas
    'inputs': {
        'Nome': {'readonly': ''} // ← Modifica input específico
    }
}

// Resultado: tabela editável, apenas botões save/qrcode, apenas colunas Id/Nome
var tabela = addTableCilindros(elemPai, setups)

📋 Lista Completa de Setups

📋 Como Funciona

Quando você passa 'getParameters' como elemPai:

// Obtém o JSON da tabela
var jsonConfig = addTableCilindros('getParameters');

// jsonConfig contém:
// {
//   'table-id': 'cilindros',
//   'data-table-ondevou': 'cilindros',
//   'controls': ['info', 'add', 'edit', 'save', ...],
//   'headers': { 'Id': {'width':'70px'}, ... },
//   'columns': { 'Id': { 'input': {...} }, ... },
//   'formsearch': { ... },
//   ...
// }

// Útil para:
// - Debug
// - Documentação
// - Integração com outras ferramentas
// - Reutilização de configurações

📋 Exemplo: Usando getParameters em uma Rotina

function getCilindros() {{
    var painel = globais.dados_pagina.visivel.painel;
    var slide = globais.dados_pagina.visivel.slide;
    
    // 🔥 Obtém o JSON da tabela
    var parametersTable = addTableCilindros('getParameters');
    
    // Extrai os filtros de busca
    var parametersFormSearch = parametersTable['formsearch'];
    globais.dados_pagina.paineis[painel][slide]['formsearch'] = parametersFormSearch;
    
    // Cria a tabela com setups específicos
    var setups = {{ 'search': 'nao' }};
    var elemTable = addTableCilindros(elemFormTable, setups);
    
    // ... resto da rotina
}}

📌 Fonte: ondevou-app-0006.js (getCilindros)

📋 Estrutura DOM Gerada

addTable(parameters, elemPai, setups)
    ↓
1. Processa setups (substitui configurações padrão)
    ↓
2. Cria a estrutura DOM:
   div[idTable-pai]
   ├── div[idTable-top-controls]     // Barra de ferramentas
   ├── div[idTable-before]           // Conteúdo antes
   ├── div[idTable-search]           // Campos de busca
   ├── div[idTable-table]            // Tabela principal
   │   └── fieldset
   │       └── table[idTable]
   │           ├── thead
   │           │   └── tr (cabeçalho)
   │           │       ├── th (controles)
   │           │       └── th (colunas)
   │           └── tbody
   │               └── tr (linhas)
   ├── div[idTable-auxiliar]         // Tabelas relacionadas
   ├── div[idTable-auxiliar2]        // Tabelas relacionadas
   ├── div[idTable-auxiliar3]        // Tabelas relacionadas
   ├── div[idTable-btns]             // Botões adicionais
   ├── div[idTable-after]            // Conteúdo depois
   ├── div[idTable-plotly]           // Gráficos
   ├── div[idTable-summary]          // Resumo
   ├── div[idTable-dashboard]        // Dashboard
   ├── div[idTable-pdf]              // PDF
   └── div[idTable-page]             // Página (cards)
    ↓
3. Inicializa taskbar, controles, etc
    ↓
4. Retorna o elemento table

📋 Exemplo: Tabela com Tabela Auxiliar

No caso do Romaneio, uma tabela auxiliar (romaneios_destinos) é criada:

function getRomaneio(parameters) {{
    // ... cria a tabela principal ...
    var elemTable = document.getElementById(addTableRomaneios(elemForm, setups).id);
    
    // 🔥 Cria a tabela auxiliar
    var elemTableAuxiliar = document.getElementById(elemTable.id + '-auxiliar');
    
    var setupsUnidades = {{
        'search': 'nao',
        'html': 'nao',
        'responsive': 'nao',
        'launch': 'nao',
        'data-table-sync': 'nao',
        'data-table-delete': 'nao',
        'table-launch-filter': 'nao',
        'headers': ['Id', 'Romaneio', 'Unidade', 'Motivo', 'Lat destino', 'Lng destino', 'Distância (km)'],
        'controls-remove': ['info', 'cloud_sync', 'edit', 'clone', 'delete', 'marker']
    }};
    
    var elemTableItens = document.getElementById(
        addTableRomaneios_destinos(elemTableAuxiliar, setupsUnidades).id
    );
    
    // Carrega os dados da tabela auxiliar
    if (parameters['romaneio-id'] != '') {{
        var dados_retorno = getData({{
            'query': `SELECT * FROM view_romaneios_destinos WHERE id_romaneio='${{parameters['romaneio-id']}}'`,
            'view': 'view_romaneios_destinos'
        }});
        setTableControlsSetValue(elemTableItens.id, dados_retorno);
    }}
}}

📌 Fonte: ondevou-app-0017.js (getRomaneio)

📋 Padrão de Funções Observado

Formulário de inclusão de cilindro

📌 Função de Lista (plural): getCilindros()  |  📌 Função de Formulário (singular): getCilindro()

function ondevou_25(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "search": "sim",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "copy",
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Validade",
        "Descrição",
        "Referência",
        "Situação",
        "Localização",
        "Endereço",
        "Tipo",
        "Aplicação",
        "Capacidade",
        "Unidade",
        "Fabricante",
        "Propriedade",
        "Proprietário"
    ],
    "inputs": {
        "Id": {
            "launch": ""
        },
        "Descrição": {
            "texto_label": "Descrição do cilindro"
        }
    }
};
    parameters['setups'] = setups;
    getCilindro(parameters);
}

Formulário de edição de cilindro

📌 Função de Lista (plural): getCilindros()  |  📌 Função de Formulário (singular): getCilindro()

function ondevou_26(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "search": "sim",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Validade",
        "Descrição",
        "Referência",
        "Situação",
        "Localização",
        "Endereço",
        "Tipo",
        "Aplicação",
        "Capacidade",
        "Unidade",
        "Fabricante",
        "Propriedade",
        "Proprietário"
    ],
    "inputs": {
        "Id": {
            "launch": "",
            "required": "required"
        },
        "Validade": {
            "readonly": "readonly"
        },
        "Tipo": {
            "readonly": "readonly"
        },
        "Aplicação": {
            "readonly": "readonly"
        },
        "Capacidade": {
            "readonly": "readonly"
        },
        "Unidade": {
            "readonly": "readonly"
        },
        "Descrição": {
            "texto_label": "Descrição do cilindro"
        }
    }
};
    parameters['setups'] = setups;
    getCilindro(parameters);
}

Edição com menos campos bloqueados

📌 Função de Lista (plural): getCilindros()  |  📌 Função de Formulário (singular): getCilindro()

function ondevou_271(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "search": "sim",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Validade",
        "Descrição",
        "Referência",
        "Situação",
        "Localização",
        "Endereço",
        "Tipo",
        "Aplicação",
        "Capacidade",
        "Unidade",
        "Fabricante",
        "Propriedade",
        "Proprietário"
    ],
    "inputs": {
        "Id": {
            "launch": "",
            "required": "required"
        },
        "Validade": {
            "readonly": "readonly"
        },
        "Descrição": {
            "texto_label": "Descrição do cilindro"
        }
    }
};
    parameters['setups'] = setups;
    getCilindro(parameters);
}

Formulário de inclusão de romaneio

📌 Função de Lista (plural): getRomaneios()  |  📌 Função de Formulário (singular): getRomaneio()

function ondevou_32(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "search": "nao",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "copy",
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Descrição",
        "Observação",
        "Permitir cilindros vazios no carregamento",
        "Permitir cilindros vencidos no carregamento",
        "Situação",
        "Rota",
        "Vendedor",
        "Romaneio erplinux",
        "Motorista",
        "Veículo",
        "Monitoramento da viagem está ativa",
        "Início da viagem",
        "Fim da viagem",
        "Data do acerto",
        "KM inicial",
        "KM final",
        "Latitude inicial",
        "Longitude inicial",
        "Latitude final",
        "Longitude final"
    ],
    "inputs": {
        "Descrição": {
            "texto_label": "Descrição do romaneio",
            "launch": ""
        },
        "Permitir cilindros vazios no carregamento": {
            "readonly": ""
        },
        "Permitir cilindros vencidos no carregamento": {
            "readonly": ""
        },
        "Rota": {
            "launch": ""
        },
        "Motorista": {
            "launch": ""
        },
        "Veículo": {
            "launch": ""
        }
    }
};
    parameters['setups'] = setups;
    getRomaneio(parameters);
}

Formulário de edição de romaneio

📌 Função de Lista (plural): getRomaneios()  |  📌 Função de Formulário (singular): getRomaneio()

function ondevou_33(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Descrição",
        "Observação",
        "Permitir cilindros vazios no carregamento",
        "Permitir cilindros vencidos no carregamento",
        "Situação",
        "Rota",
        "Vendedor",
        "Romaneio erplinux",
        "Motorista",
        "Veículo",
        "Monitoramento da viagem está ativa",
        "Início da viagem",
        "Fim da viagem",
        "Data do acerto",
        "KM inicial",
        "KM final",
        "Latitude inicial",
        "Longitude inicial",
        "Latitude final",
        "Longitude final"
    ],
    "inputs": {
        "Id": {
            "required": "required"
        },
        "Descrição": {
            "texto_label": "Descrição do romaneio",
            "launch": ""
        },
        "Permitir cilindros vazios no carregamento": {
            "readonly": ""
        },
        "Permitir cilindros vencidos no carregamento": {
            "readonly": ""
        },
        "Situação": {
            "readonly": "readonly"
        },
        "Rota": {
            "launch": ""
        },
        "Motorista": {
            "launch": ""
        },
        "Veículo": {
            "launch": ""
        }
    }
};
    parameters['setups'] = setups;
    getRomaneio(parameters);
}

Alteração apenas da situação

📌 Função de Lista (plural): getRomaneios()  |  📌 Função de Formulário (singular): getRomaneio()

function ondevou_40(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Descrição",
        "Observação",
        "Permitir cilindros vazios no carregamento",
        "Permitir cilindros vencidos no carregamento",
        "Situação",
        "Rota",
        "Vendedor",
        "Romaneio erplinux",
        "Motorista",
        "Veículo"
    ],
    "inputs": {
        "Id": {
            "required": "required"
        },
        "Descrição": {
            "texto_label": "Descrição do romaneio",
            "readonly": "readonly",
            "launch": ""
        },
        "Rota": {
            "readonly": "readonly",
            "launch": ""
        },
        "Motorista": {
            "readonly": "readonly",
            "launch": ""
        },
        "Veículo": {
            "readonly": "readonly",
            "launch": ""
        }
    }
};
    parameters['setups'] = setups;
    getRomaneio(parameters);
}

Início de viagem com campos específicos

📌 Função de Lista (plural): getRomaneios()  |  📌 Função de Formulário (singular): getRomaneio()

function ondevou_626(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Descrição",
        "Situação",
        "Rota",
        "Vendedor",
        "Motorista",
        "Veículo",
        "Monitoramento da viagem está ativa",
        "Início da viagem",
        "Fim da viagem",
        "Data do acerto",
        "KM inicial",
        "KM final"
    ],
    "inputs": {
        "Id": {
            "required": "required"
        },
        "Descrição": {
            "texto_label": "Descrição do romaneio",
            "readonly": "readonly",
            "launch": ""
        },
        "Situação": {
            "readonly": "readonly",
            "launch": ""
        },
        "Rota": {
            "readonly": "readonly",
            "launch": ""
        },
        "Motorista": {
            "readonly": "readonly",
            "launch": ""
        },
        "Veículo": {
            "readonly": "readonly",
            "launch": ""
        },
        "Monitoramento da viagem está ativa": {
            "readonly": "readonly",
            "launch": ""
        },
        "KM inicial": {
            "required": "required",
            "launch": ""
        }
    }
};
    parameters['setups'] = setups;
    getRomaneio(parameters);
}

Finalização de viagem

📌 Função de Lista (plural): getRomaneios()  |  📌 Função de Formulário (singular): getRomaneio()

function ondevou_627(parameters) {
    if (parameters == undefined) {
        parameters = {};
    }
    var setups = {
    "data-table-update": "sim",
    "html": "nao",
    "readonly": "nao",
    "data-view": "form",
    "controls": [
        "save",
        "qrcode"
    ],
    "headers": [
        "Id",
        "qrcode",
        "Participante",
        "Descrição",
        "Situação",
        "Rota",
        "Vendedor",
        "Motorista",
        "Veículo",
        "Monitoramento da viagem está ativa",
        "Início da viagem",
        "Fim da viagem",
        "Data do acerto",
        "KM inicial",
        "KM final"
    ],
    "inputs": {
        "Id": {
            "required": "required"
        },
        "Descrição": {
            "texto_label": "Descrição do romaneio",
            "readonly": "readonly",
            "launch": ""
        },
        "Monitoramento da viagem está ativa": {
            "readonly": "readonly",
            "launch": ""
        },
        "Início da viagem": {
            "readonly": "readonly",
            "launch": ""
        },
        "Situação": {
            "readonly": "readonly",
            "launch": ""
        },
        "Rota": {
            "readonly": "readonly",
            "launch": ""
        },
        "Motorista": {
            "readonly": "readonly",
            "launch": ""
        },
        "Veículo": {
            "readonly": "readonly",
            "launch": ""
        }
    }
};
    parameters['setups'] = setups;
    getRomaneio(parameters);
}

📌 Legenda: ✅ = Habilitado | ❌ = Desabilitado | — = Não se aplica

📋 Fluxo Completo Padrão

// 1. Buscar dados com getData
var dados_retorno = getData({
    'query': `SELECT * FROM view_cilindros WHERE participante = ${globais.dados_fixo.participante}`,
    'view': 'view_cilindros'
});

// 2. Definir painel e slide
var painel = globais.dados_pagina.visivel.painel;
var slide = globais.dados_pagina.visivel.slide;

// 3. Encontrar a tabela no DOM
var idTable = getIdTableFromSlide({ 'table-id': 'cilindros' });

// 4. Resetar a tabela
setTableControlsReset(idTable);

// 5. Popular a tabela
setTableControlsSetValue(idTable, dados_retorno);

📝 Exemplo: Tabela Simples

function addTableCilindros(elemPai, setups) {
    var parameters = {
        'table-id': 'cilindros',
        'data-table-ondevou': 'cilindros',
        'controls': ['add', 'edit', 'save', 'delete', 'remove'],
        'headers': {
            'Id': { 'width': '70px' },
            'Nome': { 'width': '100%' }
        },
        'columns': {
            'Id': {
                'input': {
                    'readonly': 'readonly',
                    'data-type-ondevou': 'number',
                    'data-field-ondevou': 'id',
                    'data-table-ondevou': 'cilindros'
                }
            },
            'Nome': {
                'input': {
                    'required': 'required',
                    'data-type-ondevou': 'text',
                    'data-field-ondevou': 'nome',
                    'data-table-ondevou': 'cilindros'
                }
            }
        }
    };
    
    parameters['formsearch'] = {
        'data-table-ondevou': 'view_cilindros',
        'data-where-order': 'order by id desc'
    };
    
    addParametersFormSearch(parameters);
    var el = addTable(parameters, elemPai, setups);
    return el;
}

📱 Exemplo: Com QR Code

function addTableCilindrosComQRCode(elemPai, setups) {
    var parameters = {
        'table-id': 'cilindros',
        'data-table-ondevou': 'cilindros',
        'controls': ['add', 'edit', 'save', 'qrcode'],
        'headers': {
            'Id': { 'width': '70px' },
            'qrcode': { 'width': '100px', 'class': 'qrcode' },
            'Nome': { 'width': '200px' }
        },
        'columns': {
            'Id': {
                'input': {
                    'readonly': 'readonly',
                    'data-type-ondevou': 'number',
                    'data-field-ondevou': 'id',
                    'data-table-ondevou': 'cilindros'
                }
            },
            'qrcode': {
                'input': {
                    'readonly': 'readonly',
                    'type': 'canvas',
                    'qrcode-type': 'cl',
                    'qrcode-text-fields': 'nome',
                    'data-type-ondevou': 'text',
                    'data-field-ondevou': 'qrcode',
                    'data-table-ondevou': 'qrcode'
                }
            },
            'Nome': {
                'input': {
                    'required': 'required',
                    'data-type-ondevou': 'text',
                    'data-field-ondevou': 'nome',
                    'data-table-ondevou': 'cilindros'
                }
            }
        }
    };
    
    parameters['formsearch'] = {
        'data-table-ondevou': 'view_cilindros',
        'data-where-order': 'order by id desc'
    };
    
    addParametersFormSearch(parameters);
    var el = addTable(parameters, elemPai, setups);
    return el;
}

🔗 Exemplo: Com Getdata e Putdata

function addTableCilindrosComRelacionamento(elemPai, setups) {
    var parameters = {
        'table-id': 'cilindros',
        'data-table-ondevou': 'cilindros',
        'controls': ['add', 'edit', 'save'],
        'headers': {
            'Id': { 'width': '70px' },
            'Tipo': { 'width': '200px' },
            'Valor': { 'width': '10%', 'align': 'right', 'sum': 'sum' }
        },
        'columns': {
            'Id': {
                'input': {
                    'readonly': 'readonly',
                    'data-type-ondevou': 'number',
                    'data-field-ondevou': 'id',
                    'data-table-ondevou': 'cilindros'
                }
            },
            'Tipo': {
                'input': {
                    'required': 'required',
                    'data-type-ondevou': 'number',
                    'data-id-field-ondevou': 'id_tipo',
                    'data-field-ondevou': 'nome_tipo',
                    'data-table-ondevou': 'cilindros_tipos',
                    'getdata': JSON.stringify(addInputParametersGetDataCilindrosTipos()),
                    'putdata': JSON.stringify({
                        'tabela': 'cilindros_tipos',
                        'unique': 'participante,nome',
                        'fields': {
                            'participante': 'participante',
                            'nome': 'nome_tipo'
                        }
                    })
                }
            },
            'Valor': {
                'input': {
                    'required': 'required',
                    'data-type-ondevou': 'number',
                    'data-field-ondevou': 'valor',
                    'data-table-ondevou': 'cilindros',
                    'onkeyup': 'setInputFormatNumber(this,`2`)',
                    'onblur': 'setInputFormatNumberFull(this, 2)',
                    'onfocus': 'setInputNumberOnFocus(this)'
                }
            }
        }
    };
    
    parameters['formsearch'] = {
        'data-table-ondevou': 'view_cilindros',
        'data-where-fixed': 'participante=1',
        'data-where-order': 'order by id desc'
    };
    
    addParametersFormSearch(parameters);
    var el = addTable(parameters, elemPai, setups);
    return el;
}