Package Exports

vueble

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vueble) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vueble (0.1.3)

Responsive and smart vue datatable component

Ventajas:

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

Instalación

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

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

<vueble :items="[
    {name:'jhon doe',age:'25'},
    {name:'July doe',age:'21'},
  ]"></vueble>

lang

<vueble :items="JsonData" lang="es"></vueble>

page length

<vueble :items="JsonData" :page-length="3"></vueble>

Resultado:

searcheable props

Esta opción permite restringir o parametrizar el filtro de busqueda, se puede acceder a propiedades anidadas o subpropiedades con el operador .

<vueble :items="JsonData" :searcheable-props="[
    'Person.firstName',
    'Person.LastName'
]"></vueble>

Personalización

Columnas

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

<vueble :items="JsonData">
    <tr slot="colums">
        <!-- Aqui puedes editar el contenido de tus cabeceras -->
        <th><i class="fa fa-user"> </i> Frist Name</th>
        <th><i class="fa fa-user"> </i> Last Name</th>
        <th><i class="fa fa-user"> </i> Username</th>
        <th>@ Email</th>
        <!-- -->
    </tr>
</vueble>

Filas

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

<vueble :items="JsonData">
    <template slot="row" scope="item">
        <tr >
            <td>{{item.scope.Person.firstName}}</td>
            <td>{{item.scope.Person.lastName}}</td>
            <td>{{item.scope.username}}</td>
            <td>{{item.scope.email}}</td>
        </tr>
    </template>
</vueble>

License

MIT License