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

License

MIT

*Gustavo A Brand