# jobbsontable

> O jobbs on table é uma lib vue desenvolvido pela unity para montar tabelas html dinamicamente, voce passa os parametros em json e automagicamente voce recebe o código html simples, rápido e facil.

Latest version **1.4.0** (published 2019-11-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install jobbsontable
pnpm add jobbsontable
yarn add jobbsontable
bun add jobbsontable
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2019-11-26 |
| First published | 2019-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | JoaoNeto |
| Maintainers | joaonetoprogramador |
| Keywords | vue, handsontable, jobbsontable, componente, xls, grid, excel, vue.js, component, data table, tabela |

## Links

- npm: https://www.npmjs.com/package/jobbsontable
- Repository: https://gitlab.com/joaoNeto/jobbsontable
- Homepage: https://gitlab.com/joaoNeto/jobbsontable#readme
- Issues: https://gitlab.com/joaoNeto/jobbsontable/issues
- npm.io page: https://npm.io/package/jobbsontable

## Dependencies (13)

- [vue](https://npm.io/package/vue.md) ^2.5.17
- [v-mask](https://npm.io/package/v-mask.md) ^1.3.2
- [vue-i18n](https://npm.io/package/vue-i18n.md) ^8.0.0
- [draggable](https://npm.io/package/draggable.md) ^4.2.0
- [popper.js](https://npm.io/package/popper.js.md) ^1.16.0
- [vee-validate](https://npm.io/package/vee-validate.md) ^2.0.5
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.21.0
- [vue-clickaway](https://npm.io/package/vue-clickaway.md) ^2.1.0
- [vue-mouse-menu](https://npm.io/package/vue-mouse-menu.md) ^1.1.0
- [vue-form-wizard](https://npm.io/package/vue-form-wizard.md) ^0.8.4
- [vue2-google-maps](https://npm.io/package/vue2-google-maps.md) ^0.8.4
- [vue2-transitions](https://npm.io/package/vue2-transitions.md) ^0.2.2
- [vue-click-outside](https://npm.io/package/vue-click-outside.md) ^1.0.7

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.4.0 (latest) — 2019-11-26
- 1.3.9 — 2019-11-20
- 1.3.8 — 2019-11-20
- 1.3.7 — 2019-11-20
- 1.3.6 — 2019-11-19
- 1.3.5 — 2019-11-18
- 1.3.4 — 2019-11-14
- 1.3.3 — 2019-11-14
- 1.3.2 — 2019-11-14
- 1.3.1 — 2019-11-14
- 1.3.0 — 2019-11-14
- 1.2.4 — 2019-11-12
- 1.2.3 — 2019-11-12
- 1.2.2 — 2019-11-11
- 1.2.1 — 2019-11-11
- … 12 more at https://npm.io/package/jobbsontable/versions

## README

### 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.

<b>[Veja o link de demonstração](http://jobbsontable.sistemajobb.com.br/)</b>

#### SOBRE O COMPONENTE

Para montar a tabela do jobbsontable voce precisa passar o seu json array no atributo <b>data</b> no padrão exigido pelo componente, voce pode consultar mais detalhes nas linhas abaixo, o componente também possui alguns métodos o <b>onkeydown</b> e <b>onkeyup</b>, 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 <i>lineBefore</i> e o <i>lineAfter</i>, 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

```html
    <template>
        <div class="row">
            <jobbs-on-table v-model="arrData"></jobbs-on-table>
        </div>
    </template>
```
CÓDIGO VUE

```javascript

<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, <b>Apenas para type marcado como select</b> | 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.
<br>
<b> obs.: voce também pode definir um nome de classe para a sua célula acresentando o campo <i>className</i> no objeto JSON da célula. </b>

| 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 <b>input</b> ou <b>select</b> |
|  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>

---
_Source: https://npm.io/package/jobbsontable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._