# paginate-table-vueg

> Libreria para paginado de tablas con vuejs

Latest version **0.2.9** (published 2022-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install paginate-table-vueg
pnpm add paginate-table-vueg
yarn add paginate-table-vueg
bun add paginate-table-vueg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.9 |
| Published | 2022-10-27 |
| First published | 2022-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 398.7 KB |
| Known vulnerabilities | 0 (+25 in 2 direct dependencies) |
| Install scripts | no |
| Author | Gustavo Brand |
| Maintainers | raqoon-brand |

## Links

- npm: https://www.npmjs.com/package/paginate-table-vueg
- npm.io page: https://npm.io/package/paginate-table-vueg

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [axios](https://npm.io/package/axios.md) ^0.27.2
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## Recent versions

- 0.2.9 (latest) — 2022-10-27
- 0.2.8 — 2022-09-28
- 0.2.7 — 2022-08-08
- 0.2.6 — 2022-08-08
- 0.2.5 — 2022-08-08
- 0.2.4 — 2022-08-08
- 0.2.3 — 2022-08-08
- 0.2.2 — 2022-08-08
- 0.2.1 — 2022-08-08
- 0.2.0 — 2022-08-08
- 0.1.9 — 2022-08-08
- 0.1.8 — 2022-08-02
- 0.1.7 — 2022-08-02
- 0.1.6 — 2022-08-01
- 0.1.5 — 2022-08-01
- … 5 more at https://npm.io/package/paginate-table-vueg/versions

## README

#  paginate-table-vueg

#### Requisitos

- Vue 2


## Instalación

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

```sh
npm install paginate-table-vueg --save
```

Luego en su archivo main.js o archivo raiz de su proyecto de vue, importe la libreria: 
```sh
import TablePagination from 'paginate-table-vueg'
Vue.use(TablePagination)
```

Luego para hacer uso del componente, debe invocarlo de la siguiente manera: 
```sh
<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
```json
{
	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:
```sh
<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:
```sh
<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*

---
_Source: https://npm.io/package/paginate-table-vueg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._