Paginate-table-vueg NPM

paginate-table-vueg

Requisitos

Vue 2

Instalación

En su terminal de preferencia ubique la raiz del proyecto y ejecute el siguiente comando.

npm install paginate-table-vueg --save

Luego en su archivo main.js o archivo raiz de su proyecto de vue, importe la libreria:

import TablePagination from 'paginate-table-vueg'
Vue.use(TablePagination)

Luego para hacer uso del componente, debe invocarlo de la siguiente manera:

<paginate-table-vueg></paginate-table-vueg>

Propiedades (props)

La libreria soporta las siguientes propiedades:

Props	Descripción
:columns	(array) matriz de datos que contiene los nombres de las columnas de la tabla
:rows	(array) matriz de datos que contiene los valores de la tabla
:is-loading	(boolean) agrega un loader mientras carga la información en la tabla
:paginate	(object) objeto de datos que contiene la información del paginado
:next-page	(function) Método que escucha los clic que se hacen en los botónes del páginado
:classes	(object) permite aplicar cierta lógica para dar estilos a las filas de la tabla

Uso de :columns

Props	Ejemplo
:columns	`[{label: "Nombres completos", "name": "fullnames"}]`

Claves de columns	Descripción
label	Es la descripción de la columna
name	Es el nombre de la clave que devuelve el back

Uso de :rows

Props	Ejemplo
:rows	`[{fullnames: "Levi Ackerman"}]`

En el ejemplo anterior se muestra como el back deberia de retornar la información.

Uso de :is-loading

Props	Ejemplo
:is-loading	`true or false`

Muestra un pequeño loader mientras se completa el cargado de información en la tabla.

Uso de :paginate

Claves de paginate	Descripción
total	Cantidad de datos que retorna el backend
per_page	Cantidad de rango de datos de paginación
current_page	Número de página actual
last_page	Número de última página
first_page_url	url que carga la primera página
last_page_url	url que carga la última página
next_page_url	url que carga la siguiente página
prev_page_url	url que carga la anterior página
path	url del endpoint que carga los datos de la tabla
from	from
to	to
max_visible_buttons	Cantidad de datos que se muestran por paginación
data	Los datos que se van a mostrar en la tabla

Uso de :next-page

Props	Ejemplo
:next-page	`:next-page="tuMetodo"`

La propiedad :next-page esta escuchando cada clic que se realiza sobre un botón de paginación. Esto permite que podamos manipular la siguiente consulta que se va a realizar al backend y mostrar los datos del número de paginación correspondiente. Ejemplo: tuMetodo(page){ //el valor page es el número de la página a la que se hizo clic }

Uso de :classes

{
	classes: {
		row: {
			"alert alert-warning text-dark":  function(row){
				return (row.age >= 18);
			}
		}
	}
}

En el ejemplo anterior se indica que las filas que contengan los registros con la edad mayor a 18, las pinte de color amarillo (alert-warning es la clase de bootstrap).

Manejo de slots

slot empty-data

Si queremos mostrar un mensaje personalizado en la tabla cuando hayan registros, podemos utilizar el siguiente slot:

<paginate-table-vueg>
    <template v-slot:empty-data>
		<div class="alert alert-info">
			<p class="text-center font-weight-bold">No se encontraron registros.</p>
		</div>
	</template>
</paginate-table-vueg>

slot columnas

Si en alguna columna no se quiere mostrar el texto descriptivo, si no mas bien personalizarlo con estilos o agregar un botón, se puede especificar la columna que se quiere personalizar por medio de un slot dinámico. Por ejemplo:

<paginate-table-vueg>
    <template v-slot:id="props">
        <button type="button" class="btn btn-info btn-sm" title="Ver detalle">
            Ver detalle
        </button>
    </template>
</paginate-table-vueg>

Aqui se puede observar que la columna que se esta afectando por medio del slot, es la columna "id" (v-slot:id).