npm package: @musicbattles/grid
Description: Grid genérico # Instalación ```sh npm i @musicbattles/grid ``` # Uso
Latest version: 1.0.0

# Grid
Grid genérico
# Instalación
```sh
npm i @musicbattles/grid
```
# Uso

```sh
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { GridModule } from '@musicbattles/grid';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, GridModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

```
# Implementación HTML

<pre><code>&lt;bo-grid
 [editButton]="true"
 [deleteButton]="true"
 [headers]="customerHeader"
 [data]="dataGrid"
 [search]="false"
 [paginationServer]="true"
 [otherColumns]="customerCols"
 [changeSizePage]="newChangespages"
 [total]="sizePaginator"
 [nameFileExport]="nameExport"
 [showMenuExport]="true"
 [horizontal]="false"
 (event)="customEvent($event)"
 (eventPagination)="eventPaginationSearch($event)">
 &lt;/bo-grid&gt;
</code></pre>


# Implementación TS

```sh
import { Component, OnInit } from '@angular/core';
import { GridHeader, PaginationGrid, EventGrid } from '@musicbattles/grid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

export class AppComponent extends PaginationGrid implements OnInit {

  customerHeader: GridHeader[] = [
    {name: 'Nombre', key: 'name'},
    {name: 'Fecha inicio', key: 'start_date'},
    {name: 'Estatus', key: 'status'},
  ]
  
  dataGrid = [
    {id: 1, name: 'data 1', start_date'05/01/2021', status: 'Active'},
    {id: 2, name: 'data 2', start_date'15/03/2021', status: 'Active'},
    {id: 3, name: 'data 3', start_date'08/04/2021', status: 'Pending'},
  ]
  
  otherColumns: Column[] = [
    {nameColumn: 'Ver reporte', nameRef:'view_report', icon: 'poll', event:'report', type:'icon'}
  ]
  
  newChangespages: numbe[] = [5,10,15];
  
  constructor() {
    super();
  }

  ngOnInit() {
  }
  
  getDataGrid(predicate: string) {
   ...call services....
  }
  
  customEvent(e: EventGrid<T>){
    if(e.event === 'edit'){
        ....
    } else if(e.event === 'delete'){
        ....
    } else if(e.event === 'report'){
     ...
    }
  
  }
}

```

El paginador es altamente personalizado a cada necesidad.  


<p>El paginador se puede configurar para saber si la paginación la realizara desde lado del front o del lado del servidor.</p>
<p>Si la paginación se realizara del lado del servidor se recomienda extender de la clase base PaginationGrid ya que contiene<br> métodos el cual recibe los parámetros indicando si cambio de página, si realizo una búsqueda.<br>Siempre buscara el método getDataGrid el cual debe ser implementado en su componente. </p>


## Inputs

| Name | Type | Description|
| ------ | ------ |------ |
| editButton | boolean | Especifica si se mostrara el botón editar.<br>Si se ejecuta emitira el evento edit | 
| deleteButton | boolean | Especifica si se mostrara el botón eliminar.<br>Si se ejecuta emitira el evento delete |
| headers | GridHeader[] | Especifica el nombre a mostrar en la tabla. Contiene 2 propiedades name y key. <br> Ambos campos son requeridos. name especifica el nombre a mostrar en la columa y key<br> la propidad del objeto que se pasa en la data |
| data | Array<any> | Especifica la data a mostrar en el grid |
| search | boolean | Especifica si se mostrara el buscador en el grid |
| paginationServer | boolean | Especifica si se paginara del lado del servidor de la vista |
| otherColumns | Column[] | Especifica si deseas agregar columnas personalizadasr. Los valores requeridos son <br> <ul><li>nameColumn. Especifica el nombre de la columna</li><li>nameRef. Especifica la referencia de la columna</li><li>icon. Nombre del icono a mostrar. Este icono debe ser de material</li><li>event. Nombre del evento cuando se ejecute en el grid</li><li>type. Como se mostrara en la tabla. Puede ser de tipo icon, img, button, check,<br> input, checkbox</li></ul>  |
| changeSizePage | number[] | Por default el tamaño del paginador es de [10,25, 50] pero se puede pasar un array <br> con los tamaños de la paginación deseada |
| total | number | Si esta trabajando con paginación del lado del servidor, debe especificar el tamaño total <br> de los datos para que el paginador calcule el No de paginas |
| nameFileExport | string | Indica el nombre del archivo a exportar en excel y pdf |
| showMenuExport | boolean | Especifica si se desea mostrar la opción de exportar los datos del grid a excel y pdf |
| horizontal | boolean | Especifica si la exportación del pdf sera en horizontal o vertical |

## Outputs

| Name | Type | Description|
| ------ | ------ |------ |
| event | EventGrid<T> | Emitira eventos referente a las acciones del usuario como editar, eliminar o si se personalizo<br> una columna. El valor emitido es de tipo EventGrid la cual es una interface <br>que contiene 2 propiedades event y data. |
| eventPagination | EventGrid<T> | Emitira solo eventos referentes a la paginación. Si se extiende la de clase PaginationGrid<br> puedes llamar al método eventPaginationSearch y a su vez llamara el método getDataGrid.<br>Se puede crear un método personalizdo sin problema |

## License
MIT

# Autor

####  Daniel Garcia