Grid

Grid genérico

Instalación

npm i @musicbattles/grid

Uso

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

Implementación TS

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.

Inputs

| Name | Type | Description| | ------ | ------ |------ | | editButton | boolean | Especifica si se mostrara el botón editar.Si se ejecuta emitira el evento edit | | deleteButton | boolean | Especifica si se mostrara el botón eliminar.Si se ejecuta emitira el evento delete | | headers | GridHeader[] | Especifica el nombre a mostrar en la tabla. Contiene 2 propiedades name y key. Ambos campos son requeridos. name especifica el nombre a mostrar en la columa y key la propidad del objeto que se pasa en la data | | data | Array | 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 nameColumn. Especifica el nombre de la columnanameRef. Especifica la referencia de la columnaicon. Nombre del icono a mostrar. Este icono debe ser de materialevent. Nombre del evento cuando se ejecute en el gridtype. Como se mostrara en la tabla. Puede ser de tipo icon, img, button, check, input, checkbox | | changeSizePage | number[] | Por default el tamaño del paginador es de [10,25, 50] pero se puede pasar un array 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 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 | Emitira eventos referente a las acciones del usuario como editar, eliminar o si se personalizo una columna. El valor emitido es de tipo EventGrid la cual es una interface que contiene 2 propiedades event y data. | | eventPagination | EventGrid | Emitira solo eventos referentes a la paginación. Si se extiende la de clase PaginationGrid puedes llamar al método eventPaginationSearch y a su vez llamara el método getDataGrid.Se puede crear un método personalizdo sin problema |

License

MIT

Autor

Daniel Garcia