Vuejs 2 data table

Para los que estan experimentando con Vuejs, les comparto un ejemplo que hice de un datatable simple.

Intro

Seguro que muchos desarrolladores (me incluyo) que tienen años viendo la parte de frontend/backend han estado trabajando mucho con Jquery, ya que muchos de los sistemas en los que trabajan, fueron creados hace varios años (en los tiempos en que jquery era el rey del frontend para la parte de javascript).

Pues ahora existen tantas librerias o frameworks en frontend que uno tiene que elegir cuál es el más conveniente, obviamente de acuerdo a un análisis previo de los requerimientos. En mi caso he estado aprendiendo a usar el framework Vuejs, ya que en mi opinión es fácil de aprender y es bastante escalable.

Datatable

En mi actual trabajo estoy desarrollando nuevos módulos independientes, por lo que me facilita poder implementar nuevas tecnologías (o al menos poco a poco ir actualizándolo). Uno de los componentes más usados en el desarollo de sistemas son las tablas con funcionalidad de búsqueda, ordenamiento y paginación. Por lo tanto decidí implementarlo con Vuejs, sin ayuda de la librería conocida datatables.net.

Características

  • Listado de elementos (por ajax).
  • Búsqueda por texto.
  • Ordenamiento por columnas.
  • Paginación.

Cómo usarlo?

Se ha implementado una plantilla y además un código en javascript/vuejs que son genéricos, por lo que se podrá usar la misma plantilla para más de un datatable. Para agregar un datatable se debe agregar lo siguiente:

<div id="clubs-grid-container" class="grid-container">
    <front-grid
            :pk="pk"
            :search-text="searchText"
            :url="listUrl"
            :data="gridData"
            :columns="gridColumns"
            :filter-key="searchQuery"
            :edit-url="editUrl">
    </front-grid>
</div>

El código en javascript sería el siguiente:

// bootstrap the container
var listContainer = new Vue({
    el: '#clubs-grid-container',
    data: {
        pk: "key",
        searchText: "",
        listUrl: "/list",
        editUrl: "/edit/<pk>",
        searchQuery: '',
        gridColumns: [
            { name: 'key', label: 'Key'},
            { name: 'code', label: 'Code' },
            { name: 'name', label: 'Name', sort: 'asc', edit: true }
        ],
        gridData: []
    }
});
listContainer.$children[0].loadData();

Antes de éste codigo en javascript, debería cargarse el contenido (con referencia a mi github: https://github.com/ccrrvvaa/vuejs-simple-datatable) de templates/templates.html y los archivos javascript: js/vue.min.js y js/vue-components.js. El archivo templates.html contiene la maquetación del datatable y el archivo vue-components.js contiene su lógica de implementación. En éstos 2 archivos es donde se puede modificar su funcionamiento en caso el desarrollador requiera personalizarlo.

El código se encuentra en mi github: https://github.com/ccrrvvaa/vuejs-simple-datatable

Compartir...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *