Vueble (0.1.3)

Responsive and smart vue datatable component

$3

+ filas y columnas editables
+ busqueda inteligente
+ render optimizado
+ UI en base a bootstap

$3

Necesitas importar bootstrap en tu archivo ``.html` (usa la versión que desees)
`html

`

Abre tu consola preferida en la ruta principal de tu proyecto vue2 y escribe el sigiente comando:

`npm
$ npm install vueble --save
`

Propiedades

| Propiedad | Tipo de dato |Descripcion |Requerido |
| ------------- | ------------- |------------- |------------- |
| `items`| JSON Array | data que se renderizara en el datatable | si |
| `lang` | String | lenguaje de textos del componente. Opciones disponibles `en `, es . por defecto está en inglés. | no |
| `page-length` | Number | número de botones que se mostraran en el paginador. por defecto se muestran 7 | no |
| `searcheable-props` | Array | define en un arreglo las propiedades de los items que se tomaran en cuenta para el input de busqueda | no |

Usos:

#### items (Requerido)
Solo necesitas pasar el Json con la data que quieres renderizar en el datatable, `vueble` se encarga de todo el trabajo ya que automaticamente toma el primer item para detectar los nombre de las cabeceras del datatable.
`html

`
#### lang
`html

`
#### page length
`html

`
Resultado:

![](https://image.ibb.co/jDhxda/On_Paste_20170905_134523.png)
#### searcheable props
Esta opción permite restringir o parametrizar el filtro de busqueda, se puede acceder a propiedades anidadas o subpropiedades con el operador `.`
`html

`

Personalización

$3

Esta cualidad te permitira editar visualmente tus cabeceras y agregarles funcionalidad con la potencia de `vue`
`html



Frist Name
Last Name
Username
@ Email



`

$3

Para poder acceder a las propiedades o subpropiedades del `item` de nuestro `JsonData` lo haremos utilizando como raiz `item.scope`. Esta cualidad te permitira editar visualmente las filas del componente y agregar funcionalidad a ellas sin depender de la programacion interna de `vueble`
`html



``

License

MIT License