JOBBS ON TABLE

Procurando um pacote que monte suas tabelas html dinamicamente? que se comporte como planilhas xls? com uma série de eventos, atributos e estilos que voce pode colocar nas suas células? eu acho que o jobbsontable é a sua solução, venha se aventurar e se viciar nesse package feito e pensado em vue.js para voce.

Veja o link de demonstração

SOBRE O COMPONENTE

Para montar a tabela do jobbsontable voce precisa passar o seu json array no atributo data no padrão exigido pelo componente, voce pode consultar mais detalhes nas linhas abaixo, o componente também possui alguns métodos o onkeydown e onkeyup, voce pode navegar pelas células utilizando os direcionais do teclado ( o movimento só ocorre para inputs e selects) quando o usuário pressionar a tecla para baixo (down) ou para cima (up) ele dispara a sua função retornando o um objeto com dois atributos o lineBefore e o lineAfter, ambos também são objetos contendo todos os valores da linha anterior (lineBefore) ao click para cima ou para baixo e a linha atual (lineAfter) que está no foco.

USO BÁSICO

CÓDIGO HTML

    <template>
        <div class="row">
            <jobbs-on-table v-model="arrData"></jobbs-on-table>
        </div>
    </template>

CÓDIGO VUE

<script type="text/javascript">
    import jobbsOnTable from 'jobbsontable'
    export default {
        components: {
            jobbsOnTable
        },
        data() {
            return {
                arrData: [ 
                    [
                        {
                            value: '115.439.274-08',
                            className: '',
                            atribute: {
                                type: 'input', 
                                lenght: 11, 
                                mask: '###.###.###-##',
                                disabled: true
                            },
                            style: {
                                'backgroundColor': 'white',
                                'color': 'grey'
                            },
                            event: {
                                onClick: function(){},
                                onChange: function(){},
                                onkeyDown: function(){}
                            }
                        }
                    ],
                    [
                        {...},
                        {...}
                    ]
                ]
            }
        }
    }
</script>

ATRIBUTOS

São os atributos da célula, define a sua estrutura de exibição da célula. os tipos de atributos são.:

| nome atributo | tipo | descricao | default | |----------------|------|-----------|---------| | type | String | tipo da célula, ex.: text, input, select, money, etc. | text | | length | Integer | Tamanho do valor da célula | 200 | | mask | String | Máscara do campo, ex.: ##/##/#### | null | | options | Array | opções de escolha, Apenas para type marcado como select | null | | disabled | Boolean | Desabilita o input ou select | | name | String | Atributo name da input ou select |

ESTILO

Define um estilo css para a célula. obs.: voce também pode definir um nome de classe para a sua célula acresentando o campo className no objeto JSON da célula.

| nome atributo | descrição | |---------------|-----------| | backgroundColor | Cor de fundo da célula | | color | Cor do texto da célula | | fontSize | Tamanho da fonte da célula | | fontFamily | estilo de fonte da célula | | border | borda da célula, ex.: 4px solid black | | size | Tamanho da célula, ex.: 10px, 10% |

EVENTOS

os eventos são as ações que irão ocorrer quando o usuário interagir com as células da tabela

| nome evento | descrição | |-------------|-----------| | onClick | Evento disparado quando clicar na célula | | onChange | Evento disparado ao modificar o valor da célula, estes eventos só são disparados para celulas com o tipo de atributo input ou select | | onkeyDown | Dispara o evento quando o mouse tirar o foco da célula |

DRAG AND DROP

<jobbs-on-table 
    :data="listarDadosItemOrcamento" 
    :dragAndDrop="true"
    noDragAndDropByClassName=".grupoSuperior, .grupoInferior, .menuItem"
    dragEvent=""
    dropEvent=""
></jobbs-on-table>